abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿新浪首頁頂部導(dǎo)航條</title> <link rel="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿新浪首頁頂部導(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è)為首頁</a>
<a href="#">手機新浪網(wǎng)</a>
<a href="#">移動客戶端 <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>評論</li>
<li>@我</li>
</ul>
</a>
<a href="#">博客 <i class="fa fa-angle-down" ></i>
<ul>
<li>博客評論</li>
<li>未讀提醒</li>
</ul></a>
<a href="#">郵箱 <i class="fa fa-angle-down" ></i>
<ul>
<li>免費郵箱</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; /**居中：上下無間隙，左右自動*/
}
.header_left {
height: 40px; /**沒內(nèi)容的時候不會自己撐開，要設(shè)置寬高*/
float: left;
font-size: 0px;
/**清除a標簽之間的默認留白間距有3種方法
方法一：font-size:0
方法二：a標簽內(nèi)容寫在一行
方法三：float浮動：父級元素設(shè)置display: flex;
方法四：letter-spacing：父級-999px 本身0px;
*/
}
.header_right {
height: 40px;
float: right;
}
.clear_float {
clear: both;/**清除浮動*/
}
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標簽轉(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é)：還是要細心吧，特別是設(shè)置pading和margin的時候 像a設(shè)置了padding ，ul會受影響，一開始設(shè)置隱藏了 就老搞不明白為什么有間距，還有一個問題是 有沒有辦法讓a標簽和li標簽自動填充寬度對齊，而不是設(shè)置固定的寬度，強迫癥覺得不對齊不好看，回頭我再想想。
Correcting teacher：天蓬老師Correction time：2019-03-05 13:28:43
Teacher's summary：<a>標簽與<li>標簽屬于不同的標簽類型 , 有著自己原始的樣式, 可以通過瀏覽器中的CSS查看器, 來了解他們區(qū)別