abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<title>淘宝导航条实战布局</title>
<style>
*{margin: 0;padding: 0px;color: #6c6c6c;}
.claer{clear: both;}
ul li{list-style: none;}
a{text-decoration: none;font-size: 13px;}
.header{background:#F5F5F5;height:40px;line-height: 40px;}
.header_content{width:1190px;margin: 0 auto;position:relative;}
.header_left{float: left;}
.header_left a{margin-right: 5px;}
.header_left a:hover{color: red;}
.header_right{float: right;}
.header_right li{width: 80px;float: left;text-align:center;}
.header_right span a:hover{color: red;}
.header_right>li:hover{background: #fff;}/*内容右侧的ul下的所有列表鼠标划入变色*/
.header_right li>ul li{border: 1px solid #f5f5f5;border-top: 0px;display: none;}/*把右侧的ul li下的ul设置高度加一个边框和颜色*/
.header_right li>ul a{display: block;text-align: left;}/*把ul li下的ul下的a转块元素，设靠左对齐*/
.header_right>li:hover ul li{display: block;}
.header_right ul li:hover{background:#f5f5f5;color: #6c6c6c;}
img{position:absolute;left:0px;top:40px;border:1px solid #ccc;border-top: 0px;}
</style>
</head>
<body>
<div>
<div>
<div>
<a href="#">中国大陆 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<a style="color:#ff5000;" href="#">亲，请登陆</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div>
<ul>
<li><span><a href="#">我的淘宝 <i class=" fa fa-angle-down"></i></a></span>
<ul>
<li><a href="#">已买到的宝贝</a></li>
<li><a href="#">我的足迹</a></li>
</ul>
</li>
<li><span><a href="#"><i style="color: #ff5000;" class="fa fa-shopping-cart margin-lr" aria-hidden="true"></i> 购物车 <i class=" fa fa-angle-down"></i></a></span></li>
<li>
<span><a href="#"><i style="color: #6c6c6c;" class="fa fa-star" aria-hidden="true"></i> 收藏夹 <i class=" fa fa-angle-down"></i></a></span>
<ul>
<li><a href="#">收藏的宝贝</a></li>
<li><a href="#">收藏的店铺</a></li>
</ul>
</li>
<li><span><a href="#">商品分类 <i class="fa fa-heart-o" aria-hidden="true"></i></a></span></li>
<li>
<span><a href="#">卖家中心 <i class=" fa fa-angle-down"></i></a></span>
<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>
<li><a href="#">体检中心</a></li>
<li><a href="#">问商友</a></li>
</ul>
</li>
<li>
<span><a href="#">联系客服 <i class=" fa fa-angle-down"></i></a></span>
<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>
<li><a href="#">体检中心</a></li>
<li><a href="#">问商友</a></li>
</ul>
</li>
<li>
<span><a href="#">网站导航 <i style="color:#ff5000;" class="fa fa-bars" aria-hidden="true"></i></a></span>
<ul>
<li><a href=""><img src="http://t.cn/E2HKSXS"></a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2018-11-21 12:22:08
Teacher's summary：完成的不错，布局掌握根本，就能举一反三，可以尝试不同类型导航条
