职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 623|回复: 10

CSS实例(六):实现网页固定大小三态图形按钮简单方法

[复制链接]
醉倚西风 发表于 2011-6-12 10:02 | 显示全部楼层 |阅读模式
  声明:基本知识,初级应用。

  今天想出一种三态图形按钮实现方式,制作超简单,文字可以随意修改,各种浏览器表现一致,不含任何JS脚本。

  需要一个图片文件:




  网页代码:
Html代码
  1. <?xml version="1.0" encoding="GB2312" ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />  
  6. <title>first page</title>  
  7. <style type="text/css">  
  8. /*   
  9. bib:big image button   
  10. sib:small image button   
  11. lib:long image button   
  12. lsib:long button with search image   
  13. by wallimn, [url]http://wallimn.iteye.com[/url]   
  14. */   
  15. .bib,.sib,.lib,.lsib{   
  16.     border-width:0;   
  17.     vertical-align:middle;   
  18.     background-color:transparent;   
  19.     margin:0;   
  20.     overflow:visible;   
  21.     background-repeat:no-repeat;   
  22.     background-image:url(buttons.gif) ;   
  23. }   
  24. .bib{   
  25.     width:93px;   
  26.     height:30px;   
  27.     line-height:30px;   
  28.     background-position: 0 -132px;   
  29. }   
  30. .bib:hover{   
  31.     background-position:0 -162px;   
  32. }   
  33. .sib{   
  34.     width:44px;   
  35.     height:22px;   
  36.     line-height:22px;   
  37.     background-position: 0 0;   
  38. }   
  39. .sib:hover{   
  40.     background-position:0 -22px;   
  41. }   
  42. .lib{   
  43.     width:66px;   
  44.     height:22px;   
  45.     line-height:22px;   
  46.     background-position: 0 -44px;   
  47. }   
  48. .lib:hover{   
  49.     background-position:0 -66px;   
  50. }   
  51. .lsib{   
  52.     width:66px;   
  53.     height:22px;   
  54.     line-height:22px;   
  55.     background-position: 0 -88px;   
  56. }   
  57. .lsib:hover{   
  58.     background-position:0 -110px;   
  59. }   
  60. /*end of button style*/   
  61. </style>  
  62. </head>  
  63. <body>  
  64.     <input type="button" value="按钮" class="sib" />  
  65.     <input type="button" value="长长按钮" class="lib" />  
  66.     <input type="button" value="大按钮" class="bib" />  
  67.     <input type="button" value="搜索" class="lsib" />  
  68.   
  69. </body>  
  70. </html>  

  71. <?xml version="1.0" encoding="GB2312" ?>
  72. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  73. <html xmlns="http://www.w3.org/1999/xhtml">
  74. <head>
  75. <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
  76. <title>first page</title>
  77. <style type="text/css">
  78. /*
  79. bib:big image button
  80. sib:small image button
  81. lib:long image button
  82. lsib:long button with search image
  83. by wallimn, [url]http://wallimn.iteye.com[/url]
  84. */
  85. .bib,.sib,.lib,.lsib{
  86.         border-width:0;
  87.         vertical-align:middle;
  88.         background-color:transparent;
  89.         margin:0;
  90.         overflow:visible;
  91.         background-repeat:no-repeat;
  92.         background-image:url(buttons.gif) ;       
  93. }
  94. .bib{
  95.         width:93px;
  96.         height:30px;
  97.         line-height:30px;
  98.         background-position: 0 -132px;
  99. }
  100. .bib:hover{
  101.         background-position:0 -162px;
  102. }
  103. .sib{
  104.         width:44px;
  105.         height:22px;
  106.         line-height:22px;
  107.         background-position: 0 0;
  108. }
  109. .sib:hover{
  110.         background-position:0 -22px;
  111. }
  112. .lib{
  113.         width:66px;
  114.         height:22px;
  115.         line-height:22px;
  116.         background-position: 0 -44px;
  117. }
  118. .lib:hover{
  119.         background-position:0 -66px;
  120. }
  121. .lsib{
  122.         width:66px;
  123.         height:22px;
  124.         line-height:22px;
  125.         background-position: 0 -88px;
  126. }
  127. .lsib:hover{
  128.         background-position:0 -110px;
  129. }
  130. /*end of button style*/
  131. </style>
  132. </head>
  133. <body>
  134.         <input type="button" value="按钮" class="sib" />
  135.         <input type="button" value="长长按钮" class="lib" />
  136.         <input type="button" value="大按钮" class="bib" />
  137.         <input type="button" value="搜索" class="lsib" />

  138. </body>
  139. </html>
复制代码
  有个限制,按钮的大小固定成几种尺寸模式,一般来讲,网页上的图形按钮应该也就几种大小,不会有各种各样大小的按钮。固定按钮大小,可以获得非常简洁的代码。

  IE6不支持hover伪类,很让人郁闷。不过不影响外观。


找不到我 发表于 2011-6-12 10:03 | 显示全部楼层
如果文字太长呢,如有10个字符。

Jethro 发表于 2011-6-12 10:03 | 显示全部楼层
呵呵,总会有个预期吧。太长了可以用什么“滑动门”技术,一般把代码弄得很难看。我宁愿把它定死

无处不在 发表于 2011-6-12 10:03 | 显示全部楼层
没看出来,新 是指什么。。。lz不会是刚接触css的吧。。。

叫我小乖 发表于 2011-6-12 10:03 | 显示全部楼层
好吧。把新字去掉。

曾经的小孩 发表于 2011-6-12 10:03 | 显示全部楼层
...这个也太新手了

能文能武 发表于 2011-6-12 10:04 | 显示全部楼层

呵呵,总会有个预期吧。太长了可以用什么“滑动门”技术,一般把代码弄得很难看。我宁愿把它定死

你用的貌似就是滑动门呃~~~~

芷馨 发表于 2011-6-12 10:04 | 显示全部楼层
看不明白


木已 发表于 2011-6-12 10:04 | 显示全部楼层
呵呵不错 鼓励一下

能文能武 发表于 2011-6-12 10:04 | 显示全部楼层
楼主干的很不错,我收下了。




 楼主| 醉倚西风 发表于 2011-7-29 10:05 | 显示全部楼层
写得好啊 估计有马甲
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 20:20 , Processed in 0.149291 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表