总体使用列表和超链接,横向导航栏主要使用float:left
1.html
<body>
<!--大框架-->
<div class="box">
<div class="nav1">
<!--横向导航栏-->
<ul>
<li><a href="#"> 项目1 </a></li>
<li><a href="#"> 项目2 </a></li>
<li><a href="#"> 项目3 </a></li>
<li><a href="#"> 项目4 </a></li>
<li><a href="#"> 项目5 </a></li>
</ul>
</div>
<div>
</body>
2.css代码
ul{
list-style-type: none; /*清除无序列表前的小点*/
width: auto;
height: 50px;
background: #3b3753;
margin: 0px;
padding-left: 20%;/*左边距,使li看起来在中间*/
/*position: relative;*/
text-align: center;
}
li{
float: left;
width: 130px;
height: 100%;
padding: 0px;
margin-right: 1%; /*两个li之间的距离*/
}
a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
display: block;
color: #FFFFFF;
background-color: #3b3753;
text-align: center;
line-height: 30px; /*li行高*/
padding: 10px;
text-decoration: none; /*去下划线*/
}
a:hover{ /*鼠标移动到点击位时的样式,active指点击过后的样式*/
background-color: #111;
}
3.效果
如有问题,欢迎指出。