CSS实现网页固定大小三态图形按钮简单方法

今天新想出一种三态图形按钮实现方式,制作超简单,文字可以随意修改,各种浏览器表现一致,不含任何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, 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. </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>  
<?xml version="1.0" encoding="GB2312" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>first page</title>
<style type="text/css">
/*
bib:big image button
sib:small image button
lib:long image button
lsib:long button with search image
by wallimn, http://wallimn.iteye.com
*/
.bib,.sib,.lib,.lsib{
	border-width:0;
	vertical-align:middle;
	background-color:transparent;
	margin:0;
	overflow:visible;
	background-repeat:no-repeat;
	background-image:url(buttons.gif) ;	
}
.bib{
	width:93px;
	height:30px;
	line-height:30px;
	background-position: 0 -132px;
}
.bib:hover{
	background-position:0 -162px;
}
.sib{
	width:44px;
	height:22px;
	line-height:22px;
	background-position: 0 0;
}
.sib:hover{
	background-position:0 -22px;
}
.lib{
	width:66px;
	height:22px;
	line-height:22px;
	background-position: 0 -44px;
}
.lib:hover{
	background-position:0 -66px;
}
.lsib{
	width:66px;
	height:22px;
	line-height:22px;
	background-position: 0 -88px;
}
.lsib:hover{
	background-position:0 -110px;
}
/*end of button style*/
</style>
</head>
<body>
	<input type="button" value="按钮" class="sib" />
	<input type="button" value="长长按钮" class="lib" />
	<input type="button" value="大按钮" class="bib" />
	<input type="button" value="搜索" class="lsib" />

</body>
</html>



  最终效果:





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

 

此文转自: http://www.iteye.com/topic/768298

你可能感兴趣的:(html,xml,XHTML,css,脚本)