用无序列表编写的简单一级导航条
<!-- 声明部分 -->
<!doctype html>
<html>
<head><!-- 头部 -->
<meta charset="utf-8">
<title>列表应用</title><!-- 标题 -->
<style type="text/css">
*{
margin:0px;
padding:0px;
}**//清除默认样式**
.nav{
list-style-type:none;<!--去掉类表项目符号-->
background-color:#6FF;<!--给导航条设置背景颜色-->
width:500px;<!--给导航条设置宽度-->
overflow:hidden;<!--解决高度塌陷-->
margin:100px auto;<!--设置导航条水平居中-->
}
.nav li{
float:left;<!--向左浮动-->
}
.nav li a{
display:block;<!--将内联元素转换成块级元素-->
width:100px;<!--设置宽度-->
text-align:center;<!--让文本居中-->
text-decoration:none;<!--去除下划线-->
}
.nav li a:hover{
background-color:#C00;<!--鼠标移入时变成红色-->
}
</style>
</head>
<body>
<ul class="nav">
<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><!-- 主体 -->
</html>
效果如下图