很酷的页面布局框架

建高楼大厦时，我们总是先用钢筋水泥搭好骨架，然后再加砖添瓦，布置每套房屋。编写一个网页也是这样，须先将布局框架搭好稳固，之后才能游刃有余。本博文阐述如何实现了两栏布局（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：关于页面布局，还有最简单的实现方案，请阅读我的另一篇文章：自适应两栏布局的最简实现。