DIV CSS 布局定位 執行個體 菜單導航 詳解

 

   為什麼要用Div Css可以簡單的作如下解釋：

   當時創造WEB的那個人也發明了用TABLE布局，當TABLE布局泛濫之後，然後他說:我創造了WEB也毀了WEB，TABLE布局會給一個網頁帶來大量無意義的語句難以閱讀。TABLE是來幹什麼的，TABLE是表格,從來都不是用來布局用的,現在我們要使TABLE重新開始顯示它自己的意義:表示表格式資料.所以TABLE根本不應該用在網頁布局上面.    而且CSS+DIV具有以下特點和優勢：

    優勢：1、符合W3C標準。微軟等公司均為W3C支援者。這一點是最重要的，因為這保證您的網站不會因為將來網路應用的升級而被淘汰。

         2、支援瀏覽器的向後相容，也就是無論未來的瀏覽器大戰，勝利的是IE7或者是Firefox，您的網站都能很好的相容。 

         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="#" onclick='switchRole("1", "Management Subsystem")'>Management Subsystem</A> </LI>

         <LI><A href="#" onclick='switchRole("3", "User Subsystem")'>User Subsystem</A> </LI><LI><A href="#" onclick='switchRole("8", "Device Subsystem")'>Device Subsystem</A> </LI>

<LI><A href="#" onclick='switchRole("20", "Task Subsystem")'>Task Subsystem</A> </LI>         </UL></DIV></DIV><a href="#" onclick="javascript:document.location='jumpToMain.do?cmd=selectSystem';" id="n-9">Switch System</a><a href="#" id="n-7" onclick="doLogout();"> LogOff  </a><!--注  銷  --><a href="#" id="n-6" onclick="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="#" onclick="hideToolBar();" id="n-3">Switch System</a><a href="#" id="n-1" onclick="doLogout();"> LogOff  </a><!--注  銷  --><a href="#" id="n-2" onclick="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);" onclick='javascript:modifyPasswd();' class="actived">Change Password</a><a href="javascript:void(0);" onclick='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="#" onclick='switchRole("1", "Management Subsystem")' class="actived">Management Subsystem</a><a href="#" onclick='switchRole("3", "User Subsystem")' class="actived">User Subsystem</a><a href="#" onclick='switchRole("8", "Device Subsystem")' class="actived">Device Subsystem</a><a href="#" onclick='switchRole("20", "Task Subsystem")' class="actived">Task Subsystem</a><a href="#" onclick='switchRole("21", "Msg Subsystem")' class="actived">Msg Subsystem</a>    </div>    <div id="subNav-1" style="display:none;padding-left:300px;"><a href="#" onclick="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="#" onclick="doLogoff();" class="actived"><!-- 退出目前使用者,並關閉頁面。 -->Exit the current user, and shut down the page!</a></div></div></div></div>

 

“身子”是一個左右結構，左邊是菜單，右邊是內容顯示頁，中間還有一個隱藏控制工具，代碼如：

<div id=toolAndContent onclick="switchMenuTool(); event.cancelBubble = true;"><div id=menuTool><div id=menuSystem></div><div class="mainMenu" id="m1" onclick="showSecondMenu('m1',2);event.cancelBubble = true;"><!-- 一級菜單 -->Personal Settings</div><div class="secMenu" id="m1-0"><!-- 二級菜單 --><a href="#" onclick='javascript:modifyPasswd();event.cancelBubble = true;'> Change Password</a></div><div class="secMenu" id="m1-1"><!-- 二級菜單 --><a href="#" onclick='javascript:openWindow("personalInfo.do?actionRelatMenuId=104",680, 450, "users");event.cancelBubble = true;'> Edit Profile</a></div></div><div id="middleTool" onclick="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"  onclick="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