摘要：<!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="">聯(lián)系客服</a>
<a href="">網(wǎng)站導(dǎo)航</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
老師總結(jié)：寫的很不錯 css來實現(xiàn)下拉菜單還是蠻簡單的 總的來說要比js來實現(xiàn)簡單多了