abstrakt：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>頭部導(dǎo)航欄</title><link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頭部導(dǎo)航欄</title>
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div class="header">
<div class="header-center">
<div class="header-left">
<a href=""><i class="fa fa-home"></i> 天貓首頁(yè)</a>
<p>喵，歡迎來(lái)天貓</p>
<a href="">請(qǐng)登錄</a>
<a href="">免費(fèi)注冊(cè)</a>
</div>
<div class="header-right">
<a href="">我的淘寶 <i class="fa fa-caret-down"></i>
<ul>
<li>已買(mǎi)到的寶貝</li>
<li>已賣(mài)出的寶貝</li>
</ul>
</a>
<a href=""><i class="fa fa-heart"></i> 我關(guān)注的品牌</a>
<a href=""><i class="fa fa-shopping-cart"></i> 購(gòu)物車(chē)</a>
<a href="">收藏夾 <i class="fa fa-caret-down"></i>
<ul>
<li>收藏的寶貝</li>
<li>收藏的店鋪</li>
</ul>
</a>
<a href="">| 淘寶網(wǎng)</a>
<a href="">企業(yè)購(gòu)</a>
<a href="" style="color:#9c9c9c;"><i class="fa fa-th-list"></i> 網(wǎng)站導(dǎo)航 <i class="fa fa-caret-down"></i>
<ul>
<li>已買(mǎi)到的寶貝</li>
<li>已賣(mài)出的寶貝</li>
<li>收藏的寶貝</li>
<li>收藏的店鋪</li>
</ul>
</a>
</div>
</div>
</div>
</body>
</html>
//css部分：
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:#9C9C9C;
font-size:14px;
line-height:30px;
margin-left:15px;
}
a:hover{
color:#D55959;
text-decoration:underline;
}
.fa-home,.fa-heart,.fa-shopping-cart,.fa-th-list{
color:#D55959;
}
p{
display:inline;
color:#9C9C9C;
font-size:14px;
line-height:30px;
margin-left:15px;
}
ul li{
list-style:none;
}
.header{
width:100%;
height:30px;
background:#F2F2F2;
}
.header-center{
width:1350px;
margin:0px auto;
}
.header-left{
height:30px;
float:left;
}
.header-right{
height:30px;
float:right;
}
.header-a{
display:inline-block;
height:30px;
width:90px;
text-align:center;
position:relative;
}
.header-a:hover{
background:#fff;
}
.header-a ul{
border:1px solid #F2F2F2;
display:none;
border-top:none;
}
.header-a:hover ul{
display:block;
position:absolute;
width:100px;
}
.header-a ul li{
color:#9c9c9c;
height:30px;
line-height:30px;
text-align:left;
list-style:none;
margin-left:8px;
}
.header-a ul li:hover{
color:#D55959;
text-decoration:underline;
}
總結(jié)：下拉菜單效果的實(shí)線(xiàn)相對(duì)于頭部的布局來(lái)說(shuō)還是有點(diǎn)難的，但上課認(rèn)真聽(tīng)講，布局細(xì)心認(rèn)真細(xì)心點(diǎn)也是可以做好的！
Korrigierender Lehrer：韋小寶Korrekturzeit：2019-03-11 09:08:25
Zusammenfassung des Lehrers：寫(xiě)的很不錯(cuò) css來(lái)實(shí)現(xiàn)下拉菜單還是蠻簡(jiǎn)單的 總的來(lái)說(shuō)要比js來(lái)實(shí)現(xiàn)簡(jiǎn)單多了