珑格斯 网站建设方案解决专家 » 博客 http://longoes.com 珑格斯 网站建设方案解决专家 Thu, 13 Oct 2011 03:13:51 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 wordpress下修改文章导航和页面导航 http://longoes.com/blog/cms/wordpress/wordpress%e4%b8%8b%e4%bf%ae%e6%94%b9%e6%96%87%e7%ab%a0%e5%af%bc%e8%88%aa%e5%92%8c%e9%a1%b5%e9%9d%a2%e5%af%bc%e8%88%aa.html http://longoes.com/blog/cms/wordpress/wordpress%e4%b8%8b%e4%bf%ae%e6%94%b9%e6%96%87%e7%ab%a0%e5%af%bc%e8%88%aa%e5%92%8c%e9%a1%b5%e9%9d%a2%e5%af%bc%e8%88%aa.html#comments Thu, 13 Oct 2011 03:13:15 +0000 admin http://longoes.com/?p=527 导航获取函数为 <?php wp_list_pages(‘title_li=0&sort_column=menu_order’); ?>

文章分类获取行数为 <?php wp_list_categories(‘title_li=0&orderby=name&show_count=0&depth=1′); ?>

我们只要将获取的的方法调换即可。

]]> http://longoes.com/blog/cms/wordpress/wordpress%e4%b8%8b%e4%bf%ae%e6%94%b9%e6%96%87%e7%ab%a0%e5%af%bc%e8%88%aa%e5%92%8c%e9%a1%b5%e9%9d%a2%e5%af%bc%e8%88%aa.html/feed 0 手机上的HTML5框架 Sencha Touch http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e6%89%8b%e6%9c%ba%e4%b8%8a%e7%9a%84html5%e6%a1%86%e6%9e%b6-sencha-touch.html http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e6%89%8b%e6%9c%ba%e4%b8%8a%e7%9a%84html5%e6%a1%86%e6%9e%b6-sencha-touch.html#comments Fri, 24 Jun 2011 03:27:10 +0000 admin http://longoes.com/?p=523

第一个HTML5的手机应用框架

Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touchscreen devices.

]]> http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e6%89%8b%e6%9c%ba%e4%b8%8a%e7%9a%84html5%e6%a1%86%e6%9e%b6-sencha-touch.html/feed 0 33 超棒的 jQuery 教程 http://longoes.com/blog/%e5%89%8d%e7%ab%af/33-%e8%b6%85%e6%a3%92%e7%9a%84-jquery-%e6%95%99%e7%a8%8b.html http://longoes.com/blog/%e5%89%8d%e7%ab%af/33-%e8%b6%85%e6%a3%92%e7%9a%84-jquery-%e6%95%99%e7%a8%8b.html#comments Fri, 24 Jun 2011 03:01:39 +0000 admin http://longoes.com/?p=487

在这篇文章中，我们为您收集了一些非常有用的，而且效果很好的 jQuery 实际开发教程。

1. 使用 jQuery 构建一个可滑动的产品幻灯展示

2. 使用 PHP、jQuery 和 CSS3 实现的相片展位

3. 使用 jQuery 创建很酷的动画菜单

4. 使用 Raphaël 实现的动画技巧

5. 对图片进行各种角度的旋转

6. 图片墙

7. 图片缩略图滑动展示

8. 支持缩略图的全屏图片展示

9. 移动方框中的内容

10. Sliding Stacked Images With JQuery

11. 实现可拖放的购物车

12. Sweet Thumbnails Preview Gallery

13. 效果更佳的 checkbox

14. Shutter Effect Portfolio with jQuery and Canvas

15. Making a Flickr-powered Slideshow

16. 实现简单的工具提示菜单

17. 投票并显示结果

18. Cover Flow Remade with CSS and jQuery

19. Rocking and Rolling Rounded Menu with jQuery

20. Create an Attractive Before and After Photo Effect with jQuery

21. 动画的表单切换

22. 视差滑块

23. 高级的联系表单，要求 PHP 支持

24. jQuery 和 CSS 实现的单页相册

25. 如何制作自动的相片展示

26. Shuffle Between Images Using JQuery

27. JQuery Expand Stacked Images Using Slider

28. 创建即时贴

29. Create an Exploding Logo with CSS3 and MooTools or jQuery

30. 动画效果的滚动到顶部

31. Creating a modern gallery with raphael

32. Lets make some mess using jQuery and CSS3

33. Vintage typewriter: The sexiest jQuery contact form ever

更多关于jQuery的详细信息，或者下载地址请点这里

]]> http://longoes.com/blog/%e5%89%8d%e7%ab%af/33-%e8%b6%85%e6%a3%92%e7%9a%84-jquery-%e6%95%99%e7%a8%8b.html/feed 0 关于三角形的制作方法 http://longoes.com/blog/%e5%85%b3%e4%ba%8e%e4%b8%89%e8%a7%92%e5%bd%a2%e7%9a%84%e5%88%b6%e4%bd%9c%e6%96%b9%e6%b3%95.html http://longoes.com/blog/%e5%85%b3%e4%ba%8e%e4%b8%89%e8%a7%92%e5%bd%a2%e7%9a%84%e5%88%b6%e4%bd%9c%e6%96%b9%e6%b3%95.html#comments Fri, 14 Jan 2011 15:50:26 +0000 admin http://longoes.com/?p=484 三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢，下面我根据我们的实际工作中的经验作了简单的总结。

第一种方案，我们可以通过使用背景图片的方式来处理，这也是我们最经常用的方法。
1）单个切出三角形，我们可以根据UI设计的需求，切出与之相适应的图片，比如 ，我们能方便的根据需求，制作不同高度和颜色的三角形。在使用方面，HTML代码和CSS代码相对简单。如下面图是示例：

这种直接使用背景图片的方法适合我们在三角形包含渐变、纹样、肌理等特殊效果的时候，我们可以设置它的颜色来保证图形边缘与背景色完美一致。缺点是我们需要为每个不同的方向需求制作一个图片，增加了http请求和CSS代码的数量。
由于这种方法比较简单,我们就不做演示了.
2）相比之前，我们怎么做到减少http请求，同时也标示出四个方向的三角形呢？我们可以制作一个菱形 ，通过使用CSS的背景定位来选择与之相匹配的形状。这样我们就能用一个图形，达到四个图形的目的。

</p>
<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">
	<em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px"></em><em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat -35px 0;width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px;"></em><br />
    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 -35px;width:67px;height:34px;display:block;position:absolute;bottom:-34px;left:15px;"></em><br />
    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px;"></em>
</div>
<p>

3）方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况，但是在颜色方面确实单一的，我们只能由一种颜色，那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候，我们应该怎么做呢？比如鼠标悬浮的时候由红色变成橙色？那我们就可以使用这种方法，通过正负形的方法，方法二中的方法我们通过一个正形，那下面的例子我们使用一个负形

HTML文件

</p>
<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">
    <a class="n_a_1"></a><br />
    <a class="n_a_2" ></a><br />
    <a class="n_a_3" ></a><br />
    <a class="n_a_4"></a>
</div>
<p>

CSS文件
<br />
.n_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url(http://varhi.com/wp-content/uploads/2011/01/negative_4.gif);background-repeat:no-repeat;position:absolute;display:block;}<br />
a.n_a_1{background-color:#0033CC;background-position:0 0;width:67px;height:34px;top:-34px;left:15px}<br />
a.n_a_1:hover{background-color:#db0085}<br />
a.n_a_2{background-color:#0066CC;background-position:-33px 0;width:34px;height:67px;right:-34px;top:15px;}<br />
a.n_a_2:hover{background-color:#db0085}<br />
a.n_a_3{background-color:#00CCCC;background-position:0 -33px;width:67px;height:34px;bottom:-34px;left:15px;}<br />
a.n_a_3:hover{background-color:#db0085}<br />
a.n_a_4{background-color:#00FFCC;background-position:0 0;width:34px;height:67px;left:-34px;top:15px;}<br />
a.n_a_4:hover{background-color:#db0085}<br />

这样子，我们就能很方便的改变背景颜色来获得不同的颜色的三角形了。
但是我们也发现了另一个问题，那就是当我们希望把这个三角形放到有颜色的背景时，构成其负形的区域颜色也会成为我们的限制，因为我们必须将构成负形的颜色与之相匹配。而且第二种方法和第三种方法中只能实现固定尺寸的正三角形，如果我们想随时改变它形状的话，不使用css3的背景大小属性background-size话（此属性已经已经被Opera\firefox\Safari\Chrome\IE 9），可能下面的方法更适合。

第二种方案，我们不是通过图形图片的方式,而是直接使用标签本身的css属性特点或者字符来进行创作.
1)我们可以使用border 属性来实现，border属性包括宽度、颜色、样式。我们可以改变它的颜色来适应。通过下图我能就能分析出,border属性相关特点:

相关代码：

<br />
<!DOCTYPE html><br />
<html><br />
    <head><br />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </p>
<style type="text/css"> 
    <!-- 
        #boder_arrow{border-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;line-height:0; } 
    --> 
    </style>
<p>    </head><br />
<body> </p>
<div id="boder_arrow"> </div>
<p></body><br />
</html><br />

我们可以改变border不同方向的颜色来找到我们需要的颜色，我们甚至可以通过border-width的修改,创造不同角度的三角形.

是不是上面的通过修改border-width后获得的上面的零件很有意思，可以让我们轻易的节省为创造三角型用掉的那个宝贵的 http请求。
巧思无难事，可能有时候你需要的并不是一个等腰的三角型，比如说我们常见到下面这种图形

那个不是等腰三角形的图形，我们也能通过改变边框的宽度来得到：

</p>
<div style="border-color: transparent #FF6699 transparent transparent;border-style: solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;"></div>
<p>

2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.
我们经常需要这样的形式:

那我们对这个图形进行分解

那我们先来实现上面分解的图形：

当我们将旋转后的正方形的背景色色值设置为相交盒形相同的色值时,他们就融为一体了.

3)通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性，兼容性更好一些。

◆◆◆◆

代码如下：

<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
    <meta charset="UTF-8" /><br />
    <meta name="author" content="rage" /><br />
     </p>
<style> 
    <!--
    .wrap_char{width:150px; height:150px; text-align:center; margin:100px; background:#ccc; position:relative;} 
    .a_char,.b_char,.c_char,.d_char{font-size:50px; text-align:center; color:#ccc; position:absolute; z-index:10;line-height:0;line-height:50px;}
    .a_char{left:-4px;bottom:-25px;} 
    .b_char{left:-25px; top:-4px;} 
    .c_char{top:-25px;right:-4px;} 
    .d_char{right:-25px; bottom:-5px;} 
    </style>
<p></head><br />
<body> </p>
<div class="wrap_char">
        <span class="a_char">◆</span><br />
        <span class="b_char">◆</span><br />
        <span class="c_char">◆</span><br />
        <span class="d_char">◆</span>
    </div>
<p></body><br />
</html><br />

案例研究：
1）线形的三角形，如下图：

这种图形的实现我们经常依赖于图形实现，其实我们可以通过border属性，将两个三角型的叠加就可以获得相应的效果：

<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
     </p>
<style type="text/css"> 
    <!-- 
    .pos_rel{position:relative;_line-height:0;} .pos_rel .icon1{display:block;border-width:9px 9px 9px 0;border-color:transparent #1c7ecf transparent transparent; border-style:solid;position:absolute;left:0;top:0;width:0;height:0;} .pos_rel .icon2{display:block;border-width:9px 9px 9px 0;border-color:transparent #fff transparent transparent; border-style:solid;position:absolute;left:4px;top:-9px;width:0;height:0;} --> </style>
<p></head><br />
<body> </p>
<div class="pos_rel"> <span class="icon1"><span class="icon2"></span></span> </div>
<p></body><br />
</html><br />

这样我们就能获得更漂亮的回复窗口：

2）导航状态

我们也可以通过border创造的三角形来实现：

HTML代码：

<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
 </p>
<style type="text/css"> 
	#nav_state{height:20px;} 
	#nav_state a{width:80px;display:block;text-align:center;padding:2px;line-height:18px;;float:left;background-color:#ccc;margin-right:5px;color:#333;position:relative;text-decoration:none;font-size:12px;} 
	#nav_state a span{display:none;} 
	#nav_state a.current,#nav_state a:hover{background-color:#000;color:#fff;} 
	#nav_state a.current span,#nav_state a:hover span{display:block;width:0;height:0;border-width:8px;border-style:solid;border-color:#000 transparent transparent;position:absolute;top:20px;left:32px;overflow:hidden; } 
</style>
<p> </head><br />
 <body> </p>
<div id="nav_state">
 	<a href="#" charset="current">标签一<span></span></a> <a href="#">标签二<span></span></a> <a href="#">标签三<span></span></a> <a href="#">标签四<span></span></a>
  </div>
<p></body><br />
</html><br />

上面我们实现的是固定宽度，那如果是自适应宽度的、箭头朝上的呢？

<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
 </p>
<style type="text/css"> 
#menu_liquid{height:30px;margin:20px; list-style:none;font-size:12px;} #menu_liquid li{height:30px;line-height:30px;float:left;white-space:nowrap;} #menu_liquid li a{display:block;float:left;height:30px;position:relative;padding:0 12px;background:#777;color:#fff; text-decoration:none;border-right:1px solid #ccc;} #menu_liquid li a span{display:none;} #menu_liquid li a.current,#menu_liquid li a:hover{ background:#000;color:#0099FF;} #menu_liquid li a.current span,#menu_liquid li a:hover span{display:block;width:0;height:0;border-style:solid;border-color: transparent transparent #f0f0f0 transparent;border-width:0 8px 8px;position:absolute;bottom:0;left:50%;margin-left:-4px;overflow:hidden;z-index:0;} #menu_liquid li a em{display:block;text-align:center;font-style:normal;cursor:pointer;} 
</style>
<p></head><br />
<body> </p>
<ul id="menu_liquid">
<li><a href="#"><span></span><em>首页</em></a></li>
<li><a href="#"><span></span><em>二级栏目</em></a></li>
<li><a href="#"><span></span><em>三级栏目可能会比较长</em></a></li>
<li><a href="#"><span></span><em>四级栏目</em><span></span></a></li>
</ul>
<p></body><br />
</html><br />

这里我们要注意的是什么呢？那就是箭头是绝对定位的，小心箭头过大的时候，将上面的文字覆盖掉了。

上面的只是一些方法的总结，可能并不是最优的方法，最优的实现方法可能还需要具体问题具体分析，就当在此抛砖引玉了。
同时欢迎大家提出相左的看法。

]]> http://longoes.com/blog/%e5%85%b3%e4%ba%8e%e4%b8%89%e8%a7%92%e5%bd%a2%e7%9a%84%e5%88%b6%e4%bd%9c%e6%96%b9%e6%b3%95.html/feed 0 在HTML代码里面如何判断IE版本 http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e5%9c%a8html%e4%bb%a3%e7%a0%81%e9%87%8c%e9%9d%a2%e5%a6%82%e4%bd%95%e5%88%a4%e6%96%adie%e7%89%88%e6%9c%ac.html http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e5%9c%a8html%e4%bb%a3%e7%a0%81%e9%87%8c%e9%9d%a2%e5%a6%82%e4%bd%95%e5%88%a4%e6%96%adie%e7%89%88%e6%9c%ac.html#comments Thu, 21 Oct 2010 09:14:48 +0000 admin http://longoes.com/?p=482 ， IE 对HTML注释做了一些扩展，使之可以支持条件判断表达式： 当表达式expression 为True 的时候，显示 HTML 内容。 例子： view plaincopy to clipboardprint? 和编程语言类似，这里的表达式还支持大于(gt)、小于(lt)、 与或非 等操作符。 下面是一些例子。 [if IE] 判断是否IE [if IE 7] 判断是否是IE7 [if !IE] 判断是否不是IE [if lt IE 5.5] 判断是否是IE5.5 以下版本。 (<) [if lte IE 6] 判断是否等于IE6 版本或者以下 (<=) [if gt IE 5] 判断是否IE5以上版本 （> ） [if gte IE 7] 判断是否 IE7 版本或者以上 [if !(IE 7)] 判断是否不是IE7 [if (gt IE 5)&(lt IE 7)] 判断是否大于IE5， 小于IE7 [if (IE 6)|(IE 7)] 判断是否IE6 或者 IE7 代码示例： view plaincopy to clipboardprint?

You are not using Internet Explorer.

You are not using Internet Explorer.

注：IE5 以下的版本不支持这种注释扩展。 不过现在也很难找到IE4了 ... :) ]]> http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e5%9c%a8html%e4%bb%a3%e7%a0%81%e9%87%8c%e9%9d%a2%e5%a6%82%e4%bd%95%e5%88%a4%e6%96%adie%e7%89%88%e6%9c%ac.html/feed 0 区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e5%8c%ba%e5%88%86ie8ie7ie6%e5%8f%8a%e5%85%b6%e4%bb%96%e6%b5%8f%e8%a7%88%e5%99%a8-css-%e2%80%9c9%e2%80%b3hack.html http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e5%8c%ba%e5%88%86ie8ie7ie6%e5%8f%8a%e5%85%b6%e4%bb%96%e6%b5%8f%e8%a7%88%e5%99%a8-css-%e2%80%9c9%e2%80%b3hack.html#comments Wed, 20 Oct 2010 11:41:09 +0000 admin http://longoes.com/?p=478 一、前面的唠叨
CSS hack这个东东可以说是老掉牙的东西，我是不会再放到锅里炒的。之所以写这篇文章，更主要的是介绍一个CSS hack – “\9″ hack，总之，在我的印象中，这个hack不常用，是适用范围问题，还是确实大家不了解我就不知道了。我最早见到此hack是在新浪博客的CSS文件中，而且这个”\9″ hack可以说犹如泛滥，水漫金山寺般的使用，见下面的截图（chrome查找结果截图）：

当时并不知道此hack的作用对象，今天偶然又看到此属性，于是简单研究之，发现这是个针对IE浏览器的hack，于是决定写下这篇笔记式的文章，算是一个简单知识点的累积。

二、IE8以及以下版本浏览器
对于IE8及其以下版本的浏览器，就是使用本文标题所提到的”\9″ hack。如下代码：

.ie6_7_8{
color:blue; /*所有浏览器*/
color:red\9; /*IE8以及以下版本浏览器*/
}
说明：使用如上所示，在分号之前属性时候添加”\9″就可以了，为什么添加”\9″可以区分目前的IE浏览器和其他浏览器我是不知道的，这里只能使用”\9″，像是”\8″或是”\ie”都是无效的，这个还是比较有趣的。

三、IE7以及以下版本浏览器
这个知道的人应该很多，也是很基本的，就是使用”*”号了，如下示例代码：

.ie6_7_8{
color:blue; /*所有浏览器*/
color:red\9; /*IE8以及以下版本浏览器*/
*color:green; /*IE7及其以下版本浏览器*/
}

四、IE6浏览器
就本文而言，使用下划线”_”区分IE6浏览器是最好的选择，如下代码：

.ie6_7_8{
color:blue; /*所有浏览器*/
color:red\9; /*IE8以及以下版本浏览器*/
*color:green; /*IE7及其以下版本浏览器*/
_color:purple; /*IE6浏览器*/
}
其他的就不赘述了，您可以狠狠地点击这里：区分IE8/IE7/IE6及其他浏览器demo

此demo在各个浏览器下的表现如下图所示：

五、最后的唠叨
在页面中大量使用hack技术的都是CSS技术泛泛之辈，如果您写一个上千行（横排格式）的CSS文件里面没有一个hack，ok，你技术已经不错了。以我的经验，很少很少的情况是不得已使用hack才能解决的。追求页面样式无hack也是提高CSS技能不错方法之一。

]]> http://longoes.com/blog/%e5%89%8d%e7%ab%af/%e5%8c%ba%e5%88%86ie8ie7ie6%e5%8f%8a%e5%85%b6%e4%bb%96%e6%b5%8f%e8%a7%88%e5%99%a8-css-%e2%80%9c9%e2%80%b3hack.html/feed 0 IE6 下 fixed完美解决方案 http://longoes.com/blog/design/ie6-%e4%b8%8b-fixed%e5%ae%8c%e7%be%8e%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88.html http://longoes.com/blog/design/ie6-%e4%b8%8b-fixed%e5%ae%8c%e7%be%8e%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88.html#comments Mon, 27 Sep 2010 07:05:24 +0000 admin http://longoes.com/?p=473

第一种方法：纯CSS

目前网上有的比较多的是这种解决方案（纯CSS）：
       html{overflow:hidden;}
       body{height:100%;overflow:auto;}
       #rightform form{position:absolute;right:30px;top50px;}
　　这个方法有一个bug未解决：在IE6下会把所有position:absolute都变成“浮动”的元素；还有使用js方法滚动滚动条时会出现对象闪烁，如下方法结合了CSS和js的办法，解决了以上的问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE6 fixed</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body {
_background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
_background-attachment: fixed;             /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}

#topNav {
width: 980px;
z-index: 100;                                                     /*设置浮动层次*/
overflow: visible;
position: fixed;
top: 50px;                                                         /* 其他浏览器下定位，在这里可设置坐标*/
_position: absolute;                                       /*IE6 用absolute模拟fixed*/
_top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/
/* documentElement.scrollTop 设置浮动元素始终在浏览器最顶，可以加一个数值达到排版效果 */
background-color:#0000FF;
height: 31px;
}
.show{
position:absolute;
top:500px;
left:400px;
border:#ff0000 1px solid;
}
</style>
</head>
<body>
<div class="jd_menu" id="topNav">1111</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="show">show</div>
</body>
</html>

　　只实现了垂直方向的fixed。若要实现水平方向的fixed，设置_left:expression(documentElement.scrollLeft + "px");

　　利用给<body>设置固定的背景，防止滚动条滚动时的闪动；如果<body>中要设置滚动的背景而产生冲突，可以把代码写在html选择器里面，如：
   html {
         _background-image: url(about:blank);
         _background-attachment: fixed;         /* prevent screen flash in IE6 */
   }
   body {
        background-image: url(1.jpg);
        background-attachment: scroll;
   }

参考文章：http://www.wxwdesign.cn/article/skills/ie6_position_fixed_debug.htm

第二种方法 JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;}
p{ margin:0px; padding:36px;}
.float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;}
.fixed{ position:absolute; right:60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;}
</style>


<script language="javascript" type="text/javascript">
window.onload=function(){
var n=100; //top值
var obj=document.getElementById("fixed"); //position:fixed对象
window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
}
</script>


<title>position_fixed测试</title>
</head>

<body>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<div class="float2">浮动的内容2</div>
<div class="fixed" id="fixed">我的位置是固定的！拉动滚动条看效果。</div>
</body>
</html>

]]> http://longoes.com/blog/design/ie6-%e4%b8%8b-fixed%e5%ae%8c%e7%be%8e%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88.html/feed 0 WordPress添加Feedburner和Feedsky邮件订阅功能 http://longoes.com/blog/wordpress_feedburner_feedsky.html http://longoes.com/blog/wordpress_feedburner_feedsky.html#comments Tue, 24 Aug 2010 16:09:00 +0000 admin http://longoes.com/?p=467 博客邮件订阅方式要比RSS阅读软件订阅方式更为简单。如何为Wordpress添加邮件订阅功能呢？首先需要在Feedburner或Feedsky开通自己的帐号。
下面以Feedburner为例，先注册自己的Google帐号吧，登陆后添加自己的blog地址，它会自动检测blog的RSS订阅地址。第二步点击Publicize发布选项卡，找到Email Subscriptions功能并激活active，在Subscription Management里面可以看到订阅代码，我们可以用Dreamweaver等网页编辑软件将生成的代码修改成适合自己网站的代码，然后添加到Wordpress的模版中就可以了。
Feedsky的邮件订阅功能的实现方法和Feedburner是一样的，由于Feedsky是中文设置起来更容易些。就两种邮件订阅的功能来说Feedburner更加人性化，不但可以修改订阅确定邮件的标题，还可以修改订阅邮件的内容。就邮件发送速度来说Feedsky发送速度明显快于Feedburner而且可以绑定自己的域名。

博客邮件订阅方式要比RSS阅读软件订阅方式更为简单。如何为Wordpress添加邮件订阅功能呢？首先需要在Feedburner或Feedsky开通自己的帐号。
下面以Feedburner为例，先注册自己的Google帐号吧，登陆后添加自己的blog地址，它会自动检测blog的RSS订阅地址。第二步点击Publicize发布选项卡，找到Email Subscriptions功能并激活active，在Subscription Management里面可以看到订阅代码，我们可以用Dreamweaver等网页编辑软件将生成的代码修改成适合自己网站的代码，然后添加到Wordpress的模版中就可以了。
Feedsky的邮件订阅功能的实现方法和Feedburner是一样的，由于Feedsky是中文设置起来更容易些。就两种邮件订阅的功能来说Feedburner更加人性化，不但可以修改订阅确定邮件的标题，还可以修改订阅邮件的内容。就邮件发送速度来说Feedsky发送速度明显快于Feedburner而且可以绑定自己的域名。

]]> http://longoes.com/blog/wordpress_feedburner_feedsky.html/feed 0 用Microsoft WEFT工具制作EOT字库,让网页字体轻松秀出来 http://longoes.com/blog/design/microsoft-weft_font_family.html http://longoes.com/blog/design/microsoft-weft_font_family.html#comments Thu, 05 Aug 2010 07:17:26 +0000 admin http://longoes.com/?p=457 有不少初学做网页的朋友，会犯这样一个错误――在网页中使用了很多种特殊的精美的字体，当网友们浏览时，却因没有安装相应的字库，只能看到默认的宋体字，效果惨不忍睹。利用图片的方式来显示这些特殊字体，会使网页的体积增大很多，而且还不能方便地复制网页的内容。好在微软公司发布了一款名为Microsoft Web Embedding Font Tool （WEFT）的软件，可以很方便地解决在网页中嵌入特殊字体的这一难题。
Microsoft Web Embedding Font Tool（网页字体嵌入工具，下载地址：http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm）能够将网页中的字体制作成一个EOT格式的压缩字库，这个字库中仅包含了你在网页中使用到的那些文字，因此体积非常小巧。当网友们访问这个页面的时候，浏览器会自动下载该字库，将其中的字体在网页上完美地显示出来。下面就让我把WEFT的应用介绍给大家：
1．安装并运行WEFT，点击工具栏上的”Wizard”进入向导界面，输入你的姓名和电子信箱地址；
2．（如图1），在”Add Web Pages”窗口中，选中要嵌入字体的网页，点”下一步”继续；

图1
3．接下来会弹出一个对话框，大意是说，制作出的网页需要Unicode 和Uniscribe 的支持，所以在Windows 98 和MacOS 上可能会出现显示不正常的情况，询问是否继续。真啰嗦，当然要继续了！
4．WEFT会分析你的网页中使用了那些字体，并将其显示在列表中（如图2），如果你不想将某种字体嵌入网页的话，选中该字体，点击”Don’t embed”即可；

图2
5．然后在”Create Font Objects”窗口（如图3）， “Enter the location where the font objects will be created”一栏中指定生成的字体文件的路径，并且勾选上”Show CSS @ font-family Declarations”,其它的使用默认值就行了；


图3
6．生成EOT字体文件和CSS样式表，（如图4）所示，复制两横线间的代码，粘贴到网页源代码的部分。我们很容易理解代码中”src:


图4
url(*.eot);”指向的就是EOT字库的路径，如果你的网页和EOT字库不在同一目录下，请根据情况修改url的指向；
7．后面的步骤我们可以不必理会，直接点”下一步”，最后”完成”就行了。
现在把你的网页和EOT字库上传到网上，找个朋友帮你测试一下，看看效果吧！怎么样？很有成就感吧！

]]> http://longoes.com/blog/design/microsoft-weft_font_family.html/feed 0 magento 安装教程 http://longoes.com/blog/e-commerce/magento/magento-follow.html http://longoes.com/blog/e-commerce/magento/magento-follow.html#comments Mon, 19 Jul 2010 15:09:04 +0000 admin http://longoes.com/?p=438 容易出现的问题：
window下安装php_curl支持
1.在windows下找到 php.ini .将 extension=php_curl.dll 把前面的注销符号去掉。
2.在php文件下libeay32.dll ssleay32.dll 和在 php/ext/下将php_curl.dll 复制到 %windir%/system32下。
重启php的服务

无法载入 mcrypt 扩展
1、在php.ini配置中，将php_mcrypt.dll前的注销符号去掉。
2、从php5中复制libmcrypt.dll到dlls目录和system32目录下。 [dlls目录不用也可]
重启php的服务

magento 文件权限设置
下面是基本的文件及文件夹设置：
把

* magento/app/etc
* magento/media
* magento/app
* magento/skin
* magento/var
* magento/var/.htaccess
* magento/js
* magento/downloader
这些都设置成可写权限，一般为755比较安全。
另外把
* magento/index.php
* magento/downloader/index.php
这两个文件的属性设置成644.
magento connect无效一般都是没有把magento/downloader/index.php 权限设置成644的缘故引起的。
基本上按照这样设置没多大的问题。

修改你的php5.ini
register_globals = on
allow_url_fopen = on
cgi.fix_pathinfo = 1

如果想知道自己的网站是不是支持magento,可以用 magento-check.php 来检测

]]> http://longoes.com/blog/e-commerce/magento/magento-follow.html/feed 0