通用布局圣杯

实例

.header{
  width:100%;
  background-color:lightblue;
}
.header  .context{
  width:600px;
  height:60px;
  background-color: lightseagreen;
  margin:0 auto;
 }
.header  .context .nav{
  margin: 0px;
  padding:0px;

  
}
.header  .context .nav .item{
  margin: 0px;
  padding:0px;
  list-style: none;
      position: relative;
}
.header  .context .nav .item a{
  float:left;
  min-height: 30px;
  min-width: 70px;
  height: 30px;
  width:70px;
  line-height: 30px;
  text-align:center;
  margin:5px;
  padding:5px;
  text-decoration-line: none;

}
.contain{
  min-height:390px;
  width:300px;
    margin:6px auto;
}
.contain .main{
    background-color:#ccc;
     min-height: inherit;
     width:inherit;

}
.contain  .left{
  background-color:#D2B48C;
    width:150px;
    min-height: 390px;
   margin-left:-450px;
}
.contain  .right{
  width:150px;
  background-color:#DC143C;
   min-height: 390px;
   margin-right:-150px;
}
.main ,.left,.right{
  float:left;
}
.footer{
  width:100%;
  background-color:lightblue;

}
.footer .context{
  width:600px;
  height:60px;
  background-color:lightseagreen; 
  margin:0 auto;
}

.footer .context  p{
     text-align:center;
     line-height:60px; 
}
.footer .context  p a{
  text-decoration-line:none;
}

体会：1，老师用的是margin-left，margin-right，相对定位relative进行布局。

       2.我是直接用的margin-left，margin-right，浮动后和直接对main主内容的width进行调节成圣杯的。

3，个人认为不管是上面那个都实现了这个功能。