头部导航条布局
html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>头部导航条制作</title> 6 <link rel="stylesheet" type="text/css" href="css/master8.css"> 7 </head> 8 <body> 9 <div class="navbox"> 10 <ul class="clearfix"> 11 <li><a href="#">首页</a></li> 12 <li><a href="#">资讯</a></li> 13 <li><a href="#">web前端</a></li> 14 <li><a href="#">前端新闻</a></li> 15 <li><a href="#">联系我们</a></li> 16 <li><a href="#">关于我们</a></li> 17 </ul> 18 </div> 19 </body> 20 </html>
用无序列表制作头部导航条：
-
无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列
-
左右排列的方式我们所用的是
float:left;浮动的方法让li左右布局CSS样式：
-
1 .navbox{ 2 960px; 3 height: 40px; 4 margin: 20px auto; 5 background: #08c; 6 } 7 .navbox >ul>li{ 8 float: left; 9 160px; 10 height: 40px; 11 line-height: 40px; 12 text-align: center; 13 font-size: 16px; 14 }
鼠标移入时实现颜色的变换
HTML代码：
-
1 <div class="navbox"> 2 <ul class="clearfix"> 3 <li><a href="#">首页</a></li> 4 <li><a href="#">资讯</a></li> 5 <li><a href="#">web前端</a></li> 6 <li><a href="#">前端新闻</a></li> 7 <li><a href="#">联系我们</a></li> 8 <li><a href="#">关于我们</a></li> 9 </ul> 10 </div>
思路：
鼠标移入时每个<li>显示为另一种颜色background: #00bfff;
css代码： -
1 .navbox ul li a{ 2 display: block; 3 color: #fff; 4 background: #08c; 5 } 6 .navbox ul li a:hover{ 7 text-decoration: none; 8 background: #00bfff; 9 }
下拉菜单实现
html：
-
1 <div class="navbox"> 2 <ul class="clearfix"> 3 <li><a href="#">首页</a></li> 4 <li><a href="#">资讯</a></li> 5 <li><a href="#">web前端</a> 6 <ul class="subnav"> 7 <li><a href="#">HTML</a></li> 8 <li><a href="#">CSS</a></li> 9 <li><a href="#">JavaScript</a></li> 10 </ul> 11 </li> 12 <li><a href="#">前端新闻</a></li> 13 <li><a href="#">联系我们</a></li> 14 <li><a href="#">关于我们</a></li> 15 </ul> 16 </div>
思路：
在一级菜单web前端下实现二级菜单<ul class="subnav">-
html
-
css
-
JavaScript
当鼠标移入菜单时web前端时显示二级菜单，移出时隐藏；
CSS代码实现：
-
-
1 .subnav{ 2 display: none; 3 } 4 /*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/ 5 .navbox ul li:hover .subnav{ 6 display: block; 7 } 8 /*当鼠标移入“web前端”选项栏时显示二级菜单*/
三级菜单实现
-
1 <div class="navbox"> 2 <ul class="clearfix"> 3 <li><a href="#">首页</a></li> 4 <li><a href="#">资讯</a></li> 5 <li><a href="#">web前端</a> 6 <ul class="subnav"> 7 <li><a href="#">HTML</a></li> 8 <li><a href="#">CSS</a> 9 <ul class="threenav"> 10 <li><a href="#">css1</a></li> 11 <li><a href="#">css2</a></li> 12 <li><a href="#">css3</a></li> 13 </ul> 14 </li> 15 <li><a href="#">JavaScript</a></li> 16 </ul> 17 </li> 18 <li><a href="#">前端新闻</a></li> 19 <li><a href="#">联系我们</a></li> 20 <li><a href="#">关于我们</a></li> 21 </ul> 22 </div>
思路：
前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。我们看看css的绝对定位与相对定位这篇文章
CSS代码：
-
1 .subnav>li{ 2 position: relative; 3 } 4 .threenav{ 5 position: absolute; 6 top: 0; 7 left: 160px; 8 160px; 9 } 10 .subnav, .threenav{ 11 display: none; 12 } 13 .subnav li:hover .threenav{ 14 display: block; 15 }
- 最后实现的效果如下图：
