常見布局方式 · CSS

[TOC] ## 1. 一列固定寬度且居中 ![](https://img.kancloud.cn/6b/e7/6be771a7755cec71dcfb18809c23de6e_645x601.jpg) 代碼如下： **`html\12 一列固定寬度且居中（頁面布局）.html`** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 900px; background-color: #eee; border: 1px dashed #ccc; margin: 0 auto; } .top { height: 80px; } .banner { height: 120px; /*margin: 0 auto;*/ margin: 5px auto; } .main { height: 500px; } .footer { height: 100px; /*margin: 0 auto; margin-top:5px;*/ margin: 5px auto 0; } </style> </head> <body> <div class="top box">top</div> <div class="banner box">banner</div> <div class="main box"></div> <div class="footer box"></div> </body> </html> ``` <br/> ## 2. 兩列左窄右寬型 ![](https://img.kancloud.cn/3e/7e/3e7ed641f6864eb5f0e3ce877a65b2f9_645x601.jpg) 代碼如下： **`html\12 左右型結構（頁面布局）.html`** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .top { width: 900px; height: 80px; background-color: pink; margin: 0 auto; } .banner { width: 900px; height: 150px; background-color: purple; margin: 0 auto; } .main { width: 900px; height: 500px; background-color: skyblue; margin: 0 auto; } .left { width: 288px; height: 500px; background-color: yellow; float: left; border: 1px solid red; } .right { width: 600px; height: 500px; background-color: deeppink; float: right; } .footer { width: 900px; height: 120px; background-color: black; margin: 0 auto; } </style> </head> <body> <div class="top"></div> <div class="banner"></div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer"></div> </body> </html> ``` <br/> ## 3. 通欄平均分布型 ![](https://img.kancloud.cn/ed/40/ed400e3c29bdddc5bafe0cea021abc42_1102x853.jpg) 代碼如下： **`html\12 通欄結構（頁面布局）.html`** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .top { height: 80px; background-color: pink; } .top-inner { width: 900px; height: 80px; background-color: #ababab; margin: 0 auto; } .banner { width: 900px; height: 150px; /*background-color: purple;*/ margin: 0 auto; } .banner li { float: left; width: 217px; height: 150px; margin-right: 10px; } .one { background-color: purple; } .two { background-color: blue; } .three { background-color: red; } .banner .four { background-color: green; margin-right: 0; float: right; } .main { width: 900px; height: 500px; background-color: skyblue; margin: 0 auto; } .left { width: 288px; height: 500px; background-color: yellow; float: left; border: 1px solid red; } .right { width: 600px; height: 500px; background-color: deeppink; float: right; } .footer { width: 900px; height: 120px; background-color: black; margin: 0 auto; } </style> </head> <body> <div class="top">  </div> <div class="banner"> <ul> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> </ul> </div> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer"></div> </body> </html> ```