abstrakt：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿新浪首頁(yè)頂部導(dǎo)航條</title> <link rel="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿新浪首頁(yè)頂部導(dǎo)航條</title>
<link rel="stylesheet" type="text/css" href="CssTest01.css">
<link rel="stylesheet" type="text/css" href="fa/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header_top"></div>
<div class="header_bottom">
<div class="header_content">
<div class="header_left">
<a href="#">設(shè)為首頁(yè)</a>
<a href="#">手機(jī)新浪網(wǎng)</a>
<a href="#">移動(dòng)客戶端 <i class="fa fa-angle-down" ></i>
<ul>
<li>新浪微博</li>
<li>新浪新聞</li>
</ul>
</a>
</div>
<div class="header_right">
<a href="#">登錄</a>
<a href="#">微博 <i class="fa fa-angle-down" ></i>
<ul>
<li>私信</li>
<li>評(píng)論</li>
<li>@我</li>
</ul>
</a>
<a href="#">博客 <i class="fa fa-angle-down" ></i>
<ul>
<li>博客評(píng)論</li>
<li>未讀提醒</li>
</ul></a>
<a href="#">郵箱 <i class="fa fa-angle-down" ></i>
<ul>
<li>免費(fèi)郵箱</li>
<li>VIP郵箱</li>
<li>企業(yè)郵箱</li>
</ul></a>
<a href="#">網(wǎng)站導(dǎo)航</a>
</div>
<div class="clear_float"></div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px
}
.header_top {
width: 100%;
height: 3px;
background: #FF8500;
}
.header_bottom {
width: 100%;
height: 40px;
background: #FCFCFC;
}
.header_content {
height: 40px;
width: 1020px;
margin: 0px auto; /**居中：上下無(wú)間隙，左右自動(dòng)*/
}
.header_left {
height: 40px; /**沒(méi)內(nèi)容的時(shí)候不會(huì)自己撐開(kāi)，要設(shè)置寬高*/
float: left;
font-size: 0px;
/**清除a標(biāo)簽之間的默認(rèn)留白間距有3種方法
方法一：font-size:0
方法二：a標(biāo)簽內(nèi)容寫(xiě)在一行
方法三：float浮動(dòng)：父級(jí)元素設(shè)置display: flex;
方法四：letter-spacing：父級(jí)-999px 本身0px;
*/
}
.header_right {
height: 40px;
float: right;
}
.clear_float {
clear: both;/**清除浮動(dòng)*/
}
a {
width: 90px;
height: 40px;
line-height: 40px;
text-decoration: none;
font-size: 13px;
color: #4C4C4C;
position: relative;
text-align: center;
display: inline-block; /**將a標(biāo)簽轉(zhuǎn)行內(nèi)塊元素可設(shè)置寬高*/
}
a:hover {
color: #FF8500;
background: #EDEEF0;
}
i{
color: #FF8500;
}
ul {
width: 100px;
position: absolute;
border: #FF8500 solid 1px;
border-top: none;
border-bottom: none;
display: none;
}
a:hover ul{
display: block;
}
li{
list-style: none;
height: 30px;
line-height: 30px;
border-bottom: #FF8500 solid 1px;
padding: 0px 10px;
text-align: left;
color: #4C4C4C;
}
li:hover{
background: #FFF5DA;
color: #FF8500;
}
總結(jié)：還是要細(xì)心吧，特別是設(shè)置pading和margin的時(shí)候 像a設(shè)置了padding ，ul會(huì)受影響，一開(kāi)始設(shè)置隱藏了 就老搞不明白為什么有間距，還有一個(gè)問(wèn)題是 有沒(méi)有辦法讓a標(biāo)簽和li標(biāo)簽自動(dòng)填充寬度對(duì)齊，而不是設(shè)置固定的寬度，強(qiáng)迫癥覺(jué)得不對(duì)齊不好看，回頭我再想想。
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-03-05 13:28:43
Zusammenfassung des Lehrers：<a>標(biāo)簽與<li>標(biāo)簽屬于不同的標(biāo)簽類(lèi)型 , 有著自己原始的樣式, 可以通過(guò)瀏覽器中的CSS查看器, 來(lái)了解他們區(qū)別