一列布局
??? ?<head>
??? ?<style>
??? ?body{ margin:0; padding:0; font-size:30px; font-weight:bold}
???? div{ text-align:center; line-height:50px}
???? .head, .main, .footer{width:80%;margin:0 auto}
???? .head{ height:100px; background:#ccc}
???? .main{ height:600px; background:#FCC}
???? .footer{ height:50px; background:#9CF}
??? ?</style>
???? </head>
???? <body>
???? <div class="head">head</div>
???? <div class="main">main</div>
???? <div class="footer">footer</div>
???? </body>
兩列布局
???? <head>
???? <style>
???? body{ margin:0; padding:0; font-size:30px; font-weight:bold}
???? div{ text-align:center; line-height:50px}
???? .main{ width:80%; height:600px; margin:0 auto}
???? .left{ width:20%; height:600px; background:#ccc; float:left}
???? .right{ width:80%; height:600px; background:#FCC; float:right}
???? </style>
???? </head>
???
???? <body>
???? <div class="main">
???????? <div class="left">left</div>
???????? <div class="right">right</div>
???? </div>
???? </body>
三列布局
???? <head>
???? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
???? <title>三列布局</title>
???? <style>
???? body{ margin:0; padding:0; font-size:30px; font-weight:bold}
???? div{ text-align:center; line-height:50px}
???? .left{ width:20%; height:600px; background:#ccc; position:absolute; left:0; top:0}
???? .main{ height:600px; margin:0 20%; background:#9CF}
???? .right{ height:600px; width:20%; position:absolute; top:0; right:0; background:#FCC;}
???? </style>
???? </head>
???
???? <body>
???????? <div class="left">left</div>
???????? <div class="main">main</div>
???????? <div class="right">right</div>
???? </body>
混合布局
???? <head>
???? <style>
???? body{ margin:0; padding:0; font-size:30px; font-weight:bold}
???? div{ text-align:center; line-height:50px}
???? .head{ height:100px;background:#9CF}
???? .left{ width:20%; height:600px; background:#ccc; float:left}
???? .main{margin:0 10%;height:600px; background:#9CC }
???? .right{ width:20%; height:600px;background:#FCC; float:right}
???? .footer{ height:50px; background:#9F9; clear:both}
???? </style>
???? </head>
???
???? <body>
???? <div class="head">head</div>
???? <div class="left">left</div>
???? <div class="right">right</div>
???? <div class="main">main</div>
???? <div class="footer">footer</div>
???? </body>
