页面导航：首页 → 网络编程 → CSS/HTML → 经验交流 → 正文内容 CSS按钮

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

发布：dxy 字体：[增加减小] 类型：转载

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

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

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

另外一个导航按钮

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

Tags：CSS 按钮效果

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：解决ie动态修改link样式，import css不刷新的问题
下一篇文章：CSS控制图片大小-适应宽度

·在百度中搜索关于“用CSS实现的一张图完成的按钮效果”相关内容
·在谷歌中搜索关于“用CSS实现的一张图完成的按钮效果”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行