鍍金池/ 教程/ 產品經理/ 第四十二章 定位實例(三)
第四十一章 定位實例(二)
第十四章 從 div 扯開去
第四十三章 定位實例(四)
第四十五章 無聊的寫個小游戲吧
第十七章 導航條(二)
第十三章 神一樣的 CSS
第二十三章 導航條(八)
第四十章 定位實例(一)
第五十九章 見證奇跡
第三十五章 隨便聊聊
第十九章 導航條(四)
第四十四章 定位實例(五)
第三十六章 定位(一)
第三十九章 坐標系
第三十四章 一些補遺
第五十八章 各就各位,預備~~
第二十七章 首屏大海報(一)
第二十六章 CSS 書寫規(guī)范
第十一章 一起寫個百度
第三章 幾個小故事
第七章 認識鏈接
前言
第五十五章 苛刻至極!
第三十三章 一個頁尾
第二十二章 導航條(七)
第四十七章 JavaScript Start
第五十章 最簡單的邏輯判斷
第五十三章 一百遍啊一百遍!
第四章 做點準備工作
第一章 開場小談
第六章 開始寫點東西
第五十六章 一套工具
第四十二章 定位實例(三)
第五十二章 愛妃,朕還宣你!
第二十五章 導航條(十)
第五章 一個模板
第二章 扯扯學習方法
第十八章 導航條(三)
第四十六章 響應式
第四十八章 變量
第十六章 導航條(一)
第三十八章 定位(三)
第二十九章 首屏大海報(三)
第四十九章 運算符
第九章 來吧,表哥(表格)!
第三十一章 還是海報
第十章 表格布局原理
第三十章 首屏大海報(四)
第十二章 相對地址
第二十章 導航條(五)
第五十七章 助理!麻煩過來一下~
第三十二章 一些格子
第五十一章 朕宣你!
第五十四章 一萬遍啊一萬遍!
第二十八章 首屏大海報(二)
第十五章 開始征途
第三十七章 定位(二)
第六十章 開始玩玩
第二十一章 導航條(六)
第八章 半個標簽
第二十四章 導航條(九)

第四十二章 定位實例(三)

然后我們的問題是:這貨怎么一直這么顯示著,這不是我想要的結果啊,要是可以鼠標劃到上面才顯示,鼠標離開就隱藏有多好?當然了,這種效果幾乎是各個網站所必備的。

第一步:我先把它隱藏掉,省得礙眼。

這個最簡單了,給 #nav>ul>li>ul 選擇器里面加一個屬性就好,display:none;,意思就是顯示方式是不顯示。好了,不礙眼了,但是,他會一直隱藏,那就沒什么作用了,所以:

第二步:鼠標滑過顯示。我們說過鼠標滑過這個狀態(tài)使用偽類 :hover 來表示。所以其實我們如下設置即可:

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

這里要理解的一個問題是,我們把鼠標劃到哪個元素上,而顯示出來的又是哪個元素?那么這里是當鼠標放在 #nav>ul>li 上面的時候,它里面的 ul 被顯示出來。

那么我們預期的效果就達到了,大家要自己研究一下源碼,定位這個問題在 CSS 里面是個很重要的問題。

然后我們開始下一個練習,給這個頁面右下添加一個返回首頁的按鈕,就像很多網站都有的那樣。大家應該都知道什么樣子,他不隨頁面滾動,一直處于頁面的右下角。

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

那么這個按鈕寫起來很簡單的:

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

簡單吧,一個鏈接而已,我們知道 # 可以鏈接到錨點,但是后面如果沒有錨點名稱,只是一個簡單的 #,那就是鏈接到當前頁面的頂部。其實說是滾動上去更貼切一些。里面文字什么的我就不用解釋了吧。

然后給他設置樣式:

#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;
}

這個太簡單,不講了。自己動手改改參數,或者把文字換成圖片玩吧。下節(jié)課開始我們要給這個頁面再加一些高大上的內容,哼唧~

效果見下圖的右下角。

本章代碼下載:本章代碼

本書是收費的,不過交費憑自覺。價格定義為每人請我喝一杯咖啡(哪種品質的咖啡隨意),支付寶賬號:

alay9999@163.com (劉源)

為了讓大家閱讀方便,本書將在如下站點發(fā)布,但最終內容以主站為準:

未經本人許可,禁止任何形式轉載。相關事宜請聯系: dms@zji.me