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

最新推荐文章于 2020-06-27 03:09:08 发布

yedehua

最新推荐文章于 2020-06-27 03:09:08 发布

阅读量163

点赞数

分类专栏： CSS 文章标签： CSS XHTML HTML XML 脚本

本文链接：https://blog.csdn.net/yedehua/article/details/83713141

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天新想出一种三态图形按钮实现方式，制作超简单，文字可以随意修改，各种浏览器表现一致，不含任何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>

　　最终效果：

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

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

yedehua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现网页固定大小三态图形按钮简单方法

今天新想出一种三态图形按钮实现方式，制作超简单，文字可以随意修改，各种浏览器表现一致，不含任何JS脚本。　　需要一个图片文件：　　网页代码：Html代码 &lt;?xml version="1.0" encoding="GB2312" ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...
复制链接

扫一扫