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

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伪类，很让人郁闷。不过不影响外观。

1 楼 jorneyR 2010-09-20

如果文字太长呢，如有10个字符。

2 楼 wallimn 2010-09-20

呵呵，总会有个预期吧。太长了可以用什么“滑动门”技术，一般把代码弄得很难看。我宁愿把它定死

3 楼 caiceclb 2010-09-23

没看出来，新是指什么。。。lz不会是刚接触css的吧。。。

4 楼 wallimn 2010-09-23

好吧。把新字去掉。

5 楼 elementstorm 2010-09-24

...这个也太新手了

6 楼 ccyingfu 2010-09-25

wallimn 写道

呵呵，总会有个预期吧。太长了可以用什么“滑动门”技术，一般把代码弄得很难看。我宁愿把它定死

你用的貌似就是滑动门呃~~~~

7 楼 hetaohappy1 2010-09-26

看不明白

8 楼 yeswoyaofei 2010-09-26

呵呵不错鼓励一下

9 楼 jiorry 2010-09-27

楼主干的很不错，我收下了。

elementstorm 写道

...这个也太新手了

elementstorm朋友，你可以这样说：“楼主干的很不错，不过这不算太新的方法。楼主可以再进一步开发下去，做出更好的插件来。”

说实话elementstorm，我很鄙视你这样的说法。我相信有很大一部分人都不喜欢你这样的。

10 楼 wallimn 2010-09-27

好。感谢支持。

11 楼 jordan_micle 2010-09-28

支持楼主，je就需要这样的人，这样的帖。

12 楼 firemmet 2010-09-30

1.使用简写。例：
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,.sib,.lib,.lsib{
    overflow:visible;
    margin:0;
    background: url(buttons.gif) no-repeat 0 0;
    border: 0 none;
    vertical-align:middle;
}
2.兼容性，ie6（看下hover的兼容）。现在在国内，ie6还占据着浏览器的半边天，应尽可能的多注意下。
3.可维护性。图标的需求也会改变的，会有小的调整，看下实例中的图片，若是其中某个图标需要增大一两个像素，恐怕就需要重新切图合图，还得修改css，增加很多无谓的工作量。因此建议两个图标之间留一定的缝隙。
4.按钮可以尝试用下button标签

ps：lz做的很棒了 CSS范例(六)：实现网页固定大小三态图形按钮简单方法

，加油……

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

相关推荐