简单明了的CSS导航条


简单明了的CSS导航条，适合风格比较简洁的网页，导航条尽量不要搞太复杂，最重要的功能是导航，华而不实的东西有时候会令人反感不是吗?本导航条纯CSS实现，而且兼容性也不错，学习CSS的朋友可以继续完善它。

答案：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS导航条</title>
<style type="text/css">
<!--
#navcontainer
{
margin: 0;
padding: 0;
font: 12px Verdana, sans-serif;
width: 100%;
border-bottom: 1px solid #bbb;
list-style-type: none;
}

#navlist li
{
float: left;
width: auto;
display: block;
}

#navlist li a, #navlist li a:link
{
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block;
}

#navlist li a:hover
{
color: #039;
border-bottom: 3px solid #bbb;
cursor: pointer;
background: #eee;
}

#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #999;
}

#navlist li a#current:hover
{
border-bottom: 3px solid #f90;
background: #eee;
}

-->
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><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>
</ul>
</div>
</body>
</html>

上一个：类似按钮组成的水平导航条
下一个：CSS二级菜单，圆角兼容性好

更多图片编程知识: