很酷的頁面布局框架

建高樓大廈時，我們總是先用鋼筋水泥搭好骨架，然后再加磚添瓦，布置每套房屋。編寫一個網頁也是這樣，須先將布局框架搭好穩固，之后才能游刃有余。本博文闡述如何實現了兩欄布局（main欄和sub欄），三欄布局（main欄、sub欄和extra欄），以及布局中各欄的排列順序。

本示例布局框架具有以下特性：

1. 跨瀏覽器：兼容IE6。
2. 穩固性：布局穩固，不受內容的影響。
3. 有利於seo：從代碼角度，main欄處於sub欄和extra欄之前。
4. 寬度自適應：main欄寬度隨容器的寬度變化而變化。
5. 可擴展性：每種布局的html代碼都相同，通過css代碼渲染出不同的排列。

兩欄布局以及欄的排列，效果如下圖所示：

 

三欄布局以及欄的排列，效果如下圖所示：

 

上邊列出的1點和2點就不必多費口舌了，那是布局框架的必然要求。: )

要理解第3點首先要有些seo的知識。seo的首要原則是內容為王，最原創的東西最受搜索引擎青睞。而網頁中最原創的內容（比如一篇文章）就放在main欄，sub欄和extra欄放不同頁面共用的鏈接或者廣告。從代碼角度，main欄內容處於其他欄內容之前，更有利於搜索引擎收錄。

對於第4點——main欄寬度自適應，您可以改變#container選擇符的width屬性值，然后在瀏覽器中查看效果。補充說明一下，上圖的sub230表示sub欄的寬度固定為230像素，extra160表示extra欄的寬度固定為160像素。

對於第5點——可擴展性，要說明的是，每種布局的html代碼並非完全相同，有一點不同是選擇符命名空間，這很酷很重點。兩欄布局中命名空間用.m-s230和.s230-m，三欄布局中用.e160-m-s230和.s230-m-e160。名稱指明了欄的順序和寬度，.m-s230表示main欄在左邊，sub欄在右邊；相反.s230-m表sub欄在左邊，main欄在右邊。您能推出.e160-m-s230和.s230-m-e160各表示什么。: )

PS：這里且用命名空間這個術語，在面向對象編程中，它用於區分同名的類，這里用於區分同名選擇符。

最后還是老實confess，本示例代碼並非原創，而是從友商網站部的黃建倫帥哥那里偷師而來。從他那里學了不少，感激不盡！: )

粘出源碼如下：

 
          <! 
          DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" 
          > 
          
 
          < 
          html 
          > 
          
 
          < 
          head 
          > 
          
 
          < 
          meta  
          http-equiv 
          ="Content-Type" 
           content 
          ="text/html; charset=UTF-8" 
          > 
          
 
          < 
          title 
          ></ 
          title 
          > 
          
 
          < 
          style  
          type 
          ="text/css" 
          > 
          
.main_wrap{ 
          background-color: 
          #DDD;} 
          
.col_sub{ 
          background-color: 
          #CCC;} 
          
.col_extra{ 
          background-color: 
          #EAEAEA;} 
          

#container{ 
          width: 
          960px; 
          margin: 
          30px auto 0;} 
          
.layout{ 
          zoom: 
          1;} 
          
.layout:after{ 
          clear: 
          both; 
          content: 
          "."; 
          display: 
          block; 
          height: 
          0; 
          visibility: 
          hidden;} 
          
.col_main{ 
          float: 
          left; 
          width: 
          100%; 
          min-height: 
          1px;} 
          
.col_sub,.col_extra{ 
          float: 
          left;} 
          
 
          </ 
          style 
          > 
          
 
          </ 
          head 
          > 
          
 
          < 
          body 
          > 
          
 
          < 
          style  
          type 
          ="text/css" 
          > 
          
.m-s230 .main_wrap{ 
          margin-right: 
          240px;} 
          
.m-s230 .col_sub{ 
          width: 
          230px; 
          margin-left: 
          -230px;} 
          
 
          </ 
          style 
          > 
          
 
          < 
          div  
          id 
          ="container" 
          > 
          
     
          < 
          div  
          class 
          ="layout m-s230" 
          > 
          
         
          < 
          div  
          class 
          ="col_main" 
          > 
          
             
          < 
          div  
          class 
          ="main_wrap" 
          > 
          
                main 
          
             
          </ 
          div 
          > 
          
         
          </ 
          div 
          > 
          
         
          < 
          div  
          class 
          ="col_sub" 
          > 
          
            sub230 
          
         
          </ 
          div 
          > 
          
     
          </ 
          div 
          > 
          
 
          </ 
          div 
          > 
          
 
          < 
          style  
          type 
          ="text/css" 
          > 
          
.s230-m .main_wrap{ 
          margin-left: 
          240px;} 
          
.s230-m .col_sub{ 
          width: 
          230px; 
          margin-left: 
          -100%;} 
          
 
          </ 
          style 
          > 
          
 
          < 
          div  
          id 
          ="container" 
          > 
          
     
          < 
          div  
          class 
          ="layout s230-m" 
          > 
          
         
          < 
          div  
          class 
          ="col_main" 
          > 
          
             
          < 
          div  
          class 
          ="main_wrap" 
          > 
          
                main 
          
             
          </ 
          div 
          > 
          
         
          </ 
          div 
          > 
          
         
          < 
          div  
          class 
          ="col_sub" 
          > 
          
            sub230 
          
         
          </ 
          div 
          > 
          
     
          </ 
          div 
          > 
          
 
          </ 
          div 
          > 
          
 
          < 
          style  
          type 
          ="text/css" 
          > 
          
.e160-m-s230 .main_wrap{ 
          margin-left: 
          170px; 
          margin-right: 
          240px;} 
          
.e160-m-s230 .col_sub{ 
          width: 
          230px; 
          margin-left: 
          -230px;} 
          
.e160-m-s230 .col_extra{ 
          width: 
          160px; 
          margin-left: 
          -100%;} 
          
 
          </ 
          style 
          > 
          
 
          < 
          div  
          id 
          ="container" 
          > 
          
     
          < 
          div  
          class 
          ="layout e160-m-s230" 
          > 
          
         
          < 
          div  
          class 
          ="col_main" 
          > 
          
             
          < 
          div  
          class 
          ="main_wrap" 
          > 
          
                main 
          
             
          </ 
          div 
          > 
          
         
          </ 
          div 
          > 
          
         
          < 
          div  
          class 
          ="col_sub" 
          > 
          
            sub230 
          
         
          </ 
          div 
          > 
          
         
          < 
          div  
          class 
          ="col_extra" 
          > 
          
            extra160 
          
         
          </ 
          div 
          >     
          
     
          </ 
          div 
          > 
          
 
          </ 
          div 
          > 
          
 
          < 
          style  
          type 
          ="text/css" 
          > 
          
.s230-m-e160 .main_wrap{ 
          margin-left: 
          240px; 
          margin-right: 
          170px;} 
          
.s230-m-e160 .col_sub{ 
          width: 
          230px; 
          margin-left: 
          -100%;} 
          
.s230-m-e160 .col_extra{ 
          width: 
          160px; 
          margin-left: 
          -160px;} 
          
 
          </ 
          style 
          > 
          
 
          < 
          div  
          id 
          ="container" 
          > 
          
     
          < 
          div  
          class 
          ="layout s230-m-e160" 
          > 
          
         
          < 
          div  
          class 
          ="col_main" 
          > 
          
             
          < 
          div  
          class 
          ="main_wrap" 
          > 
          
                main 
          
             
          </ 
          div 
          > 
          
         
          </ 
          div 
          > 
          
         
          < 
          div  
          class 
          ="col_sub" 
          > 
          
            sub230 
          
         
          </ 
          div 
          > 
          
         
          < 
          div  
          class 
          ="col_extra" 
          > 
          
            extra160 
          
         
          </ 
          div 
          >     
          
     
          </ 
          div 
          > 
          
 
          </ 
          div 
          > 
          
 
          </ 
          body 
          > 
          
 
          </ 
          html 
          > 
         

 

PS：關於頁面布局，還有最簡單的實現方案，請閱讀我的另一篇文章：自適應兩欄布局的最簡實現。