|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (17) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-09-20
最后修改：2010-10-21
声明：基本知识，初级应用。
今天想出一种三态图形按钮实现方式，制作超简单，文字可以随意修改，各种浏览器表现一致，不含任何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伪类，很让人郁闷。不过不影响外观。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-09-20
如果文字太长呢，如有10个字符。
|
| 返回顶楼 | |
|
发表时间：2010-09-20
呵呵，总会有个预期吧。太长了可以用什么“滑动门”技术，一般把代码弄得很难看。我宁愿把它定死
|
| 返回顶楼 | |
|
发表时间：2010-09-23
没看出来，新 是指什么。。。lz不会是刚接触css的吧。。。
|
| 返回顶楼 | |
|
发表时间：2010-09-23
好吧。把新字去掉。
|
| 返回顶楼 | |
|
发表时间：2010-09-24
...这个也太新手了
|
| 返回顶楼 | |
|
发表时间：2010-09-25
wallimn 写道 呵呵，总会有个预期吧。太长了可以用什么“滑动门”技术，一般把代码弄得很难看。我宁愿把它定死
你用的貌似就是滑动门呃~~~~ |
| 返回顶楼 | |
|
发表时间：2010-09-26
看不明白
|
| 返回顶楼 | |
|
发表时间：2010-09-27
楼主干的很不错，我收下了。
elementstorm 写道 ...这个也太新手了
elementstorm朋友，你可以这样说：“楼主干的很不错，不过这不算太新的方法。楼主可以再进一步开发下去，做出更好的插件来。” 说实话elementstorm，我很鄙视你这样的说法。我相信有很大一部分人都不喜欢你这样的。 |
| 返回顶楼 | |
|
发表时间：2010-09-27
好。感谢支持。
|
| 返回顶楼 | |
