摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>淘寶導(dǎo)航</title> <link rel="stylesheet" type="text/css" href="css/in
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘寶導(dǎo)航</title>
<link rel="stylesheet" type="text/css" href="css/index.css">（鏈接使代碼更美觀簡潔 ）
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>（加入字體庫）
<body>
<div class="header">（第二步）
<div class="header_content">（導(dǎo)航內(nèi)部的內(nèi)容）
<div class="header_left">(頭部的左邊）
<a href="" class="header_a">中國大陸 （增加間距）<i class=" fa fa-angle-down"></i></a>
<a href="" style="color:#F37F64">親，請登錄</a>
<a href="">免費(fèi)注冊</a>
<a href="">手機(jī)逛淘寶</a> {頭部的右邊}
</div>
<div class="header_right">（設(shè)置右邊部分）
<a href="" class="header_a">我的淘寶<i class=" fa fa-angle-down"></i></a>
<a href=""><span class=" fa fa-cart-plus"></span> 購物車</a>
<a href=""><span class=" fa fa-angle-down"></span> 收藏<i class=" fa fa-angle-down"></i></a>
<a href="">商品分類</a>
<a href="">賣家中心<i class=" fa fa-angle-down"></i></a>
<a href=""><i class=" fa fa-angle-down"></i>聯(lián)系客服</a>
<a href="">網(wǎng)站導(dǎo)航<i class=" fa fa-angle-down"></i></a>
</div>
</div>
<div class="clear"></div>（清除浮動）
</div>
</body>
</html>
index.css的內(nèi)容
*{margin: 0px;padding: 0px;}（第一步清除瀏覽器邊距）
a{text-decoration:none;color: #000;font-size: 13px;}（第二步設(shè)置頭部的長 高 加入背景色更直觀的看出）
.clear{clear:both;}(清除浮動）
.header{width: 100%;background-color:#F5F5F5}
.header_content{width: 1200px;margin: 0px auto;line-height: 40px;}（導(dǎo)航內(nèi)容設(shè)置使他居中到中間 居中用margin）
.header_left{height: 40px;float: left;}(向左浮動){一般不會給寬度讓它自己擠 }
.header_left a{margin-right: 5px;}
.header_content a:hover{color:#F37F64;}
.header_right{width: 600px;height: 40px;float: right;}()向右浮動
.header_a{display: inline-block;height: 40px;width: 90px;text-align: center;}
.header_a:hover{background-color: #fff;}
沒有給高度的話沒有清除浮動就會導(dǎo)致hearder和header_content的背景顏色沒有了
背景顏色在最后時(shí)清除這樣跟美觀
批改老師：查無此人批改時(shí)間：2019-06-14 09:21:10
老師總結(jié)：完成的不錯(cuò)。學(xué)編程，先從模仿開始，繼續(xù)加油。