简洁的CSS菜单:学习CSS

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

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

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

image

 

制作步骤:

1.编写html。

image

 

2.编写CSS。

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

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

 bg_nav_left

 bg_nav_right

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

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

image

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

image

 

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

image

 

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

最后把源码附上。

下载

posted @ 2010-12-04 00:40  XueM  Views(...)  Comments(... Edit 收藏