1 css实现基本的横向导航条
html结构
<body>
<div id="top">
<!-- 无序列表 包含4个列表项 -->
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">联系</a>
</li>
<li>
<a href="#">关于</a>
</li>
</ul>
</div>
</body>
css设置
<style type="text/css">
#top{
width: 1000px;
margin: 0px auto; /*div top 居网页中部*/
}
ul{
list-style: none; /*清除原有的列表样式*/
}
ul li{
float: left; /*所有的列表项左浮动*/
}
/*a标签默认是内联元素,设置宽度和高度无效*/
ul li a{
width: 200px; /*宽度200*/
height: 35px; /*高度35*/
line-height: 35px; /*行高35 当行高==高度 内容垂直居中*/
display: inline-block;/*改变a为块级元素,宽高生效*/
background-color: #6495ED;
text-align: center; /*内容水平居中*/
color: white;
font-weight: bold;
font-size: 18px;
text-decoration: none;
}
/*当鼠标在a标签上悬停时,改变a标签背景颜色*/
ul li a:hover{
background-color: #CC0000; /*鼠标悬浮改变背景色*/
}
</style>
2 css实现间隔的横向导航条
css设置:跟上一个案例的区别就是增加一个左距离
<style type="text/css">
#top{
width: 1000px;
margin: 0px auto; /*div top 居网页中部*/
}
ul{
list-style: none; /*清除原有的列表样式*/
}
ul li{
float: left; /*所有的列表项左浮动*/
}
/*a标签默认是内联元素,设置宽度和高度无