用CSS实现的一张图完成的按钮效果

更新时间：2008年05月15日 20:12:19 作者：

首先是在www.126.com上发现的,感觉很好用很奥妙,值得收藏和分享通过css来读取图片坐标系实现局部背景图

这个是网易126上的登陆按钮

另外一个导航按钮

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用CSS实现的一张图完成的导航条</title> <style> ul,li{ list-style:none; float:left;} body{ font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center;} #info li{ margin-left:4px; margin-top:15px;} #info a {display:block;text-align:center; padding-left:15px; padding-top:2px;padding-bottom:1px;background-image:  url(/upload/20080515201218783.GIF); background-repeat: no-repeat;color: #000; width:47px; cursor:hand; text-decoration: none;} #job a:link,#job a:visited{background-position: -62px 0px;} #eve a:link,#eve a:visited{background-position: -124px 0px;} #oth a:link,#oth a:visited{background-position: -186px 0px;} #car a:hover ,#car a:active {background-position: 0px -22px; color:#fff;} #job a:hover ,#car a:active {background-position: -62px -22px; color:#fff;} #eve a:hover ,#car a:active {background-position: -124px -22px; color:#fff;} #oth a:hover ,#car a:active {background-position: -186px -22px; color:#fff;} </style> </head> <body>  <div id="info">  <ul>   <li id="car"><a href="#" target="_blank"><span>  游 戏</span></a></li>   <li id="job"><a href="#" target="_blank"><span>  娱 乐</span></a></li>   <li id="eve"><a href="#" target="_blank"><span>  菜 单</span></a></li>   <li id="oth"><a href="#" target="_blank"><span>  好 玩</span></a></li>     </ul>  </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

HTML/XHTML模板
HTML/XHTML模板...
2007-01-01
用CSS构建iframe效果代码
用CSS构建iframe效果代码...
2007-06-06
Javascript的匿名函数讲解
匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。这在给一个不是很熟悉的页面增加Javascript时非常有效，也很优美。
2008-05-05
Internet Explorer 8 beta 中文版与IE7共存的解决方法
今天安装了IE8，去微软网站下载的时候发现已经提供中文版的beta了，哈哈发现IE8没有传说中的那么妖魔化，不错的浏览器，新增功能不错。
2008-05-05
css利用A标签的背景可能作出很有意思的效果
css利用A标签的背景可能作出很有意思的效果...
2007-12-12
IE6网页神奇BUG
今天遇到一个神奇的问题：下面是代码代码在IE7中正常显示，IE6什么也不显示。
2008-05-05
提高CSS文件可维护性的五种方法总结
当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。
2008-05-05
Chrome的hack写法以及CSS的支持程度图示
Chrome的CSS支持程度引用自 Estelle
2008-09-09
Div+Css(+Js)菜单代码及制作工具
Div+Css(+Js)菜单代码及制作工具...
2006-12-12
css多行多列的新闻模式
css多行多列的实现一般要注意a的浮动.需要注意的:li的清除浮动
2008-05-05