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基础及用法
前言对于一个网页来说,css是网页的门面,对于一个前端初学者来说,css更是他们必经之路,通过这篇文章我就来带大...
[阅读全文]
-
-
-
-
-
-
-
-
-
网友评论