财富经CSS教程-触发式经典导航菜单

shangjicn2 · 发表于 2007-11-5 14:26:52

演示见： http://www.cfj88.cn/menu/cfdh.html

全部代码：

<html>
<head>
<meta http-equiv="Content-Type" c>
<title>财富经网页特效代码|---经典实用的触发型导航菜单</title>
</head>
<body>
<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>

         <SCRIPT language=javascript>
   function secBoard(n)
  {
for(i=0;i<secTable.cells.length;i++)
   secTable.cells
.className="sec1";
secTable.cells[n].className="sec2";
for(i=0;i<mainTable.tBodies.length;i++)
   mainTable.tBodies
.style.display="none";
mainTable.tBodies
[n].style.display="block";
  }
   </SCRIPT>

         <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%">关于TBODY标记</TD>
            <TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>
            <TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>
            <TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
         <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0>
            <TBODY style="DISPLAY: block">
            <TR>
            <TD vAlign=top align=middle><BR><BR>
               <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                  <TBODY>
                  <TR>
                  <TD>指定行做为表体。
<BR>注释：TBODY要素是块要素，并且需要结束标
签。<BR>　　　即使如果表格没有显式定义TBODY
要素，该要素也提供给所有表。<BR><BR>
参考：《动态HTML参考和开发应用大全》（人民邮电出
版社
                     Microsoft Corporation著
                  北京华中兴业科技发展有限公司
译）
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY>
            <TBODY style="DISPLAY:
none">
            <TR>
            <TD vAlign=top
align=middle><BR><BR>
               <TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
                  <TBODY>
                  <TR>
                  <TD>检索表行或者整个
表中所有单元格的集合。<BR>应用于TR、TABLE。
<BR><BR>参考：《动态HTML参考和开发应
用大全》（人民邮电出版社
                     Microsoft Corporation著
                  北京华中兴业科技发展有限公司
译）
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY>
            <TBODY style="DISPLAY:
none">
            <TR>
            <TD vAlign=top
align=middle><BR><BR>
               <TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
                  <TBODY>
                  <TR>
                  <TD>检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
<BR>应用于TABLE。<BR><BR>参考：
《动态HTML参考和开发应用大全》（人民邮电出版社
                     Microsoft Corporation著
                  北京华中兴业科技发展有限公司
译）
<BR><BR></TD></TR></TB
ODY></TABLE></TD></TR></T
BODY>
            <TBODY style="DISPLAY:
none">
            <TR>
            <TD vAlign=top
align=middle><BR><BR>
               <TABLE cellSpacing=0
cellPadding=0 width=490 border=0>
                  <TBODY>
                  <TR>
                  <TD>设置或者检索对象
是否被提供。<BR>可能的值为block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>该特性可读写，块要素默认
值为block，内联要素默认值为inline；层叠样式表
（CSS）属性不可继承。<BR><BR>参考：《
动态HTML参考和开发应用大全》（人民邮电出版社
                     中国创业网Microsoft Corporation著
北京华中兴业科技发展有限公司译）
<BR><BR><A

href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true"                      target=_blank>点击此处
</A>可参阅微软<A href="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。

</TD></TR></TBODY></TABLE>
;</TD></TR></TBODY></TABLE&g
t;</body>
</html>

[ 本帖最后由 shangjicn2 于 2007-11-5 14:28 编辑 ]

107zqx · 发表于 2007-11-5 14:49:25

呵呵,支持一下!

coolgol · 发表于 2007-11-5 16:04:51

chr673673673 · 发表于 2007-11-5 16:18:59

shangjicn2 · 发表于 2007-11-7 01:24:32

可以用吧我会每周分享一些精彩的代码的！

		自动登录	找回密码
密码			立即注册

[教程] 财富经CSS教程-触发式经典导航菜单

评分

可以用吧