双飞翼页面效果及圣杯效果

双飞翼页面

按照主    子    附加的顺序进行加载 —— 也就是我们常说的”重要的内容先加载
样式

<style>

.main {        
           float: left;       
           width: 100%; background:#F00;
 }  
.sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
            background:#993;
}   
.extra {        
             float: left;        
             width: 230px;        
             margin-left: -230px;
 
             background:#FCF ;
 }
 .main .main-wrap {
    margin-left:200px;  /*与sub产生10像素距离*/
    margin-right:240px; /*与extra产生10像素距离*/
    background:#0f0;
 
}
</style>

 结构：

<div id="page">    
      <div id="hd"></div>    
         <div id="bd">        
              <div class="main">
              		<div class="main-wrap">山地车vsd山地车vsd山地车vsd</div>
              </div>        
              <div class="sub">啥啥啥啥啥啥啥啥啥 </div>        
              <div class="extra">dddddddddddddddddddddddddd</div>    
         </div>   
      <div id="ft"></div>
</div>

 圣杯

<style>
#bd{ padding: 0 230px 0 190px;   }
#bd { overflow: hidden; _zoom: 1;/*ie8一下兼容性处理*/ }
.main, .sub, .extra {padding-bottom: 5000px;margin-bottom: -5000px;/*底部对齐兼容性处理*/}

.main {        
           float: left;       
           width: 100%; background:#F00;
 }  
.sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
		   position: relative;        
           left: -190px;    
		    background:#993; 
}   
.extra {        
             float: left;        
             width: 230px;        
             margin-left: -230px; 
			 position: relative;        
             right: -230px;   
			  
			 background:#FCF ; 
 }
</style>

 

<div id="page">    
      <div id="hd"></div>    
         <div id="bd">        
              <div class="main">中间文字内容容</div>        
              <div class="sub"> </div>        
              <div class="extra">dddddddddddddddddddddddddd</div>    
         </div>   
      <div id="ft"></div>
</div>