双飞翼布局和圣杯布局

双飞翼布局:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Holy Grail of Layouts</title>
</head>
<style>
 #page{
          width:980px;
          margin:0 auto;
 }
 #hd{
          width: 980px;
        background-color:#cccccc;
        height:100px;
 }
 #bd{
          zoom:1;
          overflow:hidden;//消除bd的内部浮动,使footer不会和bd重合  
 }
 .main-wrap{
           margin:0 190px 0 190px;
           background-color:blue; 
           min-height:180px; 
 }
 .main {        
           float: left;       
           width: 100%;

  }  
  .sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
           min-height:30px; 
           /*position:relative;
           left:-190px;*/
    }   
    .extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green; 
          min-height:30px;  
         /* position:relative;
          left:-380px;*/
  }
  #ft{
   width: 980px;
        background-color:#cccccc;
        height:100px;
  }
</style>
<body>
 <div id="page">    
      <div id="hd"></div>    
         <div id="bd">        
              <div><div>asd fsdafasd fsdafasd fsdafasd fsdafasd </div> </div>        
              <div>.sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
    } </div>        
              <div>.extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green;  
  }</div>    
         </div>   
      <div id="ft"></div>
    </div>
</body>
</html>

圣杯布局:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Holy Grail of Layouts</title>
</head>
<style>
 #page{
  width:980px;
  margin:0 auto;
 }
 #hd{
  width: 980px;
        background-color:#cccccc;
        height:100px;
 }
 #bd{
  
  zoom:1;
        overflow:hidden;
        padding:0 190px 0 190px;
       
 }
 .main {        
           float: left;       
           width: 100%;
           background-color:blue; 
           min-height:180px; 
        
  }  
  .sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
           min-height:30px; 
           position:relative;
           left:-190px;
    }   
    .extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green; 
          min-height:30px;  
          position:relative;
          right:-190px;
  }
  #ft{
   width: 980px;
        background-color:#cccccc;
        height:100px;
  }
</style>
<body>
 <div id="page">    
      <div id="hd"></div>    
         <div id="bd">        
              <div><div>asd fsdafasd fsdafasd fsdafasd fsdafasd </div> </div>        
              <div>.sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
    } </div>        
              <div>.extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green;  
  }</div>    
         </div>   
      <div id="ft"></div>
    </div>
</body>
</html>

效果图如下:

双飞翼布局和圣杯布局_第1张图片

        两个布局的思想都是希望中间的内容区域能都先加载,所以把main写在了bd的第一项已达到在浏览器中优先渲染的效果。但是main写在了第一项之后,就不会展示在浏览器的中间,这个时候使用浮动和负的外边距设置使左右两个放置在main两边。

        到了这个位置,两边的侧边栏已经位于了main的两侧了,但是我发现main中的文字并没有显示,那是因为两侧的侧边栏遮住了内容。这个时候就分成了双飞翼布局和圣杯布局。

        圣杯布局是原理是:调整bd的内边距,发现main缩小了,但是两个侧边栏也跟着移动了,这个时候使用position为ralative设置侧边栏的左右两边,就可以完成最终的效果了。

        双飞翼布局的原理是:并不是调整bd的内边距,而是在main的内部再加入一个div,main-warp,调整main-wrap的外边距,就可以达到同样的效果了。

 

你可能感兴趣的:(双飞翼布局和圣杯布局)