经典布局

一、上中下一栏式布局
      <style>
      #header{
            height:100px;
            background:#6cf;
        }
        #main{
            height:500px;
            background: #ccffff;
        }
        #footer{
            height:100px;
            background:#6cf;
        }
      </style>
    <header id="header">header</header>
    <section id="main">section</section>
    <footer id="footer">footer</footer>
    
   二、 左右两栏式布局

    <div class="warp">
            <aside id="left"></aside>
            <section id="right"></section>
        </div>
      1、混合浮动+普通流
      <style>
       .warp{
            width:80%;
            margin:0 auto;
        }
        #left{
            width:200px;
            height:500px;
            background:#20884d;
            float:left;
        }
        #right{
            height:500px;
            background:rgb(255, 243, 204);
            margin-left:200px;
        }
      </style>  
     2、 纯浮动式两栏布局(可以自适应网页宽度)
       .warp{
            width:80%;
            margin:0 auto;
            overflow: hidden;  
        }
        #left{
            width:200px;
            height:500px;
            background:#20884d;
            float:left;
        }
        #right{
            height:500px;
            background:rgb(255, 243, 204);
            width:700px;
            float:right;
        }
        3、绝对定位式
        .warp{
            width:900px;
            margin:0 auto;
            position:relative;
        }
        #left{
            width:200px;
            height:500px;
            background:#20884d;
            position:absolute;
            top:0;
            left:0;
        }
        #right{
            height:500px;
            background:rgb(255, 243, 204);
            width:700px;
            position:absolute;
            top:0;
            right:0;
        }
        
        三、左中右三栏布局
      
        1、左右宽度固定，中间自适应\
          <div class="warp">
            <aside id="left"></aside>
            <aside id="right"></aside>
            <section id="centers"></section>
        </div>
        
        .warp{
            width:80%;
            margin:0 auto;
        }
        #left{
            width:200px;
            height:500px;
            background:#20884d;
            float: left;
        }
        #right{
            height:500px;
            background:rgb(255, 243, 204);
            width:200px;
            float:right;
        }
        #centers{
            height:500px;
            background: #ddd;
            margin:0 210px;
        }
        2、双飞翼布局
        <div class="wrap">
        <session id="main">
            <div class="content">content</div>    
        </session>
        <aside id="left">left</aside>
        <aside id="right">right</aside>
    </div>
        .wrap{
            margin:0 auto;
            width:80%;
        }
        #main{
            width:100%;
            float:left;
            background: darkgrey;
        }
        #left{
            width:200px;
            float:left;
            height:500px;
            background-color:antiquewhite;
            margin-left:-100%;
        }
        #right{
            width:200px;
            float:left;
            height:500px;
            background-color:antiquewhite;
            margin-left:-200px;
        }
        .content{
            height:500px;
            margin: 0 200px;
        }