導(dǎo)航欄如何實(shí)現(xiàn)梢卸？
以水平導(dǎo)航為例，用塊元素還是用內(nèi)聯(lián)元素呢副女？
理論上應(yīng)該用內(nèi)聯(lián)元素蛤高，因?yàn)閴K元素會(huì)換行。
但事實(shí)上用的是塊元素li碑幅。因?yàn)榭梢宰寜K元素不換行戴陡。有兩個(gè)方法
inline屬性
舉個(gè)例子
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
}
li {
display:inline;
background-color:yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
結(jié)果如圖
image.png
總結(jié)，inline屬性把block元素變成了inline元素沟涨。list-style-type:none;是去掉li自帶的小圓點(diǎn)的恤批。
float方法
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
}
li {
float:left;
background-color:yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
結(jié)果如圖
image.png
有個(gè)問題啊 ，文字靠的太近了.
那給l設(shè)置個(gè)寬度
li {
float:left;
background-color:yellow;
width:60px;
}
結(jié)果如圖
image.png
想鼠標(biāo)懸停時(shí)變色裹赴，再加這么一句
a:hover {
background-color:red;
}
hover是個(gè)偽類選擇器
實(shí)踐中還會(huì)有個(gè)問題
如下圖喜庞，點(diǎn)擊文字可以，但是點(diǎn)擊文字稍微旁邊就不行棋返，這不友好
延都。設(shè)置
a {disply:block} 就好了。
##總結(jié)
水平導(dǎo)航的關(guān)鍵問題是怎么把li這個(gè)block元素讓他不換行排列~
##參考
[CSS 導(dǎo)航條](http://www.w3school.com.cn/css/css_navbar.asp)
