<!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" >Ajax高级系列教程</a></li>
</ul>
</div>
</div>
</body>
</html>