サマリー：開(kāi)始之前考慮幾個(gè)問(wèn)題：明確布局效果，后期需要反復(fù)確認(rèn)細(xì)節(jié)；實(shí)現(xiàn)方法：使用何種元素，元素之間的包裹關(guān)系；規(guī)劃class方案，以便設(shè)置樣式；可能出現(xiàn)的問(wèn)題：float屬性繼承關(guān)系理解不透徹，加上clear作為防控。實(shí)踐中注意到的問(wèn)題：元素使用：使用div劃分布局結(jié)構(gòu)，使用a鏈接設(shè)置跳轉(zhuǎn)內(nèi)容。布局基本思路是分為left、right兩部分，由content包裹，再上一級(jí)是header；content不是頂
開(kāi)始之前考慮幾個(gè)問(wèn)題：
明確布局效果，后期需要反復(fù)確認(rèn)細(xì)節(jié)；
實(shí)現(xiàn)方法：使用何種元素，元素之間的包裹關(guān)系；規(guī)劃class方案，以便設(shè)置樣式；
可能出現(xiàn)的問(wèn)題：float屬性繼承關(guān)系理解不透徹，加上clear作為防控。
實(shí)踐中注意到的問(wèn)題：
元素使用：使用div劃分布局結(jié)構(gòu)，使用a鏈接設(shè)置跳轉(zhuǎn)內(nèi)容。
布局基本思路是分為left、right兩部分，由content包裹，再上一級(jí)是header；content不是頂級(jí)，因?yàn)檫€有一條灰色色帶header；
header的寬度是100%；高度通過(guò)line-height: 25px統(tǒng)領(lǐng)content、left、right高度，不再設(shè)置height屬性；采用該方法時(shí)，可同時(shí)設(shè)置height，但需要大于line-height才能體現(xiàn)，需要注意的是，下級(jí)div只會(huì)繼承l(wèi)ine-height，而不會(huì)繼承height設(shè)置。
content位于header下方，width設(shè)為有效寬度；left設(shè)置左浮動(dòng)，right設(shè)置右浮動(dòng)以及右對(duì)齊；
.ct_left{width:400px; float: left;}
.ct_right{width:700px; float: right; text-align: right;}必須設(shè)置clear: both來(lái)清除浮動(dòng)樣式，否則造成header色帶消失【原理不明】。
//樣式
*.clear{clear: both;}
//標(biāo)簽
<div class="clear"></div>引用Font Awesome：
首先在head部分用link引用fa的css文件，引用圖表時(shí)使用<i>或者<span>標(biāo)簽，class名稱遵循官方說(shuō)明，標(biāo)簽之間內(nèi)容為空。
圖標(biāo)顏色繼承文本顏色，個(gè)別圖標(biāo)顏色不統(tǒng)一，可通過(guò)行內(nèi)樣式設(shè)置；圖標(biāo)與文字之間的空隙可使用【 】設(shè)置（可多個(gè)并用）。
<i class="fas fa-shopping-cart" style="color: #FF0036;"></i>
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tmall Navigation</title>
<link rel="stylesheet" type="text/css" href="css/fa/css/all.min.css"/>
<style type="text/css">
*{margin: 0px; padding: 0px;}
*.clear{clear: both;}
.header{width: 100%; line-height: 25px; background: #F2F2F2;}
.hd_content{width: 1200px; margin: 0px auto;}
.ct_left{width:400px; float: left; }
.ct_right{width:700px; float: right; text-align: right;}
a{text-decoration:none; margin: 0px 10px; font-family: 宋體; font-size: 13px; color: #999999;}
a:hover{color: #FF0036; text-decoration: underline;}
#text01:hover{text-decoration: none;}
</style>
</head>
<body>
<div class="header">
<div class="hd_content">
<div class="ct_left">
<a href=""><i class="fas fa-home" style="color: #FF0036;"></i> 天貓首頁(yè)</a>
<a id="text01" href="" >喵，歡迎來(lái)天貓</a>
<a href="">請(qǐng)登錄</a>
<a href="">免費(fèi)注冊(cè)</a>
</div>
<div class="ct_right">
<a href="">我的淘寶 <i class="fas fa-caret-down" aria-hidden="true"></i>
<!-- <ul>
<li>已買(mǎi)到的寶貝</li>
<li>已賣(mài)出的寶貝</li>
</ul> -->
</a>
<a href=""><i class="fas fa-shopping-cart" style="color: #FF0036;"></i> 購(gòu)物車(chē)</a>
<a href="">收藏夾 <i class="fas fa-caret-down"></i>
<!-- <ul>
<li>收藏的寶貝</li>
<li>收藏的店鋪</li>
</ul> -->
</a>
<a href="">淘寶網(wǎng)</a>
<a href="">商家支持 <i class="fas fa-caret-down"></i></a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>