导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。
工具/材料Sublime Text
首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示
接下来我们在html的body结构里添加导航条的内容，如下图所示
然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面
最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色
<html><head></head>
<body>
<style type="text/css">
li{list-style-type:none
}
a{text-decoration:none
}
.lanmu{
width:980px
height:120px
border:1px #993399 solid
margin:0 auto
}
.lanmu ul {
width:900px
height:60px
margin:0 auto
border:1px #9900CC solid
margin-top:30px}
.lanmu ul li {
width:210px
height:30px
float:left
margin-top:10px
border:1px solid
text-align:center
padding-top:10px}
</style>
<div class="lanmu">
<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>
</ul>
</div>
</body>
</html>
结合css就可以了
#换成你想要的链接 ，再把边框线去掉就可以了
这样的导航一般是切两张图片下来一张是正常状态时候的图片
一张是鼠标移上去时的图片
把切下来的两张图片合在一起，变成一张（这样是为了减少对服务器的请求次数，减小服务器的压力，一般大的网站都是这样做的）
然后设置css，a：hover时，更改背景，注意把背景的位置调整正确
就可以达到效果了
不懂的话百度hi我
给你做类似的例子
