青海文学期刊投稿:CSS实例(六)：实现网页固定大小三态图形按钮简单方法

来源：百度文库 编辑：九乡新闻网 时间：2024/04/27 16:05:34
今天想出一种三态图形按钮实现方式，制作超简单，文字可以随意修改，各种浏览器表现一致，不含任何JS脚本。

　　需要一个图片文件：




　　网页代码：
Html代码  
  1.   
  2.   
  3.   
  4.   
  5.   
  6. first page  
  7.   
  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, http://wallimn.iteye.com  
  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.   
  62.   
  63.   
  64.       
  65.       
  66.       
  67.       
  68.   
  69.   
  70.   


　　 最终效果：




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

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

CSS实例(六)：实现网页固定大小三态图形按钮简单方法 纯CSS打造漂亮的按钮样式 - 按钮链接 - 网页特效代码 CSS布局实例：仅一张图片实现圆角 CSS JS实现的选项卡效果(html组件)-网页陶吧-CSS-天极Yesky 简单实现网页图片无缝滚动代码 固定MainFrame的大小 DIV+CSS网页布局常用的方法与技巧 五种方法让CSS实现垂直居中 CSS按钮样式大全(经典) 《控制网页文件大小通过精简CSS实现》干群共产主义国家名牌大学义务教育编号2011020804 CSS柱状图的实现 简单实现网页图片无缝滚动代码12 简单实现网页图片无缝滚动代码111 简单实现网页图片无缝滚动代码ads 网页设计图形 CSS圆角边框纯CSS制作-CSS布局实例 解除网页锁定，复制网页文字简单方法 Fireworks简单方法打造网页“闪字”动画 用gif透明图片实现图片圆角效果实例—DIV+CSS实例—gif_背景透明_圆角—标准之路... 六条简单方法帮您活到百岁 CSS:font-size-网页设计 net下动态变换css样式或切换网页皮肤方法整理 自绘按钮的实现 Dreamweaver网页制作实例