html横向选项卡,纯CSS打造的个性横向选项卡效果

纯CSS打造的个性横向选项卡效果_网页代码站(www.webdm.cn)

body {

margin: 0px;

padding: 0px;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

#ts_tabmenu {

font-size: .75em;

padding: 20px 0px 0px 20px;

}

#ts_tabmenu ul {

line-height: 1em;

margin: 0px;

list-style-type: none;

float: left;

padding: 0px 0px 0px 5px;

}

#ts_tabmenu ul li {

float: left;

}

#ts_tabmenu ul li a {

text-decoration: none;

display: block;

float: left;

padding: 0px 0px 0px 10px;

background: url(/images/20131029/tabs0000.gif) no-repeat left top;

margin-left: -5px;

z-index: 0;

position: relative;

color: #666666;

}

#ts_tabmenu ul li a strong {

font-weight: normal;

display: block;

float: left;

background: url(/images/20131029/tabs0000.gif) no-repeat right top;

padding: 6px 10px 7px 5px;

cursor: pointer;

}

#ts_tabmenu ul li a:hover {

position: relative;

z-index: 5;

background: url(/images/20131029/tabs0000.gif) no-repeat left bottom;

color: #000000;

}

#ts_tabmenu ul li a:hover strong {

background-image: url(/images/20131029/tabs0000.gif) no-repeat;

position: relative;

z-index: 5;

background-position: right bottom;

}

#tsmenu1 #li_tsmenu1 a, #tsmenu2 #li_tsmenu2 a,

#tsmenu3 #li_tsmenu3 a, #tsmenu4 #li_tsmenu4 a,

#tsmenu5 #li_tsmenu5 a, #tsmenu6 #li_tsmenu6 a,

#tsmenu7 #li_tsmenu7 a {

position: relative;

z-index: 5;

background: url(/images/20131029/tabs0000.gif) no-repeat left bottom;

color: #000000;

}

#tsmenu1 #li_tsmenu1 a strong, #tsmenu2 #li_tsmenu2 a strong,

#tsmenu3 #li_tsmenu3 a strong, #tsmenu4 #li_tsmenu4 a strong,

#tsmenu5 #li_tsmenu5 a strong, #tsmenu6 #li_tsmenu6 a strong,

#tsmenu7 #li_tsmenu7 a strong {

background-image: url(/images/20131029/tabs0000.gif) no-repeat;

position: relative;

z-index: 5;

background-position: right bottom;

}

• Tutorialsphere
• Photoshop
• Illustrator
• Fireworks
• Flash
• CSS
• PHP

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！