CSS:图片翻转菜单研究

时间:2008-10-06 10:42:21  来源:第二电脑网上收集  作者:

  第二电脑网导读: a:hover {background-position: 0 -20px;}#nav a:active {background-position: 0 -40px;}导航的背景图片在a:link和a:hover,a:active的三种状态下不是三张而是用了同一张图片~通过css对背景纵向定位使得按钮改变.这样做省去了对每个按钮背景图片的单个定义,节省了大量代码,图片变少了,下载起来更快,更易管理.按钮中不单单是一个背...
  正文: 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对背景纵向定位使得按钮改变.这样做省去了对每个按钮背景图片的单个定义,节省了大量代码,图片变少了,下载起来更快,更易管理.

按钮中不单单是一个背景图片,里面也有导航文字.


<li id="thome"><a href="http://www.fastcompany.com/" class="selected">Home</a></li>


用css将文字隐藏


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


既然隐藏了为什么还要写文字呢?目的在于当使用纯文本浏览器(或不引用任何CSS时)也能够看到导航链接.

CSS:图片翻转菜单研究》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/1835.html


关键字:

关于《CSS:图片翻转菜单研究》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td