<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}
#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}
#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}
#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/
}
</style>
</head>
<body>
<div id="modernbricksmenu">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>
</div>
<div id="modernbricksmenuline"> </div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}
#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}
#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}
#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/
}
</style>
</head>
<body>
<div id="modernbricksmenu">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>
</div>
<div id="modernbricksmenuline"> </div>
</body>
</html>
<style type=text/css>
td {
font-size: 12px;
color: #000000;
line-height: 150%;
}
.sec1 {
background-color: #EEEEEE;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";
}
</script>
<table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
<tr height=20 align=center>
<td class=sec2 width=10% onclick="secBoard(0)">关于TBODY标记</td>
<td class=sec1 width=10% onclick="secBoard(1)">关于cells集合</td>
<td class=sec1 width=10% onclick="secBoard(2)">关于tBodies集合</td>
<td class=sec1 width=10% onclick="secBoard(3)">关于display属性</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
<tbody style="display:block;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。1 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。2 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。3 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。4 </td>
</tr>
</tbody>
</table>
td {
font-size: 12px;
color: #000000;
line-height: 150%;
}
.sec1 {
background-color: #EEEEEE;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid #FFFFFF
}
.sec2 {
background-color: #D4D0C8;
cursor: hand;
color: #000000;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid gray;
font-weight: bold;
}
.main_tab {
background-color: #D4D0C8;
color: #000000;
border-left:1px solid #FFFFFF;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";
}
</script>
<table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
<tr height=20 align=center>
<td class=sec2 width=10% onclick="secBoard(0)">关于TBODY标记</td>
<td class=sec1 width=10% onclick="secBoard(1)">关于cells集合</td>
<td class=sec1 width=10% onclick="secBoard(2)">关于tBodies集合</td>
<td class=sec1 width=10% onclick="secBoard(3)">关于display属性</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
<tbody style="display:block;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。1 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。2 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。3 </td>
</tr>
</tbody> <tbody style="display:none;">
<tr>
<td align=center valign=top> <br>
<br>
这里填加内容,略去。4 </td>
</tr>
</tbody>
</table>