前端技术之（tab按钮）不知道合不合理请高手指点

85273898

浏览: 4989 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

HTML

图片在附件里面
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>玩转按钮</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure {padding:0; margin:0;}
body {font:12px/1.5 Arial,Tahoma,Helvetica,simsun,sans-serif;background:#fff;color:#666;}
.sub-light{float:left;margin-left:30px;}

.sub-light a{background-position:right 0;}
.sub-light span{background-position:-92px 0;}
.sub-light a:hover{background-position:right -29px;}
.sub-light a:hover span{background-position:-92px -29px;}
.sub-light a,.sub-light a:hover{padding-right:15px;}
.sub-light span,.sub-light a:hover span{padding-left:15px;margin-left:-15px;position:relative;}
.sub-light a,.sub-light span,.sub-light a:hover,.sub-light a:hover span{background-image:url(images/bt.gif);font-weight:bold;font-size:12px;color:#f08200;text-decoration:none;height:28px; line-height:28px; display:inline-block;float:left;}

.btn-deep{float:left;margin-left:30px;}
.btn-deep a{background-position:right -58px;}
.btn-deep span{background-position:-2px -58px;}
.btn-deep a:hover{background-position:right -87px;}
.btn-deep a:hover span{background-position:-2px -87px;}
.btn-deep a,.btn-deep a:hover{padding-right:10px;}
.btn-deep span,.btn-deep a:hover span{padding-left:10px;margin-left:-10px; position:relative;}
.btn-deep a,.btn-deep span,.btn-deep a:hover,.btn-deep a:hover span{background-image:url(images/bt.gif);color:#fff;text-decoration:none;height:28px; line-height:28px; display:inline-block;float:left;font-weight:bold;}
</style>
</head>

<body>
<div class="sub-light"><a href="#"><span></span>帮助中心</a></div><div class="sub-light"><a href="#"><span></span>帮助中心</a></div>
<div style="clear:both; height:20px;"></div>
<div class="btn-deep"><a href="#"><span></span>帮助中心帮助中心</a></div> <div class="btn-deep"><a href="#"><span></span>帮助中心帮助中心</a></div>
</body>
</html>