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

yedehua

浏览: 115743 次
性别:
来自: 东莞

最近访客更多访客>>

wangyy

maoweiwer

qq1716768211

zz123321123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS XHTML HTML XML 脚本

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

　　需要一个图片文件：

　　网页代码：

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>

<?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>

　　最终效果：