“横向两列布局”扩展-博客页面布局

   根据课程“网页布局基础”中“横向两列布局”的讲解中，自我实践，扩展了原视频代码的内容，实现布局样式在浏览器不同尺寸窗口下保持头部尾部样式不变的美观性。

![图片描述][1]

    
 
 
 

     *{
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
  font-size: 20px;
     }
     #wrap{
  width: 90%;
  margin: 0 auto; 
     }
     #head{
  background-color: blue;
  width: 90%;
  position: fixed;
  height: 60px;
  top: 0;
     }
     #mainbody{
  background-color: ;
  overflow: hidden; 
  margin:70px 0; 

  height: 500px;
     }
     .left{
  background-color: green;
  width: 70%;
  height: inherit;
  float: left;
     }
     .right_1{
  background-color: pink;
  width: 28%;
  height: 200px;
  margin-top:; 
  float: right;
     }
     .right_2{
  background-color: gray;
  width: 28%;
  height: 500px; 
  float: right;
  margin-top: 20px;
  bottom: 0px;
     }
     #footer{
  background-color: red;
  height: 60px;
  width: inherit; 
  position: fixed;
  bottom: 0; 
     }
 
    
    
 
     
  头部
     
     
  
  主体左边区域
  主体右上边区域
  主体右下边区域

     
     
  尾部
     
 
    
```

  [1]: http://img1.sycdn.imooc.com/56fbf3be0001b54a13660678.jpg