本文是在上一篇blog的圣杯布局和雙飛翼布局基礎(chǔ)上的一些改進。

不考慮把layout__main這個元素放在最前面，雖然經(jīng)典的做法都要求把layout__main做法放在前面，這樣可以讓網(wǎng)頁主體內(nèi)容優(yōu)先渲染，我認為這種考慮是完全多余的。

兩欄的布局

1.左側(cè)固定，主要內(nèi)容自適應(yīng)

主要運用知識點

• 負邊距 margin-left: -.....；
• 浮動 float:left;
• 填充 padding;

     <div class="layout">
       <div class="layout_left"></div>
       <div class="layout_main"></div>
     </div>    

css樣式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-left: 210px;
}
.layout_left,.layout_main{
  height: 100px;
  float: left;
}
.layout_main{
  width:100%;
  background: red;
}
.layout_left{
  width: 200px;
  background: green;
  margin-left: -210px;
}

對應(yīng)效果 請點擊,comecomecome.

2. 右側(cè)固定左側(cè)主要內(nèi)容自適應(yīng)

主要運用知識點

• 負邊距 margin-left: -.....；
• 浮動 float;
• 填充 padding;
• 注意相對于左邊固定浮動變成了右浮動相應(yīng)的負邊距也變成了右

     <div class="layout">
       <div class="layout_main"></div>
       <div class="layout_right"></div>
     </div>    

css樣式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-right: 210px;
} 
.layout_main{
  width:100%;
  background: red;
  height: 100px;
  float: left;
}
.layout_right{
  float: right;
  width: 200px;
  height: 100px;
  background: green;
  margin-right: -210px;
}

對應(yīng)效果 請點擊,comecomecome.

三欄布局

在傳統(tǒng)的圣杯布局上有一些改動，效果和圣杯布局相似

左右2邊固定，中間內(nèi)容自適應(yīng)

主要運用知識點

• 負邊距 margin-left: -.....；
• 浮動 float;
• 填充 padding;
• 注意左右浮動和左右負邊距

<div class="layout">
    <div class="layout">
      <div class="layout_left"></div>
      <div class="layout_main"></div>
      <div class="layout_right"></div>
    </div>
</div>

css樣式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding: 0 210px;
}
.layout_left,.layout_main{
   float: left;
   height: 100px;
}
.layout_left{
  width: 200px;
  margin-left: -210px;
  background: red;
}
.layout_main{
  width: 100%;
  background: #adcdef;
}
.layout_right{
  float: right;
  width:200px;
  height: 100px;
  background: #666;
  margin-right: -210px;
}

對應(yīng)效果 請點擊,comecomecome.

2個固定項目都在左邊固定，主要內(nèi)容在項目右邊自適應(yīng)

主要運用知識點

• 負邊距 margin-left: -.....；
• 浮動 float;
• 填充 padding;
• 注意左右浮動和左右負邊距

<div class="layout">
     <div class="layout_left1"></div>
     <div class="layout_left2"></div>
     <div class="layout_main"></div>
</div>

css樣式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-left: 420px;
}
.layout_left1,.layout_left2,.layout_main{
  float: left;
  height: 100px;
}
.layout_left1{
   width: 200px;
   background: red;
   margin-left: -420px;
}
.layout_left2{
   width: 200px;
   margin-left: -210px;
   background: orange;
}
.layout_main{
  width: 100%;
  background: blue;
}

對應(yīng)效果 請點擊,comecomecome.

2個固定項目都在右邊固定，主要內(nèi)容在項目左邊自適應(yīng)

主要運用知識點

• 負邊距 margin-left: -.....；
• 浮動 float;
• 填充 padding;
• 注意左右浮動和左右負邊距

<div class="layout">
     <div class="layout_main"></div>
     <div class="layout_right1"></div>
     <div class="layout_right2"></div>
</div>

css樣式

.layout:after{
   display: block;
   content: "";
   clear:both;
}
.layout{
  padding-right: 420px;
}
.layout_main{
  width: 100%;
  background: #eee;
  height:100px;
  float: left;
}
.layout_right1,.layout_right2{
  float: right;
  height: 100px;
  width: 200px;
}
.layout_right1{
  background: red;
  margin-right: -210px;
}
.layout_right2{
  background: blue;
  margin-right: -420px;
}

對應(yīng)效果 請點擊,comecomecome.