首頁 > web前端 > css教學 > 圖片翻轉選單技術研究_CSS/HTML

圖片翻轉選單技術研究_CSS/HTML

WBOY
發布: 2016-05-16 12:11:45
原創
1711 人瀏覽過

Fastcompany是simplebits.com站長的全CSS+Div佈局作品.

網站導航採用的是CSS圖片翻轉.不用多想肯定是利用a:link和a:hover等不同狀態下利用顯示不同的background-images製作而成.我認為作者的獨到之處在於CSS中的a:hover...

#nav a:hover {background-position: 0 -20px;}
# nav a:active {background-position: 0 -40px;}




導航的背景圖片在a:link和a:hover,a:active的三種狀態下不是三張而是用了同一張圖片~透過css對背景縱向定位使得按鈕改變.這樣做省去了對每個按鈕背景圖片的單一定義,節省了大量代碼,圖片變少了,下載起來更快,更容易管理.

按鈕中不單單是一個背景圖片,裡面也有導航文字.


  • Home


  • Home




    用css將文字隱藏


    #nav a {padding: 20px 0 0 0;overflow: hidden;}既然隱藏了為什麼既然還要隱藏了為什麼既然還要寫文字呢?目的在於當使用純文字瀏覽器(或不引用任何CSS時)也能夠看到導航連結.
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板