首页导航栏 - 网络工程 | 网站建设 | 设计在线 | 精彩图片 | 职业前线 | 创业之路 | 启步工具 | 教程资讯 | 休闲娱乐
启步网 > 网站建设 > 网站编程
Web设计:一屏页面走天下实例(一)
作者: sunhy 阅读: 来源:启步网 时间:2006-12-22 11:04:59
字体

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>

 

实际实现效果:

标签1 标签2 标签3 标签4 标签5 标签6 标签7
·标签6的内容 ·标签6的内容
下一篇:Web设计:一屏页面走天下实例(二)Web Tabs

责任编辑:一路狂奔
帐号:
密码:

Google
Google提供的相关资源
参与评论(条评论)
请遵守国家法律
笔名:
邮箱:
( 以上评论仅代表网友个人意见,不代表本站观点 )
相关资源
  • Web页面托拽 JavaScript Drag Demo 实例 [2007-1-28]
  • JavaScript Google IG Drag Demo [2007-1-28]
  • 怎么用javascript进行拖拽 [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(二) [2007-1-28]
  • Web页面元素拖拽实例系列—专题篇 [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(一) [2007-1-28]
  • 类似Google个性化主页,实现Web桌面托拽的实例 [2007-1-28]
  • 千万数量级分页存储过程实例 [2007-1-28]
  • 自己开发的自定义分页控件 [2007-1-28]
  • JS+ASP打造无刷新新闻列表 [2007-1-26]
  •