DIV CSS 布局定位 实例 菜单导航 详解

   为什么要用Div Css可以简单的作如下解释：

   当时创造WEB的那个人也发明了用TABLE布局，当TABLE布局泛滥之后，然后他说:我创造了WEB也毁了WEB，TABLE布局会给一个网页带来大量无意义的语句难以阅读。TABLE是来干什么的，TABLE是表格,从来都不是用来布局用的,现在我们要使TABLE重新开始显示它自己的意义:表示表格数据.所以TABLE根本不应该用在网页布局上面.
    而且CSS+DIV具有以下特点和优势：

    优势：1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

         2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 

         3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 

         4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和

            主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

         5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。6、表现和结构分离，

           在团队开发中更容易分工合作而减少相互关联性。

1、基本框架搭建

基本框架由“头”和“身子”组成，“头”由class为header的Div填充，“身子”由id为toolAndContent的Div组成。

<div class="header"></div> <div id=toolAndContent></div>

这样就组成了一个上下结构的页面，“头”和“身子”肯定还有许多复杂的部分，首先描绘“头”的出基本组成：

<div class="header"> <div class="padder"> <div class="nav"> <div class="navLaftBg"> <div class="navRightBg"> <!-- 左侧菜单时打开 --> <div id=headTitle> <DIV style="DISPLAY: none" id=blk1 class=blk> <DIV class=sList id=close1> <UL> <LI><A href="#" οnclick='switchRole("1", "Management Subsystem")'>Management Subsystem</A> </LI> <LI><A href="#" οnclick='switchRole("3", "User Subsystem")'>User Subsystem</A> </LI> <LI><A href="#" οnclick='switchRole("8", "Device Subsystem")'>Device Subsystem</A> </LI> <LI><A href="#" οnclick='switchRole("20", "Task Subsystem")'>Task Subsystem</A> </LI> </UL> </DIV> </DIV> <a href="#" οnclick="javascript:document.location='jumpToMain.do?cmd=selectSystem';" id="n-9">Switch System</a> <a href="#" id="n-7" οnclick="doLogout();">LogOff </a><!--注 销 --> <a href="#" id="n-6" οnclick="doLogoff();">LogOut</a><!-- 安全退出 --> </div> <div id=hederTimag><img src="css/title.png" height="28px" width="500px"/> </div> <div class="mainNav" style="display: none"><!-- 左侧菜单时以下隐藏,这里是菜单在头部时的输出 --> <a href="#" οnclick="hideToolBar();" id="n-3">Switch System</a> <a href="#" id="n-1" οnclick="doLogout();">LogOff </a><!--注 销 --> <a href="#" id="n-2" οnclick="doLogoff();">LogOut</a><!-- 安全退出 --> </div> </div> </div> </div> <div class="secondNav" style="display: none"> <div id="subNav1" style="display: none;padding-left:50px;"> <a href="javascript:void(0);" οnclick='javascript:modifyPasswd();' class="actived"> Change Password </a> <a href="javascript:void(0);" οnclick='javascript:openWindow("personalInfo.do?actionRelatMenuId=104",680, 450, "users");' class="actived"> Edit Profile </a> </div> <div id="subNav-3" style="display:none;padding-left:300px;"> <a href="#" οnclick='switchRole("1", "Management Subsystem")' class="actived">Management Subsystem</a> <a href="#" οnclick='switchRole("3", "User Subsystem")' class="actived">User Subsystem</a> <a href="#" οnclick='switchRole("8", "Device Subsystem")' class="actived">Device Subsystem</a> <a href="#" οnclick='switchRole("20", "Task Subsystem")' class="actived">Task Subsystem</a> <a href="#" οnclick='switchRole("21", "Msg Subsystem")' class="actived">Msg Subsystem</a> </div> <div id="subNav-1" style="display:none;padding-left:300px;"> <a href="#" οnclick="doLogout();" class="actived"><!-- 退出当前用户,并转到登录页面！ -->Exit the current user, and then move on to login page!</a> </div> <div id="subNav-2" style="display:none;padding-left:350px;"> <a href="#" οnclick="doLogoff();" class="actived"><!-- 退出当前用户,并关闭页面！ -->Exit the current user, and shut down the page!</a> </div> </div> </div> </div>

“身子”是一个左右结构，左边是菜单，右边是内容显示页，中间还有一个隐藏控制工具，代码如：

<div id=toolAndContent οnclick="switchMenuTool(); event.cancelBubble = true;"> <div id=menuTool> <div id=menuSystem> </div> <div class="mainMenu" id="m1" οnclick="showSecondMenu('m1',2);event.cancelBubble = true;"><!-- 一级菜单 --> Personal Settings </div> <div class="secMenu" id="m1-0"><!-- 二级菜单 --> <a href="#" οnclick='javascript:modifyPasswd();event.cancelBubble = true;'>Change Password</a> </div> <div class="secMenu" id="m1-1"><!-- 二级菜单 --> <a href="#" οnclick='javascript:openWindow("personalInfo.do?actionRelatMenuId=104",680, 450, "users");event.cancelBubble = true;'>Edit Profile</a> </div> </div> <div id="middleTool" οnclick="switchMenuTool(); event.cancelBubble = true;"> <img id=leftBar src="css/pic23.gif" width="9" height="90" alt="向左打开" border="0" /> <img id=rightBar src="css/pic24.gif" width="9" height="90" alt="向右打开" border="0" style="display:none" /> </div> <div id="contentDiv" οnclick="switchMenuTool(); event.cancelBubble = true ;"> <iframe id=mainFrame name="mainFrame" src="http://www.baidu.com" class="mainFramCssMin"></iframe> </div> </div>

2、布局控制

按照上面的组合，我们期望得到一个如下图的布局

但是，当我们的窗口大小发生改变时，这些Div总是不那么老实的呆在原来的位置，挨挤了就变形了，网上有很多资料都说增加div的float：left属性，或者增加不换行标记等都不能实际解决问题。

如何让头保持最小的宽度，如何让左侧菜单div在隐藏与显示时，都不影响右侧工具和内容div的位置，工具div和内容div始终保持右侧水平跟随状态呢，正确的做法是混合使用使用绝对定位和相对定位。

首先了解一下绝对定位和相对定位的作用：

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角的0点开始计算，
绝对定位使元素与文档流无关，因此不占据空间。普通文档流中其这元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布事HTML元素。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。）

由此可以看出想要一个元素跟着网页中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的，单纯用绝对定位是不行的。

正确的解决方法就是在元素的父级元素定义为position:relative，针对前面构造的页面框架，通过CSS来控制div的位置

/*左侧菜单样式*/ #toolAndContent{ position:absolute;left:1px;top:30px; min-width: 730px;min-height:600px;background-color:#F0F9FE; width: expression(document.body.clientWidth < 1010? "1010px": "99.5%" )/*最小宽度设置*/;height:expression(document.body.clientHeight -30 +"px"); } #menuTool{ float:left;width:240px;margin-right:-2; } #middleTool{ float: left; margin-right:-3;margin-top:150px;cursor:hand; } #contentDiv{ position:absolute;top:0px;height:100%; border-color:blue;background-color:#F0F9FE;cursor: hand; } 这里对身子(toolAndContent)进行了绝对定位，以保证身子在头的下面，菜单栏(menuTool)和工具栏(middleTool)都使用了相对定位，左跟随的设置。而对右侧的内容(contentDiv)使用了绝对定位。

3、Div + iframe + Css控制剩余高度

我们在内容中使用了一个iframe，用来动态显示用户访问的页面，如何让这个iframe的高度和宽度，能够占满除头和左侧菜单外的剩余空间呢，设置width和height为绝对值或者百分比都不能同时满足自适应窗口大小，而又不变形的要求，正确的做法是，使用Css的expression表达式，把CSS属性和Javascript脚本关联起来。这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

结合以上布局的例子如下：

.mainFramCssMin{ min-width:730px;height: 100%; width: expression(document.body.clientWidth < 730 ? "730px": (document.body.clientWidth -245 +"px") ); /**width: expression(document.body.clientWidth < 730 ? "730px": "100%" )**/ /*最小宽度设置*/; } .mainFramCssMax{ min-width:730px;height: 100%; width: expression(document.body.clientWidth < 730 ? "730px": (document.body.clientWidth -5 +"px") ); /**width: expression(document.body.clientWidth < 730 ? "730px": "100%" )**/ /*最小宽度设置*/; }

通过这两个CSS的切换，达到左侧菜单打开和隐藏时，自动改变右侧内容大小的目的，同时利用expression表达式，结合javascript获取页面窗口大小，再减去左侧div的宽度和头的高度，达到自动填满窗口的剩余空间的目的。

我们还需要结合jquery自动控制两个左侧菜单的隐藏和右侧内容的样式改变，

var tType = 1; function switchMenuTool(){ if(tType == '1'){ $("#leftBar").hide(); $("#menuTool").hide(500); $("#mainFrame").attr("class","mainFramCssMax"); $("#rightBar").show(); tType = 2; }else{ $("#rightBar").hide(); $("#menuTool").show(300); $("#mainFrame").attr("class","mainFramCssMin"); $("#leftBar").show(); tType = 1; } }

完整的页面效果：

需要原文件的，可以去我的资源库里面下载：http://download.csdn.net/detail/eagleking012/3627722