怎样使用css布局导航栏
使用css布局横向导航栏，css应用给网页样式的方式，就相当于给人怎么去穿上衣服，不同的衣服有不同的穿法，这里我们使用的是内联式。
1、首先创建一个ul标签，并添加若干li标签，在li标签内写上a标签进行页面链接；
2、然后设置ul的list-style为none将项目列表前原点去除；
3、最后设置li标签float为left排列在一行显示即可。
<!DOCTYPE html>
<html>
<head>
<title>如何使用css布局横向导航栏</title>
<style type="text/css">
body {
margin:0px;padding:0px;
}
ul {
list-style:none;/*去除项列表前面的圆点*/
}
ul li {
float:left;/**使列表项不再遵循默认的自上而下样式,使之变成横向列表*/
}
/**这时候的列表虽然是横着的，却是一个整的像一块大饼，
所以我们要想到块状思想。使用display:block，将其分割*/
ul li a {
display: block; /*切割完毕,变成块状，
这下我们就可以实现内外边距，边框背景等属性*/
width: 120px; /*宽度设置*/
padding-top: 10px; /*上内边距，通俗点讲就是导航栏离顶部的距离*/
padding-left: 10px; /*同上*/
padding-right: 10px; /*同上*/
text-align: center; /*文本居中显示*/
font-size: 20px; /*设置字体的大小*/
color: red; /*设置字体的颜色*/
text-decoration: none; /*下划线设置*/
}
/*锚伪类还有link visited hover active分别为未访问，已访问，
鼠标移动链接上，选定的连接，这里我只写了移动到连接的例子*/
ul li a:hover{
color:blue; /*伪类：指向链接时的字体颜色*/
background-color:#8DC7DD; /*伪类：指向链接时的背景色*/
text-decoration:underline; /*伪类：指向链接时的字体装饰*/
font-weight:bold; /*伪类：指向连接时的字体粗细*/
}
</style>
</head>
<body>
<div id="nav">
<ul>
<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>
<li><a href="#">优化</a></li>
</ul>
</div>
</body>
</html>效果：
推荐学习：CSS视频教程（公益免费）
以上就是怎样使用css布局导航栏的详细内容，更多请关注0133技术站其它相关文章！
