预览效果1>>  —— 重复不停滚动，可更改左右滚动方向

预览效果2>> —— 每滚动一张图片的距离，暂停3秒后，再继续滚动

点击下载>>

妙味课堂（www.miaov.com）——带你享受极富人情味的IT培训体验

上面的例子用到了三种字体，从左到右分别是：微软雅黑、Arial 和 楷体。

其实它的设置方式很简单，代码如下：

微软雅黑：<span style=”font-family: Microsoft YaHei“>微软雅黑</span>

Arial：<span style=”font-family: arial“>英文一般采用 arial 字体</span>

楷体：<span style=”font-family: 楷体_gb2312“>楷体_gb2312 普通字体</span>

但是今天下午和王宁同学讨论CSS问题的时候，意外的发现了另一种清除浮动的可能：

父级是 绝对定位，或者是 固定定位。

测试代码：
<style>
#box { width: 300px; padding: 10px; border: 1px solid #ccc;  }
#left { width: 100px; height: 100px; border: 1px solid #ccc; float: left; }
#right { width: 180px; height: 200px; border: 1px solid #ccc; float: right; }
</style>

<div id=”box”>
<div id=”left”>左侧浮动层</div>
<div id=”right”>右侧浮动层</div>
</div>

效果：

给父级 #box 加上固定定位、或是绝对定位：
position: absolute; /* position: fixed; */

效果：

最终css：

<style>
#box { width: 300px; padding: 10px; border: 1px solid #ccc; position: absolute; /* position: fixed; */ }
#left { width: 100px; height: 100px; border: 1px solid #ccc; float: left; }
#right { width: 180px; height: 200px; border: 1px solid #ccc; float: right; }
</style>

注：在 ie6、ie7、ie8、Firefox/3.5.7、Safari/4.0.4、Opera/9.50 下测试通过。

在很多时候，用 js 来调用某个层出现，无论是弹出层，亦或是鼠标移入出现层，父级都有可能是绝对定位，相比较另外三种清除浮动的优劣，这种方式近乎于无缺陷。

此外，absolute 和 fixed 这二种定位形式也可以让 内嵌元素 转换成 块级 元素，

测试代码：

<span style=”border: 1px solid red; width: 100px; height: 200px; position: absolute;”>span</span>

或是：

<span style=”border: 1px solid red; width: 100px; height: 200px; position: fixed;”>span</span>

感谢王宁同学，如果没有和你一起讨论，还发现不了这个秘密(^_^)

当鼠标滑动时，当前<li>的内容展开更多信息。

要实现这个效果，关键不是JS，而是CSS，需要在<li>标签内，用二个 class 分别控制列表的正常的显示效果[".normal"]以及展开的显示效果[".active"]，把样式写好以后，再用JS来实现：

当鼠标移入时，所有的<li>标签类名为 .normal，只有当前的<li>标签类名为 .active

>>效果展示

>>下载代码

我最近用 JS 写特效比较多，所以看到这个问题，我第一感觉就是用 JS 方式实现，思路是：

先给翻页代码的父级元素一个居中样式：margin: 0 auto;

然后使用 JS 去动态获取翻页代码内所有元素的宽度，再把这个宽给父级，实现居中。

用这个思路实现了以后，感觉有点不妥，应该有更简单的解决方法才对，后来跟一位在酷6上班的朋友说起这个效果，

她说用CSS实现很简单呀，不需要用JS的，她的代码如下：

XHTML部分：

<div id=”page”>
 <a href=”#”>上一页</a>
 <a href=”#”>1</a>
 <a href=”#”>2</a>  
 <a href=”#”>3</a>
 <a href=”#”>下一页</a>
</div>

CSS部分：

#page{ text-align:center; height:30px; line-height:30px; }
a { padding: 3px 5px; font-family: Arial; font-size: 14px; color: #333; background: #eee; border: 1px solid #ccc; margin-right: 2px; text-decoration: none; }
a:hover { background: red; color: #fff; border: 1px solid #000;}

事后，她笑我：你是对着 JS 代码太久了吧？简单的问题你都用复杂的思路去解决？？

很惭愧，也很受用……向这位朋友学习～··写下此篇，以提醒自己今后解决问题的思路一定要化繁为简。

>>点击这里查看效果

原理：在父级设置1px高的背景图片，并设计 y 轴方向平铺：repeat-y，用图片的方式代替背景色，在视觉上达到等高的效果。

另外，网上有一种设置填充与边距最大值的实现方式（padding-bottom: 999999px; margin-bottom: -999999px;），似乎只能兼容 IE8、Firefox，
>>点此下载

1. 尽可能用 ID 选择器
var $but = $(“#content .button”);

2. 就近选择多个元素
var $p = $(“#content p”);

3. 用一个标签名来限制 class (并且不要忘记加上就近的ID)，尽可能不要使用 $(“.box”)，可以是

$(“div.box”)、$(“#head .box”)、$(“#head ul.box”)
比如选择 class 名为 .on 的元素：
<ul id=”list”>
<li><p>JQuery</p></li>
</ul>
var $p_on = $(“#list p.on”);

4. 将 JQuery 对象缓存起来
var $but = $(“#content .button”);
$but.click(function() { alert(1); });

5. 掌握强大的链式操作
var $box = $(“#box”);
$box.click(function() {
 $(this).css(“border”, “3px dashed yellow”).fadeIn(“slow”);
});

6. 像这样绑定事件是低效的:
$(“#entryform input”).bind(“focus”, function(){
 $(this).addClass(“selected”);
}).bind(“blur”, function(){
 $(this).removeClass(“selected”);
});

我们需要在父级监听获取焦点和失去焦点的事件:
$(“#entryform”).bind(“focus”, function(e){
 var $cell = $(e.target); // e.target 触发事件的节点
 $cell.addClass(“selected”);
}).bind(“blur”, function(e){
 var $cell = $(e.target);
 $cell.removeClass(“selected”);
});

未完待续……

好了，下面是 css hack 代码：

div {
 width: 100px; height: 100px;
 background: red;        /* 所有浏览器都识别 */
 background: blue\9;    /* IE6、IE7、IE8 识别 */
 +background: yellow;  /* IE6、IE7 识别 */
 _background: green;   /* 仅 IE6 识别 */
}

注意：这个顺序是利用CSS优先级的顺序排列，不可颠倒。

这个 div 在各个浏览器下的呈现效果：

页面错位不等于浏览器BUG，BUG是指设置了正确的CSS，浏览器却不以预期的样式呈现。

比如设置了某个元素：margin-left: 10px; 但是在浏览器中，

这个 DIV 元素实际呈现的却是：margin-left: 20px;

——在这种情况下才有可能是浏览器 BUG。

1.上下 margin 叠加问题——这个问题不属于浏览器的BUG，但却容易让学习CSS的朋友误解：

现在有二个元素： div1 和 div2，div1 的下面有 10px 的外边距，div2 的上面有 10px 的外边距，

样式如下：
#div1 { width: 100px; height: 100px; background: #eee; margin-bottom:10px; }
#div2 { width: 100px; height: 100px; background: #eee; margin-top:10px; }

结构如下：
<div id=”div1″>div1</div>
<div id=”div2″>div2</div>

我们原本期望这二个 div 之间距离是 20px，然而效果却是这样：

也就是说：这二个 div 之间，有 10px 的空间被叠加在一起。
假如把 div1 的 margin-bottom 增加到 15px，那么它们之间的距离就成了 15px，
仍然有 10px 的空间被叠加起来。

*解决方法：给这二个 div 多加二个样式：float: left; clear: left;

最终样式：
#div1 { width: 100px; height: 100px; background: #eee; margin-bottom: 10px; float: left; clear: left; }
#div2 { width: 100px; height: 100px; background: #eee; margin-top: 10px; float: left; clear: left; }

最终效果图：

2. IE6 浮动 margin 双边距 bug

设置一个父级元素 box 和一个子级元素 childbox，

子级元素设置左浮动，并且还设置左边距 10px ：

样式如下：

#box { width: 200px; height: 150px; border: 1px solid #ccc; }
#childbox { width: 100px; height: 100px; background: red;

float: left; margin-left: 10px; }

结构如下：

<div id=”box”>

<div id=”childbox”>childbox</div>

</div>

这样设置以后，在 Firefox、ie7、ie8 下都正常显示，可是在 ie6 下，显示成这样：

我们明明只给了左边距为 10px！！——如果把 10px 改成 20px 的话，ie6 下就会变成 40px！！由此可见，在这种情况下，ie6 对 margin-left 的解释就是在原来的值上多加了一倍！！

*解决方法：给子级元素 childbox 添加一行样式：display: inline;

最终样式：

#box { width: 200px; height: 150px; border: 1px solid #ccc; }
#childbox { width: 100px; height: 100px; background: red; float: left; margin-left: 10px; display: inline; }

最终效果图：

3. li 下 的 bug

当 li 里包含了任何设置浮动的元素以后，此 bug 就会在 ie6、ie7 下出现：

样式如下：

ul,p { padding: 0; margin: 0; }
li { list-style: none; }
/* 清除浏览器默认样式 */

ul { width: 110px; }
li { width: 100px; height: 20px; border: 1px solid #333; }
p { width: 100px; height: 20px; float: left; }

结构如下：

<ul>
<li><p>p</p></li>
<li><p>p</p></li>
</ul>

在 ie6、ie7 里莫明奇妙多出来了几个象素：

注意：我并没有给 li 设置 margin-bottom 的样式。

*解决方法：给 li 多添加一行样式：float: left; 并且要保证 li 拥有足够的宽，别让第二行的 li 真的浮动上来！

最终样式：

ul,p { padding: 0; margin: 0; }
li { list-style: none; }
/* 清除浏览器默认样式 */

ul { width: 110px; }
li { width: 100px; height: 20px; border: 1px solid #333; float: left; }
p { width: 100px; height: 20px; float: left; }

4. ie6 绝对定位下的 1 象素 bug

绝对定位真是个好样式，在众多样式之中它最可爱^_^，你希望它跑到哪去，它就跑到哪里，可惜，这样的乖孩子，也禁不住 ie6 的折磨！！

我们先把父级元素的宽设置成任何奇数，例如：350px，让子级元素浮动到父级右侧：

样式如下：

#box { width: 155px; height: 121px; position: relative; background: red; }
#childbox { width: 100px; height: 100px; position: absolute; top: 0; right: 0; background: yellow; }

结构如下：

<div id=”box”>
<div id=”childbox”></div>
</div>

结果，讨厌的 1px 出现了：

注意看右侧，那虽然细微、但仍然很刺眼的 1px bug！！！

如果把位置调到右下角，结果下面和右边都出现了这 1px 的 bug！！

这个细小的 bug 虽然不起眼，但如果我们用 绝对定位 来处理 圆角效果 的话，那就让人郁闷了～···

*解决方法：最好把父级的宽设置成偶数！否则，就只能用 css hack 代码了！

1.设置：>>更多 而不是 >>更多
——相信大家注意到 更多 前面的符号了，我曾见过一段因为设置不好这个符号而直接用 图片 来代替的代码，其实它们仅仅只是字体不一样。
>>更多 这个 css 的字体是：font-family: ‘宋体’;
>>更多 这个 css 的字体是：font-family: Arial;

2. 设置自适应宽的虚线，效果图如下：

在这个效果里，左侧文字的宽度不确定，虚线要自适应文字个数的变化。
制作这个效果的思路是：使用 ul、li 结构，把图片切成 width: 4px; height: 1px; 的小点，将图片设置成 li 标签的背景，进行 x 轴方向平铺，再把包含文字标签（比如 span）的背景设为白色（与背景色同一颜色），加上内填充（padding: 0 10px;）即可。

>>查看效果

>>下载代码

3. 设置DIV内的下拉条，效果图如下：

布局方面不多说了，都在下面的源文件里。现在就来看看中间的下拉条如何设置：

要让某个 块级元素 内出现下拉条效果，先要给它固定的高、宽，也就是要限定它的范围，接着加上 CSS 样式：overflow: auto;
这句意思是：当元素内容有超出的部分，就自动显示，下拉条也就出现了。

现在，要让下拉条出现在右侧，而不要让它在底端也出现，还需要做一些设置：

让子级元素的 宽 小于父级的宽，比如父级元素的宽是 100px，减去下拉条的宽（IE8下拉条的宽是 14px），那子级元素的宽度为：82px; ——等等，为什么不是 86px ？？

原因：IE6、IE7 与 IE8、火狐 对于 下拉条的宽度 的显示尺寸是不一样的，IE6、IE7下拉条的宽度要略大于 IE8、火狐的宽，所以在设置子级宽度的时候，最好少设置几个像素，以免出现下面这种情况：

另外，还有一种情况，当效果图是这样的时候：

子级的高并没有超出父级的高，也希望下拉条显示出来，样式设置如下：overflow-y: scroll;

意思是：让元素的 Y轴 出现滚动条（卷轴）。

最终效果如下所示，鼠标可以点击查看，也可以 >>下载源文件：