头部导航条布局
html代码：
<!DOCTYPE html><html><head>
<meta charset=”utf-8″>
<title>头部导航条制作</title>
<link rel=”stylesheet” type=”text/css” href=”css/master8.css”>
</head>
<body>
<div >
<ul >
<li><a href=”#”>首页</a></li>
<li><a href=”#”>资讯</a></li>
<li><a href=”#”>web前端</a></li>
<li><a href=”#”>前端新闻</a></li>
<li><a href=”#”>联系我们</a></li>
<li><a href=”#”>关于我们</a></li>
</ul>
</div>
</body>
</html>
用无序列表制作头部导航条：
-
无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列
-
左右排列的方式我们所用的是
float:left;浮动的方法让li左右布局CSS样式：
-
.navbox{ -
width:960px; -
height:40px; -
margin:20pxauto; -
background:#08c; -
} -
.navbox >ul>li{ -
float: left; -
width:160px; -
height:40px; -
line-height:40px; -
text-align: center; -
font-size:16px; -
}
鼠标移入时实现颜色的变换
HTML代码：
<div >
<ul >
<li><a href=”#”>首页</a></li>
<li><a href=”#”>资讯</a></li>
<li><a href=”#”>web前端</a></li>
<li><a href=”#”>前端新闻</a></li>
<li><a href=”#”>联系我们</a></li>
<li><a href=”#”>关于我们</a></li>
</ul></div>
思路：
鼠标移入时每个<li>显示为另一种颜色background: #00bfff;
css代码：
.navbox ul li a{ display: block; color: #fff; background: #08c;}.navbox ul li a:hover{ text-decoration: none; background: #00bfff;}
下拉菜单实现
html：
<div >
<ul >
<li><a href=”#”>首页</a></li>
<li><a href=”#”>资讯</a></li>
<li><a href=”#”>web前端</a>
<ul >
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Javascript</a></li>
</ul>
</li>
<li><a href=”#”>前端新闻</a></li>
<li><a href=”#”>联系我们</a></li>
<li><a href=”#”>关于我们</a></li>
</ul>
</div>
思路：
在一级菜单web前端下实现二级菜单<ul >
-
html
-
css
-
Javascript
当鼠标移入菜单时
web前端时显示二级菜单，移出时隐藏；CSS代码实现：
.subnav{ display: none;}/*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/.navbox ul li:hover .subnav{ display: block;}/*当鼠标移入“web前端”选项栏时显示二级菜单*/
三级菜单实现
HTML
<div >
<ul >
<li><a href=”#”>首页</a></li>
<li><a href=”#”>资讯</a></li>
<li><a href=”#”>web前端</a>
<ul >
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a>
<ul >
<li><a href=”#”>css1</a></li>
<li><a href=”#”>css2</a></li>
<li><a href=”#”>css3</a></li>
</ul>
</li>
<li><a href=”#”>Javascript</a></li>
</ul>
</li>
<li><a href=”#”>前端新闻</a></li>
<li><a href=”#”>联系我们</a></li>
<li><a href=”#”>关于我们</a></li>
</ul>
</div>
思路：
前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。
我们看看css的绝对定位与相对定位这篇文章
CSS代码：
.subnav>li{ position: relative;}.threenav{ position: absolute; top: 0; left: 160px; width: 160px;}.subnav, .threenav{ display: none;}.subnav li:hover .threenav{ display: block;}
最后实现的效果如下图：
本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com