CSS研究心得

第六章 链接与导航

a:link是超链接的普通样式，即正常浏览状态的样式。

a:visited是被点击过的超链接的样式。

a:hover是鼠标指针经过超链接上时的样式。

a:active是在超链接上单击时，即“当前激活”时，超链接的样式。

当项目列表的list-style-type属性值为“none”时，制作各式各样的菜单和导航条便成了项目列表的最大用处之一。

导航条不只是竖直排列，很多时候需要页面的菜单能够在水平方向显示，这时我们就需要创建一个横竖自由转换菜单。

第七章 竖直排列的导航菜单

竖直排列的导航菜单里主要列举了双竖线菜单、双斜角横线菜单、立体菜单、箭头菜单和带说明信息的菜单这五种菜单。

以下有几个CSS基础知识和技巧：

（1）相邻盒子的margin在竖直方向相遇时的“塌陷”现象，水平方向则没有该现象。

（2）在一系列盒子排列后，如何对头尾盒子进行单独的样式设置，可以为它们单独设置类别，或者是伪类，但需要注意浏览器对伪类的支持情况。

（3）通过粗边框的颜色设置可以产生出斜角效果，如果充分利用可以产生有趣的效果。

（4）为了防止鼠标指针经过时造成边框的跳动，可以在通常状态添加与背景色相同的边框。

（5）相对定位的含义是以自身原来所在位置为基准进行偏移。

（6）“包含块”的定义方法，绝对定位是以包含块为基准进行偏移的。

（7）为了使某个盒子绝对定位，它的上一级元素可以设为相对定位，从而变成“包含块”。

第八章 水平导航菜单

在水平导航菜单里我们主要讲了自适应的水平菜单、自适应的斜角水平菜单、应用滑动门技术的玻璃效果菜单、三状态玻璃效果菜单、不使用图像的圆角菜单、会跳起的多彩菜单这六种水平导航菜单。

注意：想要实现这六个水平方向的菜单，我们需要掌握以下几个基本要点：

（1）设置浮动方式，以及是否适应宽度的设置方法。

（2）不使用图像，实现斜角和圆角的方法。

（3）使用背景图片的滑动门技术。

（4）理解本章案例中“钩子”和“垫子”的用途。

第九章 下拉菜单

dl被称为“定义列表”，在使用方法上相当于ul；dt和dd分别定义为“定义标题”和“定义描述”，它们在使用方法上相当于li。

我们通常使用的列表是ul和ol,ul就是无序列表Unordered list和Ordered List也就是有序列表。如果使用有序列表，每个列表项的前面有个数字编号；如果使用无序列表，每个列表项的前面会有个圆点。这两个列表都是我们经常使用的。

第十章 表格也精彩

1、<table>用于定义整个表格，<tr>定义一行，<td>定义一个单元格。

2、<caption>标记，它的作用和它的名称一样，就是用于定义表格的大标题，该标记可以出现在<table>于</table>之间的任意位置，不过通常习惯放在表格的第一行。

3、<th>标记，它是“table header”的缩写，即表头的意思，在表格中主要用于行或者列的名称。

4、比较有名的例子有Excel方式二维变色提示的表格和三种显示模式的日历，其中三种显示模式的日历包括小模式、中模式和大模式。

5、要实现大模式的日历，最困难的一点是，在原本的HTML中，表格是一个二维结构，而在大模式中，希望它成为一线的线性结构，所有单元格从上到下依次排列。

6、想要制作大模式日历，我们可以通过display属性改变盒子的类型。

附：现在我们来讲一下总结的经验。

当一个效果在Firefox和IE6中显得不一样时，一般来说Firefox显示的是“正确”的效果。这里说正确，并不是指主观希望的效果达到了就是正确效果，而是说按照真正的CSS规则，应该显示的效果才叫作正确的效果。也就是说，如果Firefox中显示的效果和希望的效果吻合，而与IE显示不吻合，那么是IE有错误的可能性更大；而反之则说明很可能是为了迁就IE6的错误，而写了错误的代码。不以IE浏览器为标准是因为CSS的规则本身是严格符合逻辑的，是可以计算和预测的，而在IE中的很多错误是没有道理的、无法预测的，只是用一个小的错误修正了另一个小的错误，在局部看起来可能效果是正确的，但是很可能在其他地方，或者更大范围内带来不可预知的麻烦，从而严重影响效率。因此，比较好的做法是以Firefox作为正确的效果，想办法让IE来适应它。

测试的时候，不要在一个浏览器中完全做好后，再用另一个浏览器测试。对于一个很复杂的页面，如果先在Firefox中制作并完全测试好了，然后用IE查看时，可能很多地方都是混乱的，此时再针对IE进行一系列调整，等调整好了，回到Firefox查看时，肯定又乱了。如此往复，结果可想而知。因此，应从空白页面开始，每做一小步，就同时在各种浏览器中查看，一旦发现显示效果不同，就立即查找原因，寻找解决办法。这样做到最后就可以同时满足各种浏览器了。