这是我本机做测试的效果,所有的图片发到百度上了.大家可以下载.
http://hi.baidu.com/%CD%F5%D7%D36%BA%C5/blog/item/9110f56394c249680d33fa6c.html
这是我本机做测试的效果,所有的图片发到百度上了.大家可以下载.
<!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=utf-8" />
<title>各种按钮</title>
<style>
/* Anchor Button */
a.button,
a.button span { position:relative; display:inline-block; text-decoration:none !important; background:url("http://hiphotos.baidu.com/%CD%F5%D7%D36%BA%C5/abpic/item/6053bea472584dd69052eed2.jpg") no-repeat; cursor:pointer; white-space:nowrap; vertical-align:middle; *vertical-align:top;}
a.button { padding:0; background-position:left top; overflow:visible;}
a.button span { left:2px; padding:6px 10px 5px 8px; color:#000; font:12px/12px Sans-serif; background-position:right top;}
a.button, x:-moz-any-link { font:0/23px Sans-serif; padding:12px 0; top:1px;} /* Firefox 2 Fix */
a.button, x:-moz-any-link, x:default { padding:0; top:0;} /* Firefox 2 Fix */
/* Large Size */
a.button.large { background-position:left -30px; }
a.button.large span { padding:7px 10px 6px 8px; font:16px/16px Sans-serif; background-position:right -30px;}
a.button.large, x:-moz-any-link { font:0/29px Sans-serif; padding:15px 0;} /* Firefox 2 Fix */
a.button.large, x:-moz-any-link, x:default { padding:0;} /* Firefox 2 Fix */
/* xLarge Size */
a.button.xLarge { background-position:left -65px; }
a.button.xLarge span { padding:8px 10px 7px 8px; font:20px/20px Sans-serif; background-position:right -65px;}
a.button.xLarge, x:-moz-any-link { font:0/35px Sans-serif; padding:18px 0;} /* Firefox 2 Fix */
a.button.xLarge, x:-moz-any-link, x:default { padding:0;} /* Firefox 2 Fix */
/* Small Size */
a.button.small { background-position:left -107px; }
a.button.small span { padding:4px 6px 3px 4px; font:11px/11px Sans-serif; background-position:right -107px;}
a.button.small, x:-moz-any-link { font:0/18px Sans-serif; padding:9px 0;} /* Firefox 2 Fix */
a.button.small, x:-moz-any-link, x:default { padding:0;} /* Firefox 2 Fix */
/* Control Button + Submit Button */
span.button,
span.button button,
span.button input { position:relative; margin:0; display:inline-block; border:0; font:12px Sans-serif; white-space:nowrap; background:url("http://hiphotos.baidu.com/%CD%F5%D7%D36%BA%C5/abpic/item/6053bea472584dd69052eed2.jpg") no-repeat; vertical-align:middle;}
span.button { padding:0; background-position:left top;}
span.button, x:-moz-any-link{ font:0/23px Sans-serif; padding:11px 0;} /* Firefox 2 Fix */
span.button, x:-moz-any-link, x:default{ padding:0;} /* Firefox 2 Fix */
span.button button,
span.button input { height:23px; left:2px; *top:-1px; _top:0; padding:0 10px 0 8px; *padding:0 5px 0 3px; line-height:24px; background-position:right top; cursor:pointer;}
/* Large Size */
span.button.large { background-position:left -30px;}
span.button.large, x:-moz-any-link{ font:0/29px Sans-serif; padding:14px 0;} /* Firefox 2 Fix */
span.button.large, x:-moz-any-link, x:default{ padding:0;} /* Firefox 2 Fix */
span.button.large button,
span.button.large input { height:30px; *top:0; _top:-1px; padding:0 10px 0 8px; *padding:0 5px 0 3px; font:16px/30px Sans-serif; background-position:right -30px;}
/* xLarge Size */
span.button.xLarge { background-position:left -65px;}
span.button.xLarge, x:-moz-any-link{ font:0/35px Sans-serif; padding:17px 0;} /* Firefox 2 Fix */
span.button.xLarge, x:-moz-any-link, x:default{ padding:0;} /* Firefox 2 Fix */
span.button.xLarge button,
span.button.xLarge input { height:35px; padding:0 10px 0 8px; *padding:0 5px 0 3px; font:20px/36px Sans-serif; background-position:right -65px;}
/* Small Size */
span.button.small { background-position:left -107px;}
span.button.small, x:-moz-any-link{ font:0/18px Sans-serif; padding:9px 0;} /* Firefox 2 Fix */
span.button.small, x:-moz-any-link, x:default{ padding:0;} /* Firefox 2 Fix */
span.button.small button,
span.button.small input { height:18px; *top:0; _top:-1px; padding:0 6px 0 4px; *padding:0 3px 0 2px; font:11px/18px Sans-serif; background-position:right -107px;}
span.button.small button, x:-moz-any-link,
span.button.small input, x:-moz-any-link{ top:-1px;} /* Firefox 2 Fix */
span.button.small button, x:-moz-any-link, x:default,
span.button.small input, x:-moz-any-link, x:default{ top:0;} /* Firefox 2 Fix */
/* Strong Button */
a.button.strong *,
span.button.strong * { font-weight:bold !important;}
/* Icon Add */
a.button .icon { position:relative; border:0; vertical-align:middle;}
span.button .icon { position:relative; left:10px; margin-right:8px; vertical-align:middle;}
/* Color Preset */
a.button.green,
a.button.green span,
span.button.green,
span.button.green button,
span.button.green input { background-image:url("http://hiphotos.baidu.com/%CD%F5%D7%D36%BA%C5/abpic/item/c8080eeff2bfe3cece1b3ed0.jpg"); color:#fff;}
a.button.black,
a.button.black span,
span.button.black,
span.button.black button,
span.button.black input { background-image:url("http://hiphotos.baidu.com/%CD%F5%D7%D36%BA%C5/abpic/item/2c22c5b5999251ef36d3cad7.jpg"); color:#fff;}
a.button.red,
a.button.red span,
span.button.red,
span.button.red button,
span.button.red input { background-image:url("http://hiphotos.baidu.com/%CD%F5%D7%D36%BA%C5/abpic/item/196344b442976a528bd4b2d1.jpg"); color:#fff;}
a.button.blue,
a.button.blue span,
span.button.blue,
span.button.blue button,
span.button.blue input { background-image:url("http://hiphotos.baidu.com/%CD%F5%D7%D36%BA%C5/abpic/item/8bdbe31e1e634ad51bd576d7.jpg"); color:#fff;}
/* Offset Debug */
a.button,
span.button{ margin-right:2px;}
/* Button Set */
.buttonSet{ width:16px; height:16px; background-image:url("http://hiphotos.baidu.com/%CD%F5%D7%D36%BA%C5/abpic/item/dcc72a8f002ed0cff01f36d1.jpg"); background-repeat:no-repeat; border:0; background-color:transparent; vertical-align:middle; display:inline-block; text-decoration:none;}
.buttonSet span{ z-index:-1; font-size:0; line-height:0; visibility:hidden;}
.buttonSet.buttonUp{ background-position:0 0;}
.buttonSet.buttonDown{ background-position:0 -16px;}
.buttonSet.buttonLeft{ background-position:0 -32px;}
.buttonSet.buttonRight{ background-position:0 -48px;}
.buttonSet.buttonInfo{ background-position:0 -64px;}
.buttonSet.buttonCopy{ background-position:0 -80px;}
.buttonSet.buttonSetting{ background-position:0 -96px;}
.buttonSet.buttonActive{ background-position:0 -112px;}
.buttonSet.buttonDisable{ background-position:0 -128px;}
.buttonSet.buttonDelete{ background-position:0 -144px;}
.buttonSet.buttonHomepage{ background-position:0 -160px;}
.buttonSet.buttonBlog{ background-position:0 -176px;}
.buttonSet.buttonCalendar{ background-position:0 -192px;}
.buttonSet.buttonLayoutEditor{ background-position:0 -208px;}
.buttonSet.buttonAddWidget{ background-position:0 -224px;}
.buttonSet.buttonAddContent{ background-position:0 -240px;}
</style>
</head>
<body>
<a class="button blue xLarge" href="#"><span>发表新帖</span></a>
<a class="button blue large" href="#"><span>发表新帖</span></a>
<a class="button blue" href="#"><span>发表新帖</span></a>
<a class="button blue small" href="#"><span>发表新帖</span></a><br /><br />
<a class="button green xLarge" href="#"><span>发表新帖</span></a>
<a class="button green large" href="#"><span>发表新帖</span></a>
<a class="button green" href="#"><span>发表新帖</span></a>
<a class="button green small" href="#"><span>发表新帖</span></a><br /><br />
<a class="button black xLarge" href="#"><span>发表新帖</span></a>
<a class="button black large" href="#"><span>发表新帖</span></a>
<a class="button black" href="#"><span>发表新帖</span></a>
<a class="button black small" href="#"><span>发表新帖</span></a><br /><br />
<a class="button red xLarge" href="#"><span>发表新帖</span></a>
<a class="button red large" href="#"><span>发表新帖</span></a>
<a class="button red" href="#"><span>发表新帖</span></a>
<a class="button red small" href="#"><span>发表新帖</span></a><br /><br />
<a class="button xLarge" href="#"><span>发表新帖</span></a>
<a class="button large" href="#"><span>发表新帖</span></a>
<a class="button" href="#"><span>发表新帖</span></a>
<a class="button small" href="#"><span>发表新帖</span></a><br /><br />
<a class="buttonSet buttonUp" href="#"></a>
<a class="buttonSet buttonDown" href="#"></a>
<a class="buttonSet buttonLeft" href="#"></a>
<a class="buttonSet buttonRight" href="#"></a>
<a class="buttonSet buttonInfo" href="#"></a>
<a class="buttonSet buttonCopy" href="#"></a>
<a class="buttonSet buttonSetting" href="#"></a>
<a class="buttonSet buttonActive" href="#"></a>
<a class="buttonSet buttonDisable" href="#"></a>
<a class="buttonSet buttonDelete" href="#"></a>
<a class="buttonSet buttonHomepage" href="#"></a>
<a class="buttonSet buttonBlog" href="#"></a>
<a class="buttonSet buttonCalendar" href="#"></a>
<a class="buttonSet buttonLayoutEditor" href="#"></a>
<a class="buttonSet buttonAddWidget" href="#"></a>
<a class="buttonSet buttonAddContent" href="#"></a>
</body>
</html>