今天小编跟大家讲解下有关详解一级导航的制作 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关详解一级导航的制作 的相关资料，希望小伙伴们看了有所帮助。
今天分享一下简单导航栏的制作方法：
第一步：引入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;}以上就是本文的全部内容 希望本文的内容对大家的学习或者工作能带来一定的帮助 同时也希望多多支持爱蒂网！
来源：爱蒂网
