繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 图片翻转菜单技术研究
- CSS样式表
- line-height使文本居中的3像素bug问题
- IE8.0Beta比较不错的功能:WebSlices
- IE8、IE7、IE6、FF简单的CSS HACK测试
- Web前端开发的Firefox插件
- CSS3教程：background-clip和background-origin
- CSS教程:使用ul进行网页的多列布局
- CSS盒模型制定网页的宽度和高度的原理
- CSS:何制作一个向各个方向延展box?
- CSS高级技巧:CSS Sprites
- CSS高级技巧:图片替换
- CSS高级技巧:文字环绕图片
- CSS样式表教程:screen媒体类型的作用
- css教程：美化网页段落的排版
- 网页注册表单的网页设计技巧
- CSS控制表格文字样式的研究
- dl,dt,dd,ul,li,ol区别及应用
- 英文教程：鼠标悬停（hover）效果
- CSS制作的三款漂亮的网页表单
- CSS教程：行高line-height属性(2)
- CSS：闭合元素和浮动元素的差别
CSS样式表 中的 图片翻转菜单技术研究
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 136 ::
收藏到网摘: n/a
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时)也能够看到导航链接.
评论 (0) All
