css布局之圣杯篇

 

 

html：

<div class="header">我是头部哦</div>
      <div class="container">
              <div class="center">
                     我要适应中间
              </div>
              <div class="left">
                      我固定左边哦
              </div>
              <div class="right">
                      我固定右边哦
             </div>
     </div>
<div class="footer">我是脚部哦</div>        

css：

.header {
    width: 100%;
    background: red;
    height: 50px;
}
.container {
    clear: both;
    overflow: hidden;
    padding: 0 130px 0 100px;
}
.container .left {
    width: 100px;
    float: left;
    background: orange;
    height: 100px;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.container .center {
    background: green;
    height: 100px;
    float: left;
    width: 100%;
}
.container .right {
    width: 130px;
    float: left;
    background: blue;
    height: 100px;
    margin-left: -130px;
    position: relative;
    right: -130px;
}
.footer {
    width: 100%;
    background: red;
    height: 50px;
}

　效果图：

主要思路：center-->left-->right。