abstrak：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘寶頂部導(dǎo)航條</title
<!DOCTYPE html> <html lang="en"> <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="../css/font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <header> <div class="header-content"> <div class="header-left"> <a href="#" class="header-a">中國(guó)大陸 <i class="fa fa-angle-down"></i></a> <a href="#" style="color: orange">親，親登錄</a> <a href="#">免費(fèi)注冊(cè)</a> <a href="#">手機(jī)逛淘寶</a> </div> <div class="header-right"> <a href="#" class="header-a">我的淘寶 <i class="fa fa-angle-down"></i> <ul> <li>中低價(jià)房</li> <li>大家樂福講道理</li> </ul> </a> <a href="#"><span class="fa fa-shopping-cart"></span> 購(gòu)物車 <i class="fa fa-angle-down"></i></a> <a href="#" class="header-a"><span class="fa fa-star"></span> 收藏夾 <i class="fa fa-angle-down"></i></a> <a href="#">商品分類</a> | <a href="#" class="header-a">賣家中心 <i class="fa fa-angle-down"></i></a> <a href="#" class="header-a">聯(lián)系客服 <i class="fa fa-angle-down"></i></a> <a href="#" class="header-a"><i></i>網(wǎng)站導(dǎo)航 <i class="fa fa-angle-down"></i></a> </div> <div class="clear"></div> </div> </header> </body> </html>
樣式
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #0f0f0f;font-size: 13px;}
li{list-style: none;}
.clear{clear: both;}
header{
width: 100%;/*height: 40px;*/
background-color: #F5F5F5;
}
.header-content{
width:1200px;
/*height: 40px;*/
margin: 0 auto;
line-height: 40px;
}
.header-content a:hover{
color:orange;
}
.header-left{
height: 40px;
float: left;
}
.header-left a{
margin-right: 5px;
}
.header-a{
display: inline-block;
position: relative;
width: 90px;height: 40px;
text-align: center;
}
.header-a:hover{
background-color: white;
}
.header-a ul{
position: absolute;
display: none;
width: 100px;
padding: 5px 0px;
border:1px solid #F5F5F5;
border-top: none;
}
.header-a:hover ul{display: block;}
.header-a ul li{
color: #6c6c6c;
height: 30px;line-height: 30px; text-align: left;
padding: 0px 3px;
}
.header-a ul li:hover{background-color: #F5F5F5}
.header-right{
height: 40px;
float: right;
}
.header-right .fa-shopping-cart{
color: orange;
}總結(jié)：
導(dǎo)航是用a標(biāo)簽，下拉菜單用的ul li 。因?yàn)橛玫较吕藛味际怯玫膗l li，就可以給ul li設(shè)樣式 或 給 ul li一個(gè)相同的類來 實(shí)現(xiàn)樣式復(fù)用
需要注意：a標(biāo)簽里面放ul會(huì)把 導(dǎo)航欄后面節(jié)內(nèi)容擠到下面去。給導(dǎo)航欄a標(biāo)簽一個(gè)相對(duì)定位，再給ul一個(gè)絕對(duì)定位就能都解決。
下拉框大小可以設(shè)置ul的大小。如果要個(gè)全導(dǎo)航欄的下拉框，把ul的寬度設(shè)為導(dǎo)航條的寬度，再用定位定好位置就可以了。
效果圖
Guru membetulkan：韋小寶Masa pembetulan：2019-02-19 09:12:52
Rumusan guru：寫的很不錯(cuò) 總結(jié)的也沒毛病 代碼寫的也很規(guī)范 繼續(xù)加油吧！