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

   声明:基本知识,初级应用。

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

  需要一个图片文件:




  网页代码:
<?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>


   最终效果:




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

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

你可能感兴趣的:(XHTML,css,浏览器,脚本,idea)