CSS菜单：明快清新的格调阐述CSS当前页效果的实现_DIV+CSS实例

。CSS横向菜单的制作大家或许已经都能把握了，但小小的菜单包含了许多的变化，我们完全可以将它做的更漂亮！


　　我们今天所要讲述的依然是CSS横向菜单的制作，这与前面的例子有所区别，我并不仅要看到视觉上的变化，我们还要让它更实用，我们通过这个小案例来向你阐明CSS当前页效果是如何实现的。让我们开始吧！


　　这是HTML代码，除了一个菜单的无序列表UL，还多了一些东西，下面的topline是一个分隔线，我们只是设置一下背景色，我们就不去讨论了；我们发现给body命名了一个id！它的作用就是用来制作当前页效果的，是让选择符精确的找到目标。我们在菜单无序列表内的链接元素都命名了不同的id，从cur1至cur6。我们在下面具体的讨论它究竟如何发挥作用。
　　看CSS代码：


　　第一区块的整体布局声明；第二区块是body的背景色，或许有人会说，白色可以不设置了，不过需要提醒各位，有些浏览器默认的body颜色不一定是白色哦，还是别嫌麻烦设置一下#fff；第三区块设置菜单无序列表ul的宽度及边距。第四区块列表项的有关声明。

　　第五区块就轮到链接元素了。向左浮动，右边距为1px，使菜单之间有一定的间隔，高度26px，行高26px，这两项声明，一方面是设置了菜单的高度，另一方面行距的设置可以让文字垂直居中对齐了，假如缺少了行高，看上去就不那么美妙了。声明填充，上下是0px、左右是8px，上下填充不用设置，因为已经有行高让文字与外边产生了距离，声明左右填充是在水平方向上让文字与外边有一定的距离。

　　去除链接文字下划线，链接文字的颜色为#333深灰色。设置背景图片为link.jpg。此例中背景图片就是一个渐变色的区块，我们不提倡过多的使用CSS滤镜实现这样的效果，对于这样的视觉效果，个人认为用背景图片比较好，一方面是提高了代码执行效率，另一方面图片文件体积小于1K（三个文件累积不大于1K），不会占用带宽。

　　第六区域设置了链接我激活hover样式，文字颜色变成了黑色#000。背景图片也变成了hover.jpg。

　　第七区域是此例的重点了。CSS当前页效果就是通过它来声明的，选择符我们罗列了一大圈，请注重：这六个选择符所对应的元素应用的样式是一致的，因为他们是通过“,”分隔的，这么长的字母或许你看了感觉眼花，我们分解如下：


　　我们应该能理解这些选择符的含意，拿第一个来说：表示在id为home下面的一个id为nav的列表项的a的cur1。这样我们就精确的命中目标了！

　　其它的五个含义与之类似，我们发现，除了第一个（#home）与最末（#cur1），选择符之间的结构是一样的。在上面我们给body命名一个id为home。而且我们为不同的链接赋予了不同的id，从cur1至cur6。

　　这时候它们就发挥作用了。这就表示在body的id为home的这一页，菜单中id为cur1的链接所应用的样式。与此类推：在body的id为divcss的这一页，菜单中id为cur2链接所应用的样式；在body的id为csslayout的这一页，菜单中id为cur3链接所应用的样式……

　　我们只需要改变body的id，再通过CSS的设置，就可以形成了菜单的当前页效果。当然，你也需要在HTML编写之初，就给你的菜单赋予一个id。

　　这在动态页的制作中是非常有用的。例如我们将菜单部分制作成一个独立的*.asp文件或者直接写在数据库中，然后在需要的页面直接include这个文件或读取数据库。要实现当前页的效果，我们只需要改变一个body的id就全部搞定了。这就是当前页效果的思路。

　　最后一个区块我们只是加了一个装饰性的小色条，无须多说，只是需要提醒你的是overflow:hidden;的设置，假如没有这一条声明，我们的小色条可能不是这样的最小高度。