DIV+CSS导航条
发布网友
发布时间：2022-04-30 20:13
共1个回答
热心网友
时间：2022-04-20 13:17
导航条的制作可以采用一个列表，并对之中的列表项浮动定位，再加上细节上的样式设计，一个导航就完成了，下面根据不同的导航实例分析一下。
横向导航
BADY部分
<body>
<!—以列表作为导航条，列表项作为导航频道，很好的利用了列表标签-->
<ul id="nav">
<li><a href="#" id="current">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">参考</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">联系</a></li>
</ul>
</body>
CSS部分
<style type="text/css" >
<!--
#nav {
height:26px;
border-bottom:2px solid #2788da;
}
#nav li {
/*针对列表项，去除列表前面的样式，并使之浮动定位，形成横向导航条*/
float:left;
list-style-type:none;
}
#nav li a {
/*将导航文字作为块级元素，使之可以像一个方块按钮一样去运作，对之进行样式设计*/
color:#000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#eee;
margin-left:2px;
}
#nav li a#current { /*此样式是想模仿一种文件夹样式，当前文档所在频道会显示为与其他频道不同的样式*/
background-color:#2788da;
color:#fff;
}
#nav li a:hover{ /*设置鼠标悬在按钮上的样式，注意，a:hover只有在a标签中有href属性中的才有效*/
background-color:#bbb;
color:#fff;
}
-->
</style>
