表格布局
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表格布局</title> <link rel="stylesheet" type="text/css" href="css/bgStyle.css" /> </head> <body> <header></header> <nav></nav> <div class="content"> <div class="tablecontent"> <div class="tablerow"> <section id="left"> 杂乱无章 </section> <section id="main"> 杂乱无章 </section> <aside id="right"> 杂乱无章 </aside> </div> </div> </div> <div class="foot"> <footer></footer> </div> </body> </html>
css:
* { margin: 0px; padding: 0px; } html, body { height: 100%; overflow: hidden; background-color: gray; } header { height: 100px; background-color: bisque; margin: 10px 10px 0 10px; } nav { height: 50px; background-color: blueviolet; margin: 10px 10px 0 10px; } .content { position: absolute; top: 170px; bottom: 100px; width: 100%; } .tablecontent { display: table; border-spacing: 10px; height: 100%; width: 100%; } .tablerow { display: table-row; } #left { display: table-cell; background-color: darkmagenta; width: 20%; vertical-align: top; padding: 15px; margin: 0 0 0 10px; } #main { display: table-cell; background-color: dodgerblue; width: 60%; padding: 15px; vertical-align: top; } #right { display: table-cell; background-color: lightcoral; width: 20%; padding: 15px; vertical-align: top; } .foot { position: fixed; bottom: 0px; right: 0px; width: 100%; height: 100px; } footer { height: 100px; background-color: brown; margin: 0 10px 10px 10px; } 
凝胶布局
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>凝胶布局</title> <link rel="stylesheet" type="text/css" href="css/njStyle.css" /> </head> <body> <header></header> <nav></nav> <div class="content clearfix"> <section id="left"> <article> 杂乱无章 </article> </section> <section id="main"> <article> 杂乱无章 </article> </section> <aside id="right"> <article> 杂乱无章 </article> </aside> </div> <footer></footer> </body> </html>
css：
* { margin: 0px; padding: 0px; } html, body { width: 800px; height: 100%; overflow: hidden; background-color: whitesmoke; margin-left: auto; margin-right: auto; } header { height: 100px; background-color: bisque; margin: 10px 10px 0 10px; } nav { height: 50px; background-color: blueviolet; margin: 10px; } .content { position: absolute; top: 180px; bottom: 110px; width: 800px; overflow: hidden; } #left { float: left; background-color: darkmagenta; width: 24%; margin: 0 0 10px 10px; height: 100%; } #main { position: absolute; left: 210px; right: 210px; background-color: dodgerblue; height: 100%; } #right { float: right; background-color: lightcoral; width: 24%; margin: 0 10px 0 0; height: 100%; } footer { position: absolute; bottom: 0; width: 780px; height: 100px; background-color: brown; margin-left: 10px; margin-right: 10px; } article { vertical-align: top; padding: 15px; } .clearfix { zoom: 1; } .clearfix:after { content: ""; display: block; clear: both; overflow: hidden; } 
图中例子是引用<<Head First HTML 与 CSS>>一书,为本人自己发挥所写，可能比较肤浅，大牛可绕过或者多指点指点。。。O(∩_∩)O哈哈~