今天分享一下简单导航栏的制作方法：
第一步：引入css样式表，新建一个id为nav的层，使用<ul>、<li>、<a>标签来制作完成效果。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </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> </ul> </div> </body></html>
第二步设置CSS样式：
1.设置nav的属性
#nav{ width: 500px; height: 50px; border: 1px solid red;}展示效果如下所示：
2.清除<ul>标签前面自带的点
#nav ul{ list-style: none;}3.设置<ul>下包含的<a>标签的属性
#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none;}4.设置鼠标滑过效果
#nav ul li a:hover{ background-color: #ABCDEF;}最终效果：
完整HTML代码部分：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </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> </ul> </div> </body></html>
完成CSS样式代码部分：
*{ margin: 0; padding: 0;}#nav{ width: 500px; height: 50px; border: 1px solid red; margin: 30px;}#nav ul{ list-style: none;}#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none;}#nav ul li a:hover{ background-color: #ABCDEF;}以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持网页设计！
