简洁的CSS菜单：学习CSS

一直对CSS + DIV 布局很感兴趣，特别是面对蛋疼的IE6时，我们总是想方设法的照顾它，平时对这个学习很少，在这做个笔记。

使用美工设计好的图片也可以制作出一个好看的导航菜单，可是通过巧妙的CSS照样可以。

这里是我仿照 jQuery 网站制作的一个导航，效果图：





制作步骤：

1.编写html。





2.编写CSS。

我打算使用两张图片，第一章填充导航的左边，这张一定要长，保证随着 #header_nav 中的 <li> 增多时，也能够完全使用图片包住。

使用第二张图片填充导航的最右边，两张图片都有圆角，让导航显得更加流畅。









注意图片的圆角是黑色的。图片的蓝色可以跟黑色搭配，让导航显示更加明显。

首先设置 #header_nav 的background 为第一张图片，设置 <ul> 的 background 为第二张。





通过设置 <li> 两边的 border 隔离。





3.设置第一个<li>和最后一个<li>的边。





当然这个通过 CSS 设置，但是为了 CSS 的简洁性，只好用了 JS。

最后把源码附上。

下载