页面布局的几种方式

/*一列布局*/

<div class="top"></div>

<div class="main"></div>

<div class="footer"></div>

<style>

*{margin: 0; padding: 0;}

   .top {height:100px;background: blue}

 .main {width: 800px;height:300px;background:#ccc; margin:0 auto;}

.footer { width: 800px; height:100px;background:#900; margin: 0 auto;}

</style>

 

/*两列布局*/

<div class="main">

     <div class="left"></div>

       <div class="right"></div>

</div>

<style>

*{margin:0; padding: 0;}

.main {width: 800px; margin: 0 auto;}

.left{width: 20%; height: 500px; float:left; background: #ccc;}

.right{width: 80%;height: 500px; float:right; background: #ddd;}

</style>

 

 

/*三列布局 */

<div class="left"></div>

<div class="middle"></div>

 <div class="right"></div>

<style>

.left{width: 33.33%; height: 500px; float:left; background: #ccc;}

.middle{width: 33.33%;height: 500px; float:left; background: #999;}

.right{width: 33.33%;height: 500px; float:right; background: #ddd;}

</style>

 

/*三列布局（用定位）*/

<div class="left">200px固定宽度</div>

<div class="middle">自适应宽度</div>

 <div class="right">300px固定看宽度</div>

<style>

.left{width: 200px; height: 500px; background: #ccc; position: absolute; left:0; top:0;}

.middle{ height: 500px; background: #999; margin: 0  310px  0  210px; }

.right{ width: 300px;height: 500px; background: #ddd;position: absolute;right:0;top:0;}

</style>

 

 

/*混合布局*/

<div>

<div class="top">

    <div  class="head"></div>

</div>

<div  class="main">       

         <div class="left"></div>

         <div class="right">

                <div class="sub_l"></div>

                <div class="sub_r"></div>

          </div>

</div>

<div  class="footer"></div>

</div>

<style>

  *{ margin: 0; padding: 0;}

.top{ height: 100px; background: blue;}

.head { height: 100px;width:800px; background: #f60; margin: 0 auto; }

.main{ width: 800px; height:600px;background: #ccc; margin: 0 auto;}

.left {width: 200px; height:600px; background: yellow; float: left;}

.right { width: 600px; height: 600px; background: #369; float:right;}

.sub_l { width: 400px; height: 600px; background:green; float:left; }

.sub_r { width: 200px; height: 600px; background: #09f; float: right; }

.footer{ width: 800px; height: 100px;background: #900; margin: 0 auto;}

</style>