组件化网页的一个方法:
将内容独立成一个页面,然后通过<IFRAM>标记嵌入到需要的页面中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>menu</title>
<base target="_blank">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<table width="230" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<!-- 菜单定义开始 -->
<script language=javascript>
function secCard(n)
{
for(i=0;i<secTable.cells.length;i++)
secTable.cells[i].className="cardNormal";
secTable.cells[n].className="cardSelected";
//使用Table的Cells集合对单元格进行属性定义
for(i=1;i<secTable.cells.length;i=i+2)
secTable.cells[i].className="cardSpace";
secTable.cells[n+1].className="cardSpaceLeft";
secTable.cells[5].className="cardSpaceLast";
}
function secBoard(n)
{
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="";
//使用table的tbodies()集合对table的<tbody>对象进行访问
}
</script>
<td width="25" rowspan="2" align="center" bgcolor="#0A6CCE"><span
class="erect">网络安全产品</span></TD>
<td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont
id=secTable>
<TBODY>
<TR>
<TD align="center" class="cardSelected" onMouseOver="secCard(0);secBoard(0);"
style="padding:3 0 0 0"><a href="http://it.rising.com.cn/product/safety/rsw/rsw_brief.htm"
//使用绝对地址避免嵌入目录不同的页面时造成链接出错的问题
class="nav1">防毒墙</a></TD>
<TD width="2" height="20" class="cardSpace"> </TD>
//space单元格的使用,分隔列
<TD align="center" class="cardNormal" onMouseOver="secCard(2);secBoard(1);"
style="padding:3 0 0 0"><a href="http://it.rising.com.cn/product/safety/prosafety.htm" class="nav1">
防火墙</a></TD>
<TD width="2" height="20" class="cardSpace"> </TD>
<TD align="center" class="cardNormal" onMouseOver="secCard(4);secBoard(2);"
style="padding:3 0 0 0"><a href="http://it.rising.com.cn/product/safety/rnm/rnm_brief.htm"
class="nav1">网络监控</a></TD>
<TD width="2" height="20" class="cardSpace"> </TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<tr>
<td><TABLE width="100%" height=30 border="0" align="center" cellPadding="5" cellSpacing="0"
class="boardMain" id="mainTable">
<TBODY style="DISPLAY: block">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="100" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="70" height="69"><div align="center"><a
href="http://it.rising.com.cn/product/safety/rsw/rsw_brief.htm"><img src="../../img0310/fdq.gif"
alt="防毒墙" width="60" height="66" border="0"></a></div></td>
<td width="144" align="center" class="l17"><P class=t3><a
href="http://it.rising.com.cn/newSite/Channels/info/rav_news/rav_news/200410/26-170117269.htm">瑞星
国内首推防毒墙</a><br>
<a
href="http://it.rising.com.cn/product/safety/rsw/rsw_functio.htm">RSW-1000/3000/9000</a><br>
<a href="http://it.rising.com.cn/product/safety/rsw/rsw_sample.htm">三种系列满
足多种应用</a><br>
</P></td>
</tr>
</table></TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle"> <table width="100%" height="100" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td height="69" align="center" class="l17"><a
href="http://it.rising.com.cn/product/safety/prosafety.htm"><img src="../../img0310/fhq.gif" alt="防
火墙" width="60" height="66" border="0" align="left"></a> </td>
<td align="center" class="l17"><a
href="http://it.rising.com.cn/product/safety/np/np_brief.htm">全功能NP防火墙<br>
RFW-SME</a><br>
<a
href="http://it.rising.com.cn/product/safety/rfw_100/rfw_100_brief.htm">百兆防火墙RFW-100+</a><br>
<a href="http://it.rising.com.cn/product/safety/rfwkm/rfwkm-brief.htm">千兆防火墙RFW-1000
</a></td>
</tr>
</table></TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle">
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="70" height="69"><div align="center"><a
href="http://it.rising.com.cn/product/safety/rnm/rnm_brief.htm"><img src="../../img0310/wljk.gif"
alt="网络监控" width="68" height="42" border="0"></a></div></td>
<td width="144" align="center" class="l17"> <P><a
href="http://it.rising.com.cn/product/safety/rnm/rnm_brief.htm">瑞星网络监控 RNM-100 </a>
<a href="http://it.rising.com.cn/product/safety/rids/rids100-brief.htm">瑞星入侵检
测系统<br>
RIDS-100</a><br>
<a href="http://it.rising.com.cn/product/safety/vpn/vpn.htm">瑞星VPN系统</a><br>
</P></td>
</tr>
</table></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TABLE>
</body></html>
Menu.css
A:link {COLOR: #0000cc; TEXT-DECORATION: underline}
A:visited {COLOR: #551a8b; TEXT-DECORATION: underline}
A:active{COLOR: #ff0000; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #ffffff;
color: #000000;
font-size: 12px;
}
td{
font-size:12px;
line-height: 150%;
}
.white {color: #ffffff}
.cardNormal {
CURSOR: hand;
COLOR: #000000;
font-size:12px;
BACKGROUND-COLOR: #FFFFFF;
border-top: 1px solid #0A6CCE;
border-right: 1px solid #0A6CCE;
border-bottom: 1px solid #0A6CCE;
border-left: 1px solid #0A6CCE;
}
.cardSelected {
BORDER-left: 1px solid #0A6CCE;
BORDER-RIGHT: 1px solid #0A6CCE;
BORDER-TOP: 1px solid #0A6CCE;
FONT-WEIGHT: normal;
CURSOR: hand;
COLOR: #000000;
font-size:12px;
BACKGROUND-COLOR: #E1EFFD;
}
.boardMain {
BORDER-RIGHT: 1px solid #dbe9fd;
BORDER-LEFT: 1px solid #dbe9fd;
COLOR: #F1AB65;
LINE-HEIGHT:200%;
BORDER-BOTTOM:1px solid #0A6CCE;
BORDER-left: 1px solid #0A6CCE;
BORDER-RIGHT: 1px solid #0A6CCE;
BACKGROUND-COLOR:#E1EFFD;
}
.cardSpace {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLeft {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLast {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
A.nav1:link {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none}
.erect{
COLOR: #ffffff;
WRITING-MODE: tb-rl;
TEXT-ALIGN:left;
letter-spacing:2px;
}