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

wallimn

浏览: 5173491 次
性别:
来自: 北京

最近访客更多访客>>

ZZ_lll

java-007

xckouy

lengyun3566

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

CSS 浏览器脚本 IDEA XHTML

　　声明：基本知识，初级应用。

　　今天想出一种三态图形按钮实现方式，制作超简单，文字可以随意修改，各种浏览器表现一致，不含任何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伪类，很让人郁闷。不过不影响外观。

查看图片附件

分享到：

CSS中的inline-block属性 | 新学到的Oracle位图索引的知识

2010-09-20 16:12
浏览 3150
评论(12)
论坛回复 / 浏览 (11 / 11430)
分类:Web前端
查看更多

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做的很棒了

，加油……

11 楼 jordan_micle 2010-09-28

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

10 楼 wallimn 2010-09-27

好。感谢支持。

9 楼 jiorry 2010-09-27

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

elementstorm 写道

...这个也太新手了

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

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

8 楼 yeswoyaofei 2010-09-26

呵呵不错鼓励一下

7 楼 hetaohappy1 2010-09-26

看不明白

6 楼 ccyingfu 2010-09-25

wallimn 写道

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

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

5 楼 elementstorm 2010-09-24

...这个也太新手了

4 楼 wallimn 2010-09-23

好吧。把新字去掉。

3 楼 caiceclb 2010-09-23

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

2 楼 wallimn 2010-09-20

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

1 楼 jorneyR 2010-09-20

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论