摘要：<!DOCTYPE html><html><head> <title>仿淘宝首页</title> <link rel="stylesheet" type="text/css" href="./index.css"> <link rel="stylesh
<!DOCTYPE html>
<html>
<head>
<title>仿淘宝首页</title>
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="./font/css/font-awesome.min.css">
<body>
<div class="head">
<div class="head-content">
<div class="head-left">
<a href="">中国大陆 <i class="fa fa-angle-down"></i></a>
<a href="">滚吧哎烦人 <i class="fa fa-user-circle"></i> </a>
<i class="fa fa-angle-down"></i>
<a href=""><i class="fa fa-envelope" style="color: #FF5011;"></i> 消息<span class="message">1</span></a>
<i class="fa fa-angle-down"></i>
<a href="">手机逛淘宝</a>
</div>
<div class="head-right">
<a href="" class="head-a">我的淘宝 <i class="fa fa-angle-down"></i>
<ul>
<li>以买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""><i class="fa fa-shopping-cart"></i> 购物车</a>
<a href=""><i class="fa fa-star"></i> 收藏夹 <i class="fa fa-angle-down"></i></a>
<a href="">商品分类<span> |</span></a>
<a href="">卖家中心</a>
<a href="">联系客服</a>
<a href="">网站导航</a>
</div>
</div>
</div>
</body>
</html>
*{padding: 0px;margin: 0px;}
a{text-decoration: none;color: #3C3C3C; font-size: 13px;}
.head{width: 100%;height: 35px;background-color : #F5F5F5;}
.head-content{width:85%;height:35px;background-color: #F5F5F5; margin: 0px auto;}
.head-left{width: 30%;display: inline-block;}
.head-left a{line-height: 35px;}
.message{color: #FF5500;}
.head-right{float: right;width: 50%;}
.head-right a{margin: 0px 12px; line-height: 35px; }
ul li{list-style: none;}
.head-a{display: inline-block;width: 80px;height: 35px;line-height: 35px;font-size: 13px;position: relative;}
.head-a:hover ul{background: white;display: block;}
.head-a ul{display: none;position: absolute;}
.head-a ul li:hover{background-color:#F5F5F5;}
批改老师：韦小宝批改时间：2019-03-10 17:16:19
老师总结：写的很不错 css来实现下拉菜单还是蛮简单的 总的来说要比js来实现简单多了
