WEB页面中的选项卡实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
#tabMenu{
margin:0px;
padding:0px;
width:100%;
font-family: Arial, 宋体, sans-serif;
font-size: 12px;
line-height:normal;
background:url("bg.gif") repeat-x bottom;
}
#tabMenu li {
float:left;
padding-right:4px;
}
#tabMenu a {
display:block;
padding:4px;
padding-bottom:3px;
width:80px;
text-align:center;
border:1px solid #999;
border-bottom:0px;
background:#eee;
text-decoration:none;
color:black;
}
#tabMenu a.current {
color:#333;
padding-bottom:4px;
background:white;
}
#tabMenu a:hover{
background:white;
}
#tabContent {
clear:both;
width:100%;
border:1px solid #999;
border-top:0px;
}
</style>
<BODY>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>欢迎光临 www.i5tt.com<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<P>
<div id="tabMenu">
<ul>
<li><a class="current" href="#">爱我天堂1</a></li>
<li><a href="#">爱我天堂2</a></li>
</ul>
</div>
<div id="tabContent">
内容...
</div>
<P>
<fieldset>
<legend>爱我天堂</legend>
欢迎测试使用
</fieldset>
<P>
</BODY>
</HTML>
