淘宝的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;
}

 





	Untitled
        





 

你可能感兴趣的:(CSS,HTML)