然后我們的問(wèn)題是：這貨怎么一直這么顯示著，這不是我想要的結(jié)果啊，要是可以鼠標(biāo)劃到上面才顯示，鼠標(biāo)離開(kāi)就隱藏有多好？當(dāng)然了，這種效果幾乎是各個(gè)網(wǎng)站所必備的。

第一步：我先把它隱藏掉，省得礙眼。

這個(gè)最簡(jiǎn)單了，給 #nav>ul>li>ul 選擇器里面加一個(gè)屬性就好，display:none;，意思就是顯示方式是不顯示。好了，不礙眼了，但是，他會(huì)一直隱藏，那就沒(méi)什么作用了，所以：

第二步：鼠標(biāo)滑過(guò)顯示。我們說(shuō)過(guò)鼠標(biāo)滑過(guò)這個(gè)狀態(tài)使用偽類 :hover 來(lái)表示。所以其實(shí)我們?nèi)缦略O(shè)置即可：

#nav>ul>li:hover>ul {
    display: block;
}

這里要理解的一個(gè)問(wèn)題是，我們把鼠標(biāo)劃到哪個(gè)元素上，而顯示出來(lái)的又是哪個(gè)元素？那么這里是當(dāng)鼠標(biāo)放在 #nav>ul>li 上面的時(shí)候，它里面的 ul 被顯示出來(lái)。

那么我們預(yù)期的效果就達(dá)到了，大家要自己研究一下源碼，定位這個(gè)問(wèn)題在 CSS 里面是個(gè)很重要的問(wèn)題。

然后我們開(kāi)始下一個(gè)練習(xí)，給這個(gè)頁(yè)面右下添加一個(gè)返回首頁(yè)的按鈕，就像很多網(wǎng)站都有的那樣。大家應(yīng)該都知道什么樣子，他不隨頁(yè)面滾動(dòng)，一直處于頁(yè)面的右下角。

像這種浮于頁(yè)面之上的東西，他并不占據(jù)什么位置。也很難說(shuō)他在邏輯上屬于什么元素。而且它的重要性也不是很高，只是增加用戶體驗(yàn)，而不是用戶打開(kāi)頁(yè)面所第一預(yù)期的內(nèi)容。所以這種代碼一般放在頁(yè)尾，就是 </body> 標(biāo)簽的前面。

那么這個(gè)按鈕寫(xiě)起來(lái)很簡(jiǎn)單的：

<div id="go-top"><a href="#">返回<br>頂部</a></div>

簡(jiǎn)單吧，一個(gè)鏈接而已，我們知道 # 可以鏈接到錨點(diǎn)，但是后面如果沒(méi)有錨點(diǎn)名稱，只是一個(gè)簡(jiǎn)單的 #，那就是鏈接到當(dāng)前頁(yè)面的頂部。其實(shí)說(shuō)是滾動(dòng)上去更貼切一些。里面文字什么的我就不用解釋了吧。

然后給他設(shè)置樣式：

#go-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    border: 1px solid #999;
    background: #EEE;
    font-size: 12px;
    text-align: center;
}
#go-top a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

這個(gè)太簡(jiǎn)單，不講了。自己動(dòng)手改改參數(shù)，或者把文字換成圖片玩吧。下節(jié)課開(kāi)始我們要給這個(gè)頁(yè)面再加一些高大上的內(nèi)容，哼唧~

效果見(jiàn)下圖的右下角。

本章代碼下載：本章代碼

本書(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