圖片翻轉(zhuǎn)菜單技術(shù)研究
更新時(shí)間：2006年09月25日 00:00:00 作者：
Fastcompany是simplebits.com站長的全CSS+Div布局作品.
網(wǎng)站導(dǎo)航采用的是CSS圖片翻轉(zhuǎn).不用多想肯定是利用a:link和a:hover等不同狀態(tài)下利用顯示不同的background-images制作而成.我認(rèn)為作者的獨(dú)到之處在于CSS中的a:hover...
#nav a:hover {background-position: 0 -20px;}
#nav a:active {background-position: 0 -40px;}
導(dǎo)航的背景圖片在a:link和a:hover,a:active的三種狀態(tài)下不是三張而是用了同一張圖片~通過css對背景縱向定位使得按鈕改變.這樣做省去了對每個(gè)按鈕背景圖片的單個(gè)定義,節(jié)省了大量代碼,圖片變少了,下載起來更快,更易管理.
按鈕中不單單是一個(gè)背景圖片,里面也有導(dǎo)航文字.
<li id="thome"><a class="selected">Home</a></li>
用css將文字隱藏
#nav a {padding: 20px 0 0 0;overflow: hidden;}
既然隱藏了為什么還要寫文字呢?目的在于當(dāng)使用純文本瀏覽器(或不引用任何CSS時(shí))也能夠看到導(dǎo)航鏈接.
網(wǎng)站導(dǎo)航采用的是CSS圖片翻轉(zhuǎn).不用多想肯定是利用a:link和a:hover等不同狀態(tài)下利用顯示不同的background-images制作而成.我認(rèn)為作者的獨(dú)到之處在于CSS中的a:hover...
#nav a:hover {background-position: 0 -20px;}
#nav a:active {background-position: 0 -40px;}
導(dǎo)航的背景圖片在a:link和a:hover,a:active的三種狀態(tài)下不是三張而是用了同一張圖片~通過css對背景縱向定位使得按鈕改變.這樣做省去了對每個(gè)按鈕背景圖片的單個(gè)定義,節(jié)省了大量代碼,圖片變少了,下載起來更快,更易管理.
按鈕中不單單是一個(gè)背景圖片,里面也有導(dǎo)航文字.
<li id="thome"><a class="selected">Home</a></li>
用css將文字隱藏
#nav a {padding: 20px 0 0 0;overflow: hidden;}
既然隱藏了為什么還要寫文字呢?目的在于當(dāng)使用純文本瀏覽器(或不引用任何CSS時(shí))也能夠看到導(dǎo)航鏈接.
您可能感興趣的文章:
相關(guān)文章
小三角的做法與使用...2006-11-11
實(shí)用的標(biāo)簽效果...2006-10-10
marquee的詳細(xì)用法解析...2006-08-08
給圖片在博客中添加濾鏡效果...2006-09-09
最近的工作中，遇到不少問題，其中一個(gè)問題我覺得是最重要的，那就是css的書寫順序,本文整理了一些，需要的朋友可以參考下2006-09-09
標(biāo)準(zhǔn)化你的網(wǎng)頁...2006-09-09
動(dòng)態(tài)CSS站點(diǎn)教程：多個(gè)頁面樣式提供瀏覽者選擇
動(dòng)態(tài)CSS站點(diǎn)教程：多個(gè)頁面樣式提供瀏覽者選擇...2006-09-09
_blank開新窗口不符合標(biāo)準(zhǔn)?...2006-08-08
兼容各個(gè)瀏覽器的技巧...2006-09-09
認(rèn)識(shí)CSS中absolute與relative
認(rèn)識(shí)CSS中absolute與relative...2006-09-09