Web中Tab菜单栏实例仿写
<!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>CSS实例Tab布局</title>
<style type="text/css">
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}a {behavior:url(xuxian.htc)}
.warp{
width:438px; height:300px; overflow:hidden; margin:50px auto;
}
.woaicss_title {width:438px; height:30px; background:#fff url(http://www.codefans.net/jscss/demoimg/201104/btn_bg.png) no-repeat; overflow:hidden;
}
.woaicss_title li {display:block; float:left; margin:0 2px 0 0; text-align:center;
}
.woaicss_title li a{
display:block;
width:90px;
height:30px;
line-height:34px;
color:#fff;
}
.woaicss_title li a:hover{
text-decoration:underline;
color:#FFFF33;
}
.woaicss_title_bg1{
background-position:0 0;
}
.woaicss_title_bg2{
background-position:0 -30px;
}
.woaicss_title_bg3{
background-position:0 -60px;
}
.woaicss_title_bg4{
background-position:0 -90px;
}
.woaicss_con{
background:url(http://www.codefans.net/jscss/demoimg/201104/con_bg.png) no-repeat;
overflow:hidden;
}
.woaicss_con ul{
width:418px;
height:250px;
margin:12px auto;
}
.woaicss_con li{
width:418px;
line-height:30px;
margin:0 auto;
white-space:nowrap;
overflow:hidden;}
.woaicss_con li a{
color:#0099FF;}
.woaicss_con li a:hover{
color:#9900CC;
text-decoration:underline;}
</style>
</head>
<body>
<div class="warp">
<script type="text/javascript"> function woaicssq(num){ for(var id = 1;id<=4;id++) { var MrJin="woaicss_con"+id; if(id==num) document.getElementById(MrJin).style.display="block"; else document.getElementById(MrJin).style.display="none"; } if(num==1) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1"; if(num==2) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2"; if(num==3) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3"; if(num==4) document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4"; }</script>
<ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
<li><a href="#" target="_blank" onmouseover="woaicssq(1)">css技术</a></li>
<li><a href="#" target="_blank" onmouseover="woaicssq(2)">javascript技术</a></li>
<li><a href="#" target="_blank" onmouseover="woaicssq(3)">jquery技术</a></li>
<li><a href="#" target="_blank" onmouseover="woaicssq(4)">Ajax技术</a></li>
</ul>
<div class="woaicss_con" id="woaicss_con1" style="display:block;">
<ul>
<li><a href="#" title="">css入门系列教程</a></li>
<li><a href="#" title="">css基础系列教程</a></li>
<li><a href="#" title="">css中级系列教程</a></li>
<li><a href="#" title="">css高级系列教程</a></li>
</ul>
</div>
<div class="woaicss_con" id="woaicss_con2" style="display:none;">
<ul>
<li><a href="#" title="">javascript入门系列教程</a></li>
<li><a href="#" title="">javascript基础系列教程</a></li>
<li><a href="#" title="">javascript中级系列教程</a></li>
<li><a href="#" title="">javascript高级系列教程</a></li>
</ul>
</div>
<div class="woaicss_con" id="woaicss_con3" style="display:none;">
<ul>
<li><a href="#" title="">jquery入门系列教程</a></li>
<li><a href="#" title="">jquery基础系列教程</a></li>
<li><a href="#" title="">jquery中级系列教程</a></li>
<li><a href="#" title="">jquery高级系列教程</a></li>
</ul>
</div>
<div class="woaicss_con" id="woaicss_con4" style="display:none;">
<ul>
<li><a href="#" title="">Ajax入门系列教程</a></li>
<li><a href="#" title="">Ajax基础系列教程</a></li>
<li><a href="#" title="">Ajax中级系列教程</a></li>
<li><a href="#" title="">Ajax高级系列教程</a></li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号
