淘宝的tab成效 _Web前端

淘宝的tab效果

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin:0;
padding:0;
}

#filter .tabbar,#filter .tabbar li,#filter .tabbar li a,#filterForm ul.basic,#filterForm div.advanced,#filter .toolbar,#filter .toolbar .mode,#filter .toolbar .status,.related-search,#list-search,#list-search .search-box,#list-search .search-more,#list-search form button {
background:transparent url(http://img06.taobaocdn.com/tps/i6/T1PidmXaVdXXXXXXXX-150-700.png) no-repeat scroll 500px 500px;
}

#filter .tabbar {
height:30px;
padding-bottom:5px;
background-position:0 26px;
background-repeat:repeat-x;
}

#filter .tabbar li {
float:left;
height:26px;
margin-right:2px;
line-height:30px;
background-position:0 -37px;
overflow:hidden;
}

#filter .tabbar li a {
display:block;
color:#555;
text-decoration:none;
background-position:100% -91px;
padding:0 10px;
}

#filter .tabbar li.selected {
position:relative;
height:28px;
background-position:0 -9px;
}

#filter .tabbar li.selected a {
color:#fff;
font-weight:700;
background-position:100% -63px;
padding:0 20px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
    <link rel="stylesheet" href="ttttt.css" type="text/css" />    
</head>

<body>
<div id="filter">
    <ul class="tabbar">
        <li class="selected"><a href="#"><span>全新宝贝</span></a></li>
        <li><a href="#"><span>全新宝贝</span></a></li>
        <li><a href="#"><span>全新宝贝</span></a></li>
    </ul>
</div>
</body>
</html>