abstract：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>ttt</title> <link rel="stylesheet" type="text/css" href="css/font-aw
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ttt</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{margin: 0px;padding: 0px;}
a{text-decoration: none;color: #666666;font-size: 12px;}
ul li {list-style: none;font-size: 12px;text-align: left;padding: 0px 12px;height: 30px;}
.clear{clear: both;}
.head{width: 100%;line-height: 36px ;background-color: #F5F5F5;}
.head_cent{width: 1190px;/*height: 40px; background-color: red;*/margin: 0px auto;}
/*.head_cent a:hover{color: #FF8700;}*/
.head_cent_l{/*width: 200px;*/height: 36px;float: left;/*background-color: blue;*/}
.head_cent_r{/*width: 630px;*/height: 36px;float: right;/*background-color: yellow;*/}
.menu{height: 36px;width: 96px;float: left;/*border: 1px solid yellow;*/display: inline-block;text-align: center;}
.menu:hover ul{display: block;}
.menu a:hover {color:#FF8700; }
.menu ul{display: none;}
/*.heada{display: inline-block;height: 36px;width: 76px;text-align: center;}留出宽度
.heada:hover {background-color: #fff;position: relative;color: #FF8700;}
.headb{display: inline-block;height: 36px;width: 80px;text-align: center;}/*留出宽度
.heada ul {display: none;position: absolute;width: 96px;border: 1px 1px 0px 1px solid #F5F5F5;}
.heada:hover ul{display: block;border: 1px 1px 0px 1px solid #F5F5F5;}
.heada ul li{width:80px;height: 36px;line-height:36px;padding:0px 8px;text-align: left;color: #666666}LI的宽度如果不定义，是由字体撑开，但不会超过上一级，上一级继承的宽度。
.heada ul li:hover {background-color: #F5F5F5;}*/
.mjzs li {width: 72px;}/*由于定义了PADDING，那么实际宽度为：72+8*2*/
/*最终改一下淘宝*/
</style>
</head>
<body>
<div class="head">
<div class="head_cent">
<div class="head_cent_l">
<a href="" class="heada">中国大陆  <i class="fa fa-angle-down"></i></a>
<a href="" style="color: #FF8700">新，请登录</a>
<a href="" class="heada">免费注册</a>
<a href="" class="heada">手机逛淘宝</a>
</div>
<div class="head_cent_r">
<div class="menu">
<a href="" class="heada">我的淘宝</a>  <i class="fa fa-angle-down"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</div>
<div class="menu">
<span class="fa fa-shopping-cart"></span> 
<a href="" class="heada">购物车</a> 
<i class="fa fa-angle-down"></i>
</div>
<div class="menu">
<span class="fa fa-star" style="color:#FF4400"></span> 
<a href="" class="heada">收藏夹</a> 
<i class="fa fa-angle-down"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</div>
<div class="menu">
<a href="" class="headb">商品分类</a>
</div>
<div class="menu">
<a href="" class="heada" >卖家中心</a>  
<i class="fa fa-angle-down"></i>
<ul class="mjzs">
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
</ul>
</div>
<div class="menu">
<a href="" class="heada">联系客服</a>  
<i class="fa fa-angle-down"></i>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</div>
<div class="menu">
<span class="fa fa-bars" style="color:#FF4400"></span> 
<a href="" class="heada">网站导航</a> 
<i class="fa fa-angle-down"></i>
</div>
</div>
</div><div class="clear"></div>
</div>
<div class="t"></div><div class="t"></div>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-01-12 13:38:01
Teacher's summary：实现的很不错 不过下次记得又外部引入的样式 截个效果图哦 不然这边缺少效果