导航条
CSS文件
body,div,ul,li{padding:0; margin:0;}
#nav{
width:800px;
height:35px;
background:#CCC;
margin:0 auto;/*上下为:0;左右自动匹配浏览器*/
margin-top:30px;
}
#nav ul{
width:800px;
height:35px;
}
#nav ul li{ float:left;}/*这个是消除快元素的霸性*/
#nav ul li{
width:100px;
float:left;
list-style:none;/*专门针对火狐浏览器自带默认样式表的<li>标签*/
line-height:35px;/*这个要去看一本书是关于文字垂直对齐的*/
text-align:center;
padding:0 15px;/*上下为：15px；左右为：0*/
}
a{font-size:10px;}
#nav ul li a{display:block; height:35px; color:#333;
text-decoration:none; float:left; padding:0 10px;}
#nav ul li a:hover{color:#fff; text-decoration:underline;
background:#000;}
HTML中
<head>
<link type="text/css" rel="stylesheet" href="1.css"/>
</head/>
<body>
<div id="nav">
<ul>
<li><a href="#">CSS 学习</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>
</div>
</body>
