浮动布局 

<html>
 <head>
  <title>Float浮动布局
  </title>
  <style>
  div{
     width:100px;
     height:100px;
    
  }
  #headeer{
     width:40px;
     height:40px;
     background:red;
     float:left
  }
  #main{
     width:40px;
     height:40px;
     background:yellow;
     float:right;
  }
  #footer{
     width:40px;
     height:40px;
     background:green;
     float:left;
     margin-top:20px;
  }
  #comm{
     width:40px;
     height:40px;
     background:black;
      margin-top:20px;
     float:right;
  }
  </style>
 </head>
 <body>
   <div>
        <div id="headeer">我是左上</div>
        <div id="main">我是右上</div>
        <div id="footer">我是左下</div>
        <div id="comm">我是右下</div>
    </div>
 </body>
</html>



 

posted @ 2016-04-17 23:07  yfwywnfd  阅读(165)  评论(0)    收藏  举报