妙味课堂（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轴 出现滚动条（卷轴）。

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

1. 网页中的图片应该怎样设置？

在运用 XHTML+CSS 制作页面的时候，网页上的图片可以通过二种方式在页面中呈现：

一. 使用图片标签，直接写在 XHTML 文档内：<img src=”1.jpg” />
二. 运用 CSS 将图片做为某个元素的背景，比如设置 div 元素：div { background: url(1.jpg); }

这二种方式不能混淆，因为它们有本质上的区别，如果设置错误，有可能会 影响页面的可用性！

它们的本质区别以及设置原则：

——凡是属于网页内容的图片，都用图片标签 <img /> 直接写入 XHTML 文档中；

——凡是不属于网页内容的图片，一律采用 CSS 进行背景图片设置，它们起到网站装饰、美化的作用，属于网站表现；

我们只要能分清什么图片是网页内容就行了，因为除了网页内容图片，其他的图片一律用 CSS 设置成元素的背景。

分析下面这张图，来找找哪些是网页内容图片：

上图中，标注为 “<img />” 的是页面内容，可以直接写成 XHTML 代码，

其他标注为 “background-image” 的都应该做为背景，设置成元素的 CSS 样式。

2. 如何设置背景？

设置 div 元素背景的很简单：div { background: red; }

设置一个 既有背景颜色，又有背景图片 的 div 才是我们关注的，效果图如下所示：

分析这个效果图，我们可以得知如下信息：

在制作的时候，我们可以先把渐变部分切成 1 像素宽、68 像素高的图片：

把中间这根细小的图片保存为“bg.gif”，设置 div 样式如下：

div {
width: 100px; height: 100px; border: 1px solid #626262;
background: url(bg.gif);
}

得到下面的结果：

再把图片设置成水平方向平铺：

div {
width: 100px; height: 100px; border: 1px solid #626262;
background: url(bg.gif) repeat-x;
}

则背景图片只可能沿水平方向平铺，不会再折行平铺了：

最后，添加上背景颜色值：
div {
width: 100px; height: 100px; border: 1px solid #626262;
background: #f5f5f5 url(bg.gif) repeat-x;
}

div 背景制作完成：

3. 页面上的小图标如何处理？

效果图如下所示：

根据上面的分析，我们可以知道这个效果图的三张小图片，都是做为元素的背景来设置。

首先用 PS 切一张小图片，在切图的时候，注意尽量切成背景透明的 GIF 图片，不要把背景颜色也切下来，万一背景颜色发生变化，切下来的这张图片仍然可以使用：

然后开始写结构：

<ul>
<li><a href="#">页面</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">外观</a></li>
</ul>

写样式：

ul { padding-left: 0; margin-left: 0; width: 120px; border: 1px solid #e3e3e3; border-bottom: 0; }
li { list-style: none; }
a { display: block; height: 27px; line-height: 27px; border-top: 1px solid #fff; border-bottom: 1px solid #e3e3e3; background: #f1f1f1; padding-left: 26px; text-decoration: none; color: #21759b; font-size: 12px; }
a:hover { color: #d54e21; text-decoration: underline; }

效果如下：

开始添加小图片。要实现三个 li 内图片都不一样，需要在 a 标签内添加三个不同的样式名：

<ul>
<li><a class="ico1" href="#">页面</a></li>
<li><a class="ico2" href="#">评论</a></li>
<li><a class="ico3" href="#">外观</a></li>
</ul>

准备好要设置的图片：

注意：把3个小图片切成一张 GIF 图，然后利用背景图片的定位来制作。

完整的 CSS 代码：

ul { width: 120px; border: 1px solid #e3e3e3; border-bottom: 0; padding-left: 0; margin-left: 0; }
li { list-style: none; }
a { display: block; height: 27px; line-height: 27px; border-top: 1px solid #fff; border-bottom: 1px solid #e3e3e3; padding-left: 26px; text-decoration: none; color: #21759b; font-size: 12px; }
a:hover { color: #d54e21; text-decoration: underline; }
.ico1 { background: #f1f1f1 url(ico.gif) no-repeat 5px 6px; }
.ico2 { background: #f1f1f1 url(ico.gif) no-repeat 5px -24px; }
.ico3 { background: #f1f1f1 url(ico.gif) no-repeat 5px -52px; }

这一句：“background: #f1f1f1 url(ico.gif) no-repeat 5px 6px;”
中文解释：背景：背景颜色 图片链接地址 图片不重复 图片水平方向 图片垂直方向；

最终效果如下：

效果下载：>>点此下载