前言：
当我们在浏览网页时，常常能发现各种导航条，这些小小的导航条可以很大的方便我们更好的获取我们想得到的信息，就拿百度中的一个导航条做例子，简单做一个仿照版的吧~
用无序列表的方法来设计一个导航条：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.nav{
list-style: none;/*这里用到的是无序列表，不设置样式时默认为无序列表的样式*/
width: 440px;
height: 60px;
background-color:white;
padding-left: 15px;
}
//后代选择器
.nav li{
float: left;
line-height: 23px;
}/*对列表元素的设置*/
.nav a{
display: block;
/*
不用display：block;定义，那么定义width、height等和长宽相关的css属性时不会生效。使用display:block之后，
a链接对象将能够像div和其它元素一样成为一个块状对象（block），就可以使用css外边距、内边距等属性给a链接标签加上一系列的样式了。
*/
font: Arial;
font-size: 13px;
text-decoration: none;
text-align: center;
padding: 0 10px;
color: #000000;
}/*对a中元素的设置*/
.nav a:hover{
color: blue;
}/*设置鼠标悬停时的样式*/
</style>
</head>
<body>
<ul class="nav">
<li><a href="http://news.baidu.com/">新闻</a></li>
<li><a href="https://www.hao123.com/?src=from_pc">hao123</a></li>
<li><a href="http://map.baidu.com/">地图</a></li>
<li><a href="http://tieba.baidu.com/">贴吧</a></li>
<li><a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a></li>
<li><a href="http://image.baidu.com/">图片</a></li>
<li><a href="https://pan.baidu.com/?from=1026962h">网盘</a></li>
<li><a href="http://www.baidu.com/more/">更多</a></li>
</ul>
</body>
</html>
运行结果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/130047.html
