很多同學(xué)問(wèn)，你看他們那誰(shuí)家的小誰(shuí)做的那個(gè)導(dǎo)航，鼠標(biāo)一滑過(guò)還有變化，他們?cè)趺醋龅模?/p>

那今天我們來(lái)講一些更好玩的偽類，首先是 ：hover，這個(gè)講的是某元素被鼠標(biāo)滑過(guò)的時(shí)候的樣式。當(dāng)然如果不定義的話就是沒(méi)有變化嘍，就像我們前邊寫(xiě)的那樣，但是如果我定義一下呢？

#nav .nav-item a:hover {
    background: #DDD;
}

然后我們?nèi)タ纯词髽?biāo)劃過(guò)的效果：

看到變化啦，嗯，圖上沒(méi)有鼠標(biāo)指針，但也猜得出來(lái)，我的鼠標(biāo)放在下載上他的背景色發(fā)生了變化。你看他的文字大小啊、顏色啊，什么什么的其他東東是不是都沒(méi)有變化？所以 :hover 是基于元素以前的樣式進(jìn)行變化的，我們只要把變化的內(nèi)容寫(xiě)上就好了，相同的部分不需要重復(fù)的去定義。

原來(lái)鼠標(biāo)滑過(guò)發(fā)生變化的代碼竟然這么簡(jiǎn)單，曾經(jīng)我們還當(dāng)做一個(gè)什么什么的特效來(lái)看的??！那么我們就再來(lái)點(diǎn)稍微復(fù)雜哦，看我改寫(xiě)成如下的樣式：

#nav .nav-item a:hover {
    height: 40px;
    padding-top: 5px;
    line-height: 40px;
    background: #DDD;
    border-bottom: 5px solid #999;
}

我一下修改了好多內(nèi)容，看看真復(fù)雜！但是仔細(xì)分析一下也就明白了，高度改成了 40px，所以 line-height 也改成 40px，這是為了垂直居中所做的相應(yīng)的修改，而剛才高度上減少的 10px 則通過(guò)頂部?jī)?nèi)補(bǔ) 5px，底部增加 5px 的邊框補(bǔ)回來(lái)了。因?yàn)樯舷率菍?duì)稱著添加的，所以文字依然垂直居中（看起來(lái)似乎沒(méi)有變化），然后內(nèi)補(bǔ)和邊框都算作元素的范圍之內(nèi)（快遞箱以及里面的填充物都算作整個(gè)箱子的范圍之內(nèi)），所以也不會(huì)影響 a 本身已經(jīng)設(shè)定好的點(diǎn)擊范圍。

我們看看劃過(guò)效果：

就是醬紫的效果了，怎么樣？大家根據(jù)自己的理解修改上面的屬性試試看有什么變化？

然后再說(shuō)幾個(gè) 鏈接元素常用的偽類：

:active 當(dāng)前鼠標(biāo)點(diǎn)下鏈接的時(shí)候

hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)

link 當(dāng)鏈接還未被訪問(wèn)過(guò)時(shí)

visited 當(dāng)鏈接被訪問(wèn)過(guò)之后

現(xiàn)在我們也很少用這么多，設(shè)置一兩種就不少了，比如導(dǎo)航部分的鏈接，設(shè)置一個(gè) :hover 和一個(gè) :active 就差不多，這個(gè)幾個(gè)的用法一樣，大家可以自行進(jìn)行各種慘無(wú)人道的變態(tài)實(shí)驗(yàn)，以便使自己確實(shí)掌握這些偽類。

至此我們對(duì)導(dǎo)航條的美化也算簡(jiǎn)單的告一段落，如果你愿意，可以開(kāi)動(dòng)腦筋看看還可以做些什么樣的美化，雖然我們現(xiàn)在學(xué)的 CSS 屬性不是很多，但是通過(guò)有機(jī)的結(jié)合以就可以做出很多養(yǎng)眼的效果，希望大家多動(dòng)手練習(xí)一下哦～

那么是不是我們的導(dǎo)航到此就算做完了呢？不是的，其實(shí)還有一個(gè)小小的問(wèn)題沒(méi)有解決。我們把瀏覽器窗口調(diào)小看一下哦～

你說(shuō)，哎呀，怎么都出去？其實(shí)不是都出去了，而是根本就不在里面。不信你把 #nav 的高度去掉試試看，他的高度就會(huì)變?yōu)?0 ，根本沒(méi)有被里面的元素?fù)纹饋?lái)。為什么會(huì)這樣呢？因?yàn)槔锩娴倪@些元素都進(jìn)行了浮動(dòng)，但是 #nav 并沒(méi)有浮動(dòng)。

浮動(dòng)的和沒(méi)有浮動(dòng)的元素仿佛是不在一個(gè)頻道的兩群人，總覺(jué)的他們相互之間對(duì)不上頻率，那怎么對(duì)上頻率呢？?jī)蓚€(gè)辦法：第一、浮動(dòng)到底，要是所有的元素都浮動(dòng)那自然就在一個(gè)頻率上了，但是想想都覺(jué)得超麻煩；第二、清除浮動(dòng)，就是在浮動(dòng)結(jié)束之后清除一下，表示我浮動(dòng)完了，咱們還是好朋友哦，不許再鬧別扭啦，乖～

所以我們用完浮動(dòng)之后一定要記得清除浮動(dòng)，清除浮動(dòng)的方法有很多，但是我們現(xiàn)在先來(lái)講一種，是最容易理解的哦。

首先 #logo 和后面兩個(gè) ul ，以及 ul 里面的 li 都已經(jīng)進(jìn)行了浮動(dòng)，那么在這樣的局部范圍內(nèi)也算是全部浮動(dòng)，于是他們之間相安無(wú)事，問(wèn)題出在這些浮動(dòng)的元素和外部沒(méi)有浮動(dòng)的元素 #nav 之間，所以我們要在 #nav 的內(nèi)部這些浮動(dòng)元素之后加一個(gè)： <div class="clear"></div>,

于是變成了：

<div id="nav">
    <div id="logo">
        <a href="#">代碼能有多難？</a>
    </div>
    <ul id="nav-items">
        <li class="nav-item"><a href="#">首頁(yè)</a></li>
        <li class="nav-item"><a href="#download">下載</a></li>
        <li class="nav-item"><a href="#feature">特點(diǎn)</a></li>
        <li class="nav-item"><a href="#about">關(guān)于</a></li>
    </ul>
    <ul id="nav-items-r">
        <li class="nav-item"><a href="#signin">登錄</a></li>
        <li class="nav-item"><a href="#signup">注冊(cè)</a></li>
    </ul>
    <div class="clear"></div>
</div>

然后在 CSS 里面寫(xiě)上：

.clear {
    clear: both;
}

這樣就可以了，為什么要這么寫(xiě)呢，這樣定義以后，下次我們需要清除浮動(dòng)的話，只需要復(fù)制 <div class="clear"></div> 過(guò)去就可以了，定義一次，可以多處使用，也算是很方便的，當(dāng)然這種辦法會(huì)多出一個(gè)空白的 div，雖然不影響界面，但是強(qiáng)迫癥會(huì)比較難受，額……這個(gè)我們以后再講其他辦法。（強(qiáng)迫癥別殺我……）

好了，現(xiàn)在我們?nèi)サ?#nav 的高度看一下效果。

這樣就不會(huì)出來(lái)了……只是瀏覽器窗口較小的時(shí)候好難看………我們下節(jié)課再解決……（不要追殺我呀?。?/p>

本章學(xué)習(xí)卡片：卡片 24

本章代碼下載：本章代碼

本書(shū)是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書(shū)將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書(shū)： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me