css实现导航栏的制作

       平时我们在浏览网页的时候，常常看见导航栏是动态的，其实我们可以通过css样式表的定义就可以完成。

 

---

 

首先我们看一下css代码：

 

#nav { width:900px; margin:0 auto; background:#E1F4FD; } #nav li { float:left; font-size:14px; } #nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:148px; height:30px; text-align:center; background-color:#39F; margin-left:2px; } #nav li a:hover { background-color:blue; color:#ffffff; }

 

 

下面就是在网页中引用：

 

<div align="center"> <ul id="nav"> <li><a href="#" mce_href="#" target="_parent">首 页</a></li> <li><a href="#" mce_href="#" target="_self">关于我们</a></li> <li><a href="#" mce_href="#" target="_parent">硬件维护</a></li> <li><a href="#" mce_href="#" target="_parent">软件中心</a></li> <li><a href="#" mce_href="#" target="_parent">资源下载</a></li> <li><a href="#" mce_href="#" target="_self">在线交流</a></li> </ul> </div>

 

 

   是不是很简单！