html+css实战导航+二级导航

摘要：*{margin: 0px;padding: 0px;color: #929292;} ul{list-style: none;} .clear{clear: both;} a{text-decoration: none;padding: 0px 17px;height: 40px;display:

*{margin: 0px;padding: 0px;color: #929292;}
ul{list-style: none;}
.clear{clear: both;}
a{text-decoration: none;padding: 0px 17px;height: 40px;display: inline-block;}
a:hover{background: #fff;}
.header{width: 100%;height:40px;background-color:#F5F5F5;}
.head{width: 1200px;margin: 0px auto;height: 40px;line-height: 40px;}
.logo{width: 98px;height: 23px;margin: 7px 17px 0px 0px;}
.float_left{float: left;}
.float_right{float: right;}

.head i{position: relative;top: 0px;right: -5px;}
.head ul{display:none;border:1px solid #f5f5f5;border-top: none;}
.erji{position: relative;}
.head .erji:hover ul{
	display: block;
	position: absolute;
}
.head ul li{width: 150px;height: 30px;line-height: 30px;}
.head ul li a{height: 30px;}
.head ul li:hover {
	background-color: #f5f5f5;
}
.head ul li:hover a{background: #f5f5f5;}

.vip{height: 40px;line-height: 40px;}
.vip img{width: 24px;padding-right: 10px;}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作导航</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<div>
<img class="logo float_left" src="images/logo.png" alt="">
<div class="head_left float_left">
<div>
<div><a href="">首页</a></div>
<div class="float_left erji">
<a href="">学习中心<i class="fa fa-caret-down"></i></a>
<ul>
<li style="width: 300px;"><a>您还没有参加班级，马上报班！</a></li>
</ul>
</div>
<div><a href="">班级</a></div>
<div class="float_left erji"><a href="">学习工具<i class="fa fa-caret-down"></a></i>
<ul>
<li><a href="">沪江网校</a></li>
<li><a href="">沪江开心词场</a></li>
<li><a href="">沪江听力库</a></li>
<li><a href="">沪江小D词典</a></li>
</ul>
</div>
<div><a href="">校企合作</a></div>
</div>
</div>
<div class="head_right float_right">
<div class="float_left vip"><a href=""><img src="images/vip.png" alt="">VIP会员中心</a></div>

<div><a href="">登录</a></div>
<div><a href="">注册</a></div>
</div>

</div>
<div></div>
</div>
</body>
</html>

批改老师：灭绝师太批改时间：2018-11-03 18:03:13
老师总结：代码还可以简练一点，不过做的还是不错的，可以把学到东西用于完善自己的案例，后面会更好的！加油！

html+css实战导航+二级导航

热门词条