Web设计:一屏页面走天下实例(一)
*/ -----------------------------------------------------------------------
*/ 出自: 启步网 http://www.7ibu.com
*/ 作者: sunhy
*/ 时间: 2006/12/ 首发 http://bbs.7ibu.com/
*/ 声明: 转载请注明出处.
*/ -----------------------------------------------------------------------
复习设计思路请查看: http://www.7ibu.com/bbs/dispbbs.asp?boardid=36&id=6697
我在论坛里讲完了 Web设计:资源利用最大化之一屏页面走天下 实现思想后,接下来我们就来实践实践!实践是检验标准的唯一真理嘛,废话少说,马上就动手,呵呵,先讲利用ID控制的。
我完整的代码如下:
|
<table width="80%" border="0" align="center" cellspacing="5" bgcolor="#FFFFFF"> <tr> <td> <SCRIPT language=JavaScript type=text/javascript> //<![CDATA[ function GetObj(objName){ if(document.getElementById){ return eval('document.getElementById("' + objName + '")'); }else if(document.layers){ return eval("document.layers['" + objName +"']"); }else{ return eval('document.all.' + objName); } } function ADMenu(index,flag){ for(var i=0;i<9;i++){/* 最多支持9个标签 */ if(GetObj("ADcon"+i)&&GetObj("ADm"+i)){ GetObj("ADcon"+i).style.display = 'none'; GetObj("ADm"+i).className = "ADmenuOff"; } } if(GetObj("ADcon"+index)&&GetObj("ADm"+index)){ GetObj("ADcon"+index).style.display = 'block'; GetObj("ADm"+index).className = "ADmenuOn"; } } //]]> </SCRIPT> <style type=text/css> .ADMenuBtn { BORDER-TOP: #BBBBBB 1px solid; BORDER-LEFT: #BBBBBB 1px solid; WIDTH: 286px } .ADMenuOn { BORDER-RIGHT: #BBBBBB 1px solid; FONT-WEIGHT: bold; BACKGROUND: url(/images/topbg/titlebar-upon.gif); WIDTH: 45px; CURSOR: pointer; COLOR: #333; LINE-HEIGHT: 21px; TEXT-ALIGN: center } .ADMenuOff { BORDER-RIGHT: #BBBBBB 1px solid; BACKGROUND: url(/images/topbg/titlebar-down.gif); WIDTH: 39px; CURSOR: pointer; COLOR: #000033; LINE-HEIGHT: 21px; TEXT-ALIGN: center } .ADMenuCon { BORDER-RIGHT: #BBBBBB 1px solid; BORDER-TOP: medium none; BORDER-LEFT: #BBBBBB 1px solid; WIDTH: 286px; BORDER-BOTTOM: #BBBBBB 1px solid } .ADMenuCon TD { PADDING-RIGHT: 0px; PADDING-LEFT: 6px; PADDING-BOTTOM: 1px; COLOR: #333; LINE-HEIGHT: 20px; PADDING-TOP: 4px; TEXT-ALIGN: left } .ADMenuCon TD A:link { COLOR: #00298f; TEXT-DECORATION: underline } .ADMenuCon TD A:visited { COLOR: #00298f; TEXT-DECORATION: underline } .ADMenuCon TD A:active { COLOR: #f00; TEXT-DECORATION: underline } .ADMenuCon TD A:hover { COLOR: #f00; TEXT-DECORATION: underline } .HSpace-1-5 { CLEAR: both; OVERFLOW: hidden; WIDTH: 1px; HEIGHT: 5px } </style> <TABLE class=ADMenuBtn cellSpacing=0> <TBODY> <TR> <TD class=ADMenuOn id=ADm0 onmouseover=ADMenu(0);>标签1</TD> <TD class=ADMenuOff id=ADm1 onmouseover=ADMenu(1);>标签2</TD> <TD class=ADMenuOff id=ADm2 onmouseover=ADMenu(2);>标签3</TD> <TD class=ADMenuOff id=ADm3 onmouseover=ADMenu(3);>标签4</TD> <TD class=ADMenuOff id=ADm4 onmouseover=ADMenu(4);>标签5</TD> <TD class=ADMenuOff id=ADm5 onmouseover=ADMenu(5);>标签6</TD> <TD class=ADMenuOff id=ADm6 onmouseover=ADMenu(6);>标签7</TD></TR></TBODY></TABLE> <DIV id=ADcon0> <TABLE class=ADMenuCon cellSpacing=0> <TBODY> <TR> <TD> ·<a href="/developer/generalize/2006/1210/512.htm" target="_blank">网页浏览速度提高</a></TD> <TD>·<a href="/developer/web/2006/1210/511.htm" target="_blank">行业网站设计心得</a></TD> </TR></TBODY></TABLE></DIV> <DIV id=ADcon1 style="DISPLAY: none"> <TABLE class=ADMenuCon cellSpacing=0> <TBODY> <TR> <TD>·标签2的内容</TD> <TD>·标签2的内容</TD></TR></TBODY></TABLE></DIV> <DIV id=ADcon2 style="DISPLAY: none"> <TABLE class=ADMenuCon cellSpacing=0> <TBODY> <TR> <TD>·标签3的内容</TD> <TD>·标签3的内容</TD></TR></TBODY></TABLE></DIV> <DIV id=ADcon3 style="DISPLAY: none"> <TABLE class=ADMenuCon cellSpacing=0> <TBODY> <TR> <TD>·标签4的内容</TD> <TD>·标签4的内容</TD></TR></TBODY></TABLE></DIV> <DIV id=ADcon4 style="DISPLAY: none"> <TABLE class=ADMenuCon cellSpacing=0> <TBODY> <TR> <TD>·标签5的内容</TD> <TD>·标签5的内容</TD></TR></TBODY></TABLE></DIV> <DIV id=ADcon5 style="DISPLAY: none"> <TABLE class=ADMenuCon cellSpacing=0> <TBODY> <TR> <TD>·标签6的内容</TD> <TD>·标签6的内容</TD></TR></TBODY></TABLE></DIV> <DIV id=ADcon6 style="DISPLAY: none"> <TABLE class=ADMenuCon cellSpacing=0> <TBODY> <TR> <TD>·标签7的内容</TD> <TD>·标签7的内容</TD></TR></TBODY></TABLE></DIV> <TABLE cellSpacing=0 cellPadding=0 width=6 border=0> <TBODY> </TBODY></TABLE> </td> </tr> </table> |
实际实现效果:
下一篇:Web设计:一屏页面走天下实例(二)Web Tabs