摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>仿淘宝</title><link rel="stylesheet" href="font-awesome-4.7.0/c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿淘宝</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{padding:0px;margin: 0px;}
.clear{clear:both;}
#box{width:100%,heiht:40px;background-color:#F5F5F5;}
#box_header{ width:1200px ; line-height: 40px;margin:0px auto;}
#box_left{ float: left;}
#box_right{ float: right;}
a{text-decoration:none;color:#000;margin-right: 5px; text-align: center ;font-size: 13px}
a:hover{ background: #F5F5F5}
.a1{display: inline-block;text-align: center;position: relative;}
ul{list-style: none;display: none;border: 1px solid #ccc;border-top: none;}
.a1:hover ul{display: block;position: absolute;}
li{color: plum;height: 30px; line-height: 30px;text-align: left;padding: 0px 3px;margin: 3px,0px;}
li:hover{ background: #F5F5F5;}
</style>
</head>
<body>
<div id="box">
<div id="box_header">
<div id="box_left">
<a href="">中国大陆  <i class=" fa fa-angle-down"></i></a>
<a href=""style="color:red">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div id="box_right">
<a href="" class="a1">我的淘宝  <i class=" fa fa-angle-down"></i>
<ul>
<li> 已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""> <span class="fa fa-shopping-cart" style="color:red"></span> 购物车</a>
<a href=""><span class="fa fa-star" style="color:red"></span> 收藏夹  <i class=" fa fa-angle-down"></i></a>
<a href="">商品分类  <i class=" fa fa-angle-down"></i>
<ul>
<li> 已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="">卖家中心  <i class=" fa fa-angle-down"></i>
<ul>
<li> 已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href="">联系客服  <i class=" fa fa-angle-down"></i></a>
<a href=""><span class="fa fa-stack-overflow" style="color:red"></span> 网站导航  <i class=" fa fa-angle-down" style="color:red"></i></a>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
