不规则带有上下边框阴影的选项卡

背景图片素材：g-tab-bg.gif

最终效果：

html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>3
<style type="text/css">
 .g-tab {
 height: 34px;
 padding: 20px;
}

.g-tab li {
 list-style-type:none;
 float: left;
 line-height: 33px;
 _display: inline;
 margin-right: 13px;
}

.g-tab li a {
 float: left;
 text-align: center;
 color: #666;
 font-size: 14px;
 font-weight: bold;
 padding-left: 15px;
 background: url(g-tab-bg.gif) 0px 0px no-repeat;
}

.g-tab li a span {
 float: left;
 height: 34px;
 display: block;
 padding-right: 15px;
 background: url(g-tab-bg.gif) right -78px
 no-repeat;
}

.g-tab li a:hover {
 text-decoration: none;
 color: #fff;
 background: url(g-tab-bg.gif) 0 -39px no-repeat;
}

.g-tab li a:hover span {
 float: left;
 line-height: 30px;
 background: url(g-tab-bg.gif) right -117px no-repeat;
}

</style>
</head>
<body>
<ul class="tabbtn g-tab" id="hom_tab_btn">
 <li class="current"><a href="javascript:;" class="video">旅游</a></li>
 <li><a href="javascript:;" id="btn_Com" class="music">电影</a></li>
 <li><a href="javascript:;" class="game">招聘</a></li>
 <li><a href="javascript:;" class="book">婚恋</a></li>
 <li><a href="javascript:;" class="app">汽车</a></li>
 <li><a href="javascript:;" style="padding-left: 20px;" class="life">生活杂烩</a></li>
</ul>
</body>
</html>

posted on 2016-12-28 15:17 whwfds 阅读(162) 评论(1) 收藏举报