abstrait：<!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的寬度如果不定義，是由字體撐開(kāi)，但不會(huì)超過(guò)上一級(jí)，上一級(jí)繼承的寬度。
.heada ul li:hover {background-color: #F5F5F5;}*/
.mjzs li {width: 72px;}/*由于定義了PADDING，那么實(shí)際寬度為：72+8*2*/
/*最終改一下淘寶*/
</style>
</head>
<body>
<div class="head">
<div class="head_cent">
<div class="head_cent_l">
<a href="" class="heada">中國(guó)大陸  <i class="fa fa-angle-down"></i></a>
<a href="" style="color: #FF8700">新，請(qǐng)登錄</a>
<a href="" class="heada">免費(fèi)注冊(cè)</a>
<a href="" class="heada">手機(jī)逛淘寶</a>
</div>
<div class="head_cent_r">
<div class="menu">
<a href="" class="heada">我的淘寶</a>  <i class="fa fa-angle-down"></i>
<ul>
<li>已買(mǎi)到的寶貝</li>
<li>我的足跡</li>
</ul>
</div>
<div class="menu">
<span class="fa fa-shopping-cart"></span> 
<a href="" class="heada">購(gòu)物車(chē)</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">商品分類(lèi)</a>
</div>
<div class="menu">
<a href="" class="heada" >賣(mài)家中心</a>  
<i class="fa fa-angle-down"></i>
<ul class="mjzs">
<li>免費(fèi)開(kāi)店</li>
<li>已賣(mài)出的寶貝</li>
<li>出售中的寶貝</li>
<li>賣(mài)家服務(wù)市場(chǎng)</li>
<li>賣(mài)家培訓(xùn)中心</li>
</ul>
</div>
<div class="menu">
<a href="" class="heada">聯(lián)系客服</a>  
<i class="fa fa-angle-down"></i>
<ul>
<li>消費(fèi)者客服</li>
<li>賣(mài)家客服</li>
</ul>
</div>
<div class="menu">
<span class="fa fa-bars" style="color:#FF4400"></span> 
<a href="" class="heada">網(wǎng)站導(dǎo)航</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>
Professeur correcteur：韋小寶Temps de correction：2019-01-12 13:38:01
Résumé du professeur：實(shí)現(xiàn)的很不錯(cuò) 不過(guò)下次記得又外部引入的樣式 截個(gè)效果圖哦 不然這邊缺少效果