摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>ttt</title> <link rel="stylesheet" type="text/css" href="css/dhbj.cs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ttt</title>
<link rel="stylesheet" type="text/css" href="css/dhbj.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> -->
</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>
*{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*/
/*最終改一下淘寶*/
批改老師：查無(wú)此人批改時(shí)間：2019-01-12 13:32:52
老師總結(jié)：做的不錯(cuò)。代碼要縮進(jìn)，容易閱讀。樣式是從另一個(gè)文件拷貝過(guò)的吧？ 下次要注釋哦，繼續(xù)加油