<!DOCTYPE html> <html lang=”en”> <head> <style type=”text/css”> #header, #nav, #content-main, #content-2, #content-3, #content-4, #content-5, #content-6, #footer { width: 960px; background-color: #eee; border: 1px dashed #ccc; margin: 0 auto; height: 500px; margin-bottom: 5px; }
#header, #header>.inner { height: 120px; border-width: 0; }
/*顶部宽度需要设置成100%*/ #header { width: 100%; }
/*中间部分宽度需与导航栏、内容部分宽度保持一致，并且水平居中*/
#header>.inner { width: 960px;
/*margin是无法继承的，所以要单独设置*/ margin: 0 auto; }
#nav { height: 80px; }
#content-main>.left, #content-main>.right { height: 500px; background-color: #f00; border: 1px solid #000; float: left; }
#content-main>.left { width: 318px; }
#content-main>.right { width: 628px; float: right; }
#footer, #footer>.inner { height: 100px; border-width: 0; }
/*底部宽度需要设置成100%*/
#footer { width: 100%; margin-bottom: 0; }
/*中间部分宽度需与导航栏、内容部分宽度保持一致，并且水平居中*/
#footer>.inner { width: 960px;
/*margin是无法继承的，所以要单独设置*/ margin: 0 auto; }
</style> </head> <body> <div id=”header”> <div class=”inner”>header-inner</div> </div> <div id=”nav”>nav</div> <div id=”content-main”> <div class=”left”>left</div> <div class=”right”>right</div> </div> <div id=”content-2″>content-2</div> <div id=”content-2″>content-3</div> <div id=”content-2″>content-4</div> <div id=”content-2″>content-5</div> <div id=”content-2″>content-6</div> <div id=”footer”> <div class=”inner”>footer-inner</div> </div> </body> </html>