瑞星网站学习

组件化网页的一个方法:
将内容独立成一个页面,然后通过<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">&nbsp;</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">&nbsp;</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">&nbsp;</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;
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值