经典布局方案

最新推荐文章于 2024-04-16 19:34:40 发布

风言轻

最新推荐文章于 2024-04-16 19:34:40 发布

阅读量449

点赞数

本文链接：https://blog.csdn.net/qq_34434962/article/details/80259959

版权

一、上中下一栏式

 
      <style> 
 
  body{ 
 
  margin: 
  0; 
 
  font-size: 
  20 
  px; 
 
  text-align: 
  center; 
 
   } 
 
  .wrap{ 
 
  width: 
  900 
  px; 
 
  margin: 
  0 
  auto; 
 
   } 
 
  #header{ 
 
  height: 
  100 
  px; 
 
  background: 
  #6cf; 
 
   } 
 
  #main{ 
 
  height: 
  500 
  px; 
 
  background: 
  #ccffff; 
 
   } 
 
  #footer{ 
 
  height: 
  80 
  px; 
 
  background: 
  #99ccff; 
 
   } 
 
  < 
  /style>

 
  <body> 
 
 
  <header 
   id= 
  "header" 
   class= 
  "wrap" 
  >111 
  </header> 
 
 
  <section 
   id= 
  "main" 
   class= 
  "wrap" 
  >222 
  </section> 
 
 
  <footer 
   id= 
  "footer" 
   class= 
  "wrap" 
  >333 
  </footer> 
 
 
  </body> 
 

二、左右两栏式

 
       <style> 
  
   /* 混合浮动+普通流 */ 
  
   #left{ 
  
   width: 
   200 
   px; 
  
   height: 
   500 
   px; 
  
   background: 
   #ccffff; 
  
   float: 
   left; 
  
    } 
  
   #right{ 
  
   height: 
   500 
   px; 
  
   background: 
   #ffcccc; 
  
   margin-left: 
   200 
   px; 
  
    } 
  
       < 
   /style>

 
   /* 纯浮动式 */ 
  
   .wrap{ 
  
   margin: 
   0 
   auto; 
  
   width: 
   900 
   px; 
  
   overflow: 
   hidden; 
  
    } 
  
   #left{ 
  
   width: 
   200 
   px; 
  
   height: 
   500 
   px; 
  
   background: 
   #ccffff; 
  
   float: 
   left; 
  
    } 
  
   #right{ 
  
   height: 
   500 
   px; 
  
   width: 
   700 
   px; 
  
   background: 
   #ffcccc; 
  
   float: 
   left; 
  
    }

 
   /* 绝对定位 */ 
  
   .wrap{ 
  
   margin: 
   0 
   auto; 
  
   width: 
   900 
   px; 
  
   position: 
   relative; 
  
    } 
  
   #left{ 
  
   width: 
   200 
   px; 
  
   height: 
   500 
   px; 
  
   background: 
   #ccffff; 
  
   position: 
   absolute; 
  
   top: 
   0; 
  
   left: 
   0; 
  
    } 
  
   #right{ 
  
   height: 
   500 
   px; 
  
   width: 
   700 
   px; 
  
   background: 
   #ffcccc; 
  
   position: 
   absolute; 
  
   top: 
   0; 
  
   right: 
   0; 
  
    }

 
   <body> 
  
   <div 
    class= 
   "wrap" 
   > 
  
   <aside 
    id= 
   "left" 
   ></aside> 
  
   <section 
    id= 
   "right" 
   ></section> 
  
   </div> 
  
   </body>

三、左右两栏加页眉页脚

 
       <style> 
  
   .wrap{ 
  
   margin: 
   0 
   auto; 
  
   width: 
   900 
   px; 
  
    } 
  
   #header{ 
  
   height: 
   100 
   px; 
  
   background: 
   #66ccff; 
  
    } 
  
   #main{ 
  
   height: 
   500 
   px; 
  
   background: 
   #ffcccc; 
  
    } 
  
   #footer{ 
  
   height: 
   80 
   px; 
  
   background: 
   #99ccff; 
  
    } 
  
   #left{ 
  
   width: 
   200 
   px; 
  
   height: 
   100 
   %; 
  
   float: 
   left; 
  
   background: 
   #ccffff; 
  
    } 
  
   #right{ 
  
   width: 
   700 
   px; 
  
   height: 
   100 
   %; 
  
   float: 
   right; 
  
   background: 
   #7cd677; 
  
    } 
  
       < 
   /style>

 
   <body> 
  
 
       <header 
    id= 
   "header" 
    class= 
   "wrap" 
   ></header> 
  
 
   <section 
    id= 
   "main" 
    class= 
   "wrap" 
   > 
  
 
   <aside 
    id= 
   "left" 
   ></aside> 
  
 
   <section 
    id= 
   "right" 
   ></section> 
  
 
   </section> 
  
 
   <footer 
    id= 
   "footer" 
    class= 
   "wrap" 
   ></footer> 
  
 
   </body>
 
  

 
  四、左中右三栏 
 

 
       <style> 
  
   .wrap{ 
  
   margin: 
   0 
   auto; 
  
   width: 
   80 
   %; 
  
    } 
  
   #left{ 
  
   width: 
   200 
   px; 
  
   height: 
   500 
   px; 
  
   background: 
   #ccffff; 
  
   float: 
   left; 
  
    } 
  
   #right{ 
  
   width: 
   200 
   px; 
  
   height: 
   500 
   px; 
  
   background: 
   #ccffff; 
  
   float: 
   right; 
  
    } 
  
   #main{ 
  
   height: 
   500 
   px; 
  
   background: 
   #ffcccc; 
  
   margin: 
   0 
   210 
   px; 
  
    } 
  
       < 
   /style>

 
       <div 
    class= 
   "wrap" 
   > 
  
 
   <aside 
    id= 
   "left" 
   ></aside> 
  
 
   <aside 
    id= 
   "right" 
   ></aside> 
  
 
   <section 
    id= 
   "main" 
   ></section> 
  
 
       </div> 
  

五、左中右三栏之双飞翼(*)

 
       <style> 
  
   .wrap{ 
  
   margin: 
   0 
   auto; 
  
   width: 
   80 
   %; 
  
    } 
  
   #main{ 
  
   width: 
   100 
   %; 
  
   float: 
   left; 
  
   background: 
   #ffcccc; 
  
    } 
  
   #left{ 
  
   width: 
   200 
   px; 
  
   float: 
   left; 
  
   height: 
   500 
   px; 
  
   background: 
   #ccffff; 
  
   margin-left: 
   -100 
   %; 
  
    } 
  
   #right{ 
  
   width: 
   200 
   px; 
  
   float: 
   left; 
  
   height: 
   500 
   px; 
  
   background: 
   #ccffff; 
  
   margin-left: 
   -200 
   px; 
  
    } 
  
   .content{ 
  
   height: 
   500 
   px; 
  
   margin: 
   0 
   200 
   px; 
  
    } 
  
   < 
   /style>

 
   <div 
    class= 
   "wrap" 
   > 
  
 
   <section 
    id= 
   "main" 
   > 
  
 
   <div 
    class= 
   "content" 
   >#content 
   </div> 
  
 
   </section> 
  
 
   <aside 
    id= 
   "left" 
   >#left 
   </aside> 
  
 
   <aside 
    id= 
   "right" 
   >#right 
   </aside> 
  
 
   </div> 
  

六、左中右三栏之页眉页脚

 
   <style> 
  
   .wrap{ 
  
   margin: 
   0 
   auto; 
  
   width: 
   900 
   px; 
  
    } 
  
   #header{ 
  
   height: 
   100 
   px; 
  
   background: 
   #66ccff; 
  
    } 
  
   #main{ 
  
   height: 
   500 
   px; 
  
   background: 
   #ffcccc; 
  
    } 
  
   #footer{ 
  
   height: 
   80 
   px; 
  
   background: 
   #99ccff; 
  
    } 
  
   #middle{ 
  
   width: 
   100 
   %; 
  
   float: 
   left; 
  
    } 
  
   #left{ 
  
   width: 
   200 
   px; 
  
   height: 
   100 
   %; 
  
   background: 
   #ccffff; 
  
   float: 
   left; 
  
   margin-left: 
   -100 
   %; 
  
    } 
  
   #right{ 
  
   width: 
   200 
   px; 
  
   height: 
   100 
   %; 
  
   background: 
   #ccffff; 
  
   float: 
   left; 
  
   margin-left: 
   -200 
   px; 
  
    } 
  
   .content{ 
  
   height: 
   500 
   px; 
  
   margin: 
   0 
   200 
   px; 
  
    } 
  
   < 
   /style>

 
  <body> 
 
 
  <header 
   id= 
  "header" 
   class= 
  "wrap" 
  >header 
  </header> 
 
 
  <section 
   id= 
  "main" 
   class= 
  "wrap" 
  > 
 
 
  <section 
   id= 
  "middle" 
  > 
 
 
  <div 
   class= 
  "content" 
  >content 
  </div> 
 
 
  </section> 
 
 
  <aside 
   id= 
  "left" 
  >left 
  </aside> 
 
 
  <aside 
   id= 
  "right" 
  >right 
  </aside> 
 
 
  </section> 
 
 
  <footer 
   id= 
  "footer" 
   class= 
  "wrap" 
  >footer 
  </footer> 
 
 
  </body> 
 