摘要：基本上能完成，但是有时候有点繁琐代码，细节处理的不是很好<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>淘宝</title> <link rel="stylesheet" type="text/css&q
基本上能完成，但是有时候有点繁琐代码，细节处理的不是很好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝</title>
<link rel="stylesheet" type="text/css" href="css/taobao.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="content">
<div class="top">
<div class="topleft">
<a class="toplefta" style="color:#666" href="#">中国大陆 <i class=" fa fa-angle-down"></i></a>
<a class="qin" href="#">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div>
<div class="topright">
<a class="toplefta" href="#">我的淘宝 <i class=" fa fa-angle-down"></i></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a class="toplefta" href="#"><span style="color:#FF5000;" class="fa fa-cart-plus"></span> 购物车</a>
<a class="toplefta" href="#"><span class="fa fa-star"></span> 收藏夹 <i class=" fa fa-angle-down"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a class="toplefta" href="#">商品分类</a>
<a class="toplefta" href="#">卖家中心 <i class=" fa fa-angle-down"></i>
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体验中心</li>
</ul>
</a>
<a class="toplefta" href="#">联系客服 <i class=" fa fa-angle-down"></i></a>
<a class="toplefta" href="#"><span style="color:#FF5000;" class="fa fa-align-justify"></span> 网站导航 <i class=" fa fa-angle-down"></i>
</a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
/*css
*{margin:0 auto;padding:0px;}
.content{background-color:#F5F5F5;font-size: 13px;line-height:40px;border:1px solid #EEEEEE;}
.top{height:40px;width:1200px;}
.topleft{float: left;padding-left: 10px}
.topright{float: right;}
a{text-decoration: none;color:#6C6C6C;height:45px;text-align: center}
.top a:hover{color:#F4856B;}
li{list-style: none;}
.clear{clear:both;}
.toplefta{display: inline-block;width:90px;height:40px;position:relative;}
.toplefta ul{border:1px solid #f5f5f5;display:none;}
.toplefta:hover ul{display:block;position: absolute;width:90px;}
.toplefta ul li{height:30px;color:#6C6C6C;line-height:30px;}
.topright a:hover{background-color:pink}
.topright a ul li{text-align: left;padding:0 5px;margin:5px 0;}
.topright a ul li:hover{background-color: #d8d8d8}
.tanchu{width:600px;height:400px;background-color:#000;margin:0 auto;}
*/
批改老师：灭绝师太批改时间：2018-11-26 09:17:36
老师总结：完成的不错，多尝试几次，就会好很多！继续加油！
