以下代碼複製粘貼即可使用：
樣本一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312" /> <style type="text/css"> .page_center { width:100%; } #nav { background-color:red; height:20px; } #left { width:120px; background-color:green; position:absolute; } #middle { background-color:yellow; } #right { width:120px; background-color:green; position:absolute; top:0; right:0; } #foot { background-color:pink; } #main { position:relative; } </style> </head> <body> <p id="nav" class="page_center">上邊</p> <p id="main" class="page_center"> <p id="left">左邊</p> <p id="middle"> 中間部分</p> <p id="right">右邊</p> </p> <p id="foot" class="page_center">底邊</p> </body> </html>
樣本2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> #left{ float:left; width:240px; height:500px; background:#0C9; } #right{ float:right;width:240px;height:500px; background:#933; } #center{ height:500px;background:#06C; } </style> <body> <p id="left" >左邊</p> <p id="right" >右邊</p> <p id="center" style="">中間</p> </body> </html>
<span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><strong></strong></span>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
相關推薦：
關於CSS如何?多行多欄版面配置的方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
