61,115
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>灰色带图标的选项卡DIV/UL/LI结构 - 懒人建站-解放出你的部分写代码时间来思考更高层次的设计</title>
<style>
body{
background-color:#ffffff;
padding-top:50px;}
/*Tab1*/
#lib_Tab1{
width:700px;
margin:0px;
padding:0px;
margin-bottom:15px;
}
/*Tab2*/
.lib_Menubox {
height:40px;
line-height:40px;
background-image: url('../images/xuanxiangka/tit01_center.jpg');
background-repeat:repeat-x;
background-position: left top;
position:relative;}
.lib_Menubox ul{
width:700px;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
left:0;
height:40px;
text-align:center;
background-image: url('../images/xuanxiangka/tit01_right.jpg');
background-repeat:no-repeat;
background-position: right top;
}
.lib_Menubox li{
float: left;
display: block;
cursor: pointer;
width: 200px;
color: #949694;
font-weight: bold;
margin-right: 2px;
height: 40px;
line-height: 40px;
font-size: 10pt;
border-left-style: dotted;
border-left-width: 1px;
border-left-color: #B6B6B6;
}
.lib_tabborder li span{
width:700px;
height: 40px;
display:block;
line-height: 40px;
text-align:left;
padding-left:80px;
}
li#one1,li.tit_bj_left{
border:none;
}
li#one1 span{
background-image: url(../images/xuanxiangka/ico_01.jpg);
background-repeat:no-repeat;
background-position: 10px center;
}
/**/
li#one2 span{
background-image: url('../images/xuanxiangka/ico_02.jpg');
background-repeat:no-repeat;
background-position: 10px center;
}
li#one3 span{
background-image: url('../images/xuanxiangka/ico_03.jpg');
background-repeat:no-repeat;
background-position: 10px center;
text-align:left;
}
li.tit_bj_left{
width:12px;
background-image: url('../images/xuanxiangka/tit01_left.jpg');
background-repeat:no-repeat;
background-position: left top;
}
/* www.codefans.net */
.lib_Menubox li.hover,li#one1.hover,li#one2.hover,li#one3.hover{
padding:0px;
width:200px;
color:#333;
background-image: url('../images/xuanxiangka/tit01_hover.jpg');
background-repeat:no-repeat;
background-position: center top;
}
.lib_Contentbox{
border: 1px solid #C0C0C0;
clear: both;
margin-top: 0px;
border-top: none;
height: 181px;
text-align: center;
padding-top:6px;
padding-bottom:6px;
background-color:#fff;
}
/*内容区*/
.text_div{
width:680px;
height:auto;
display:block;
overflow:hidden;
}
</style>
<head>
<body>
<script type=text/javascript>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
<table width="730" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td> <div id="lib_Tab1">
<div class="lib_Menubox lib_tabborder">
<ul>
<li class="tit_bj_left"></li>
<li id="one1" onclick="setTab('one',1,3)" class="hover"><span>最新礼品</span></li>
<li id="one2" onclick="setTab('one',2,3)" ><span>推荐礼品</span></li>
<li id="one3" onclick="setTab('one',3,3)"><span>购买指南</span></li>
</ul>
</div>
<div class="lib_Contentbox lib_tabborder">
<div id="con_one_1" class="text_div"><a href="http://www.51xuediannao.com/js/ad" target="_blank">JS广告代码</a></div>
<div id="con_one_2" class="text_div" style="display:none"><a href="http://www.51xuediannao.com/js" target="_blank">JS代码</a></div>
<div id="con_one_3" class="text_div" style="display:none"><a href="http://www.51xuediannao.com/jiqiao" target="_blank">建站技巧</a></div>
</div>
</div></td>
</tr>
</table>
<!--下面只是说明与程序代码无关-->
</body>
</html>