国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

圖片翻轉(zhuǎn)菜單技術(shù)研究

2020-10-23 18:52:09
字體：大 中 小
供稿：網(wǎng)友
Fastcompany是simplebits.com站長的全CSS+Div布局作品.

網(wǎng)站導航采用的是CSS圖片翻轉(zhuǎn).不用多想肯定是利用a:link和a:hover等不同狀態(tài)下利用顯示不同的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的三種狀態(tài)下不是三張而是用了同一張圖片~通過css對背景縱向定位使得按鈕改變.這樣做省去了對每個按鈕背景圖片的單個定義,節(jié)省了大量代碼,圖片變少了,下載起來更快,更易管理.

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


<li id="thome"><a class="selected">Home</a></li>


用css將文字隱藏


#nav a {padding: 20px 0 0 0;overflow: hidden;}


既然隱藏了為什么還要寫文字呢?目的在于當使用純文本瀏覽器(或不引用任何CSS時)也能夠看到導航鏈接.

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板： 合阳县| 固安县| 青铜峡市| 滨州市| 文水县| 神农架林区| 田东县| 登封市| 镇原县| 翼城县| 吐鲁番市| 三亚市| 怀安县| 辽宁省| 伊金霍洛旗| 沽源县| 札达县| 陆河县| 东安县| 临江市| 维西| 贡觉县| 长春市| 和政县| 修水县| 永年县| 龙口市| 天门市| 山阳县| 梨树县| 读书| 西宁市| 绥江县| 绥阳县| 阳朔县| 星子县| 古蔺县| 乌拉特前旗| 远安县| 远安县| 黄冈市|