仿windows选项卡特效2

<STYLE type=text/css>.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="sec1";
secTable.cells
.className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies
.style.display="block";
}
</SCRIPT>
<p align="center">
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
<TR align=middle height=20>

<TD class=sec2 onclick=secBoard(0) width="10%">1</TD>

<TD class=sec1 onclick=secBoard(1) width="10%">2</TD>

<TD class=sec1 onclick=secBoard(2) width="10%">3</TD>

<TD class=sec1 onclick=secBoard(3)
width="10%">4</TD>
</TR></TBODY></TABLE>
<TABLE class=main_tab id=mainTable height=240 cellSpacing=0
cellPadding=0 width=549 border=0><!--关于TBODY标记-->
<TBODY style="DISPLAY: block">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>

<TD><center><img src="tutu16.gif"><BR>

<table><tr><td style="width:80;height:20;background-color:blue" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='blue'"></td></tr></table>
<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>

<TD><center><img src="tutu24.gif"><BR>

<form name="form1" method="post" action="">
<select name="select" style="background:#FF0000;color:white">
<option >凤，风之羽也。</option>
<option>ddddddddddddd</option>
<option>ddddddddddddddddd</option>
<option>eeeeeeeeeeeeeeee</option>
<option>eeeeeeeeeeeeeeee</option>
</select>
</form>
</TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>

<TD><center><img src="tutu30.gif"><BR>
<style type="text/css">
<!--
.formstyle { font-family: "宋体"; font-size: 10pt; color: #FF0000; background-color: #FFFFCC}
-->
</style>
<center>
<form name="form1" method="post" action="">
<select name="select" class="formstyle">
<option value="a1.html">menu1</option>
<option value="a4.html" selected>menu2</option>
<option value="a8.html">menu3</option>
</select>
</form>
<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性-->
<TBODY style="DISPLAY: none">
<TR>
<TD vAlign=top align=middle><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
<TBODY>
<TR>

<TD><center><img src="tutu34.gif"><br>
<table border="0" cellpadding="3" cellspacing="1" bgcolor="#000000">
<tr>
<a href="a12.html"><td bgcolor="#FFFFFF" onMouseOver="this.style.color='#ffffff'; this.style.background='#003399'" onMouseOut="this.style.color='#003399'; this.style.background='#ffffff'" style="cursor: hand">恰在似与不似之间</td></a>
</tr>
</table>
</TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE></p>