您的位置：首页 > Web前端 > CSS

css实现导航栏的制作

2009-12-02 15:03 405 查看
平时我们在浏览网页的时候，常常看见导航栏是动态的，其实我们可以通过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>


是不是很简单！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航