更多的CSS簡單頁面配置可以去css布局下載啊，資源來自CSS徹底設計與研究。
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>單列布局</title> <style> body{ background: #fff; font: 13px/1.5 arial; margin: 0; padding: 0; } .rounded{ background: url(pages/layout/images/left-top.gif) top left no-repeat; width: 100%; /*IE6下重新計算寬度*/ } .rounded h2{ background: url(pages/layout/images/right-top.gif) top right no-repeat; padding: 20px 20px 10px; margin: 0; } .rounded .main{ background: url(pages/layout/images/right.gif) top right repeat-y; padding: 10px 20px; margin: -2em 0 0 0; } .rounded .footer{ background: url(pages/layout/images/left-bottom.gif) left bottom no-repeat; } .rounded .footer p{ color: #888; text-align: right; display: block; padding: 10px 20px 20px; margin: -2em 0 0 0; background: url(pages/layout/images/right-bottom.gif) right bottom no-repeat; } #header, #content, #pagefooter{ width: 760px; margin: 0 auto; } </style> </head> <body> <div id="header"> <div class="rounded"> <h2>Page Header</h2> <div class="main"> <p> 這是一行文本，這裡作為範例，顯示在布局框中。<br/> 這是一行文本，這裡作為範例，顯示在布局框中。 </p> </div> <div class="footer"> <p> 查看詳細資料>> </p> </div> </div> </div> <div id="content"> <div class="rounded"> <h2>Page Content</h2> <div class="main"> <p> 這是一行文本，這裡作為範例，顯示在布局框中。<br /> 這是一行文本，這裡作為範例，顯示在布局框中。 </p> <p> 這是一行文本，這裡作為範例，顯示在布局框中。<br /> 這是一行文本，這裡作為範例，顯示在布局框中。 </p> </div> <div class="footer"> <p> 查看詳細資料>> </p> </div> </div> </div> <div id="pagefooter"> <div class="rounded"> <h2>Page Footer</h2> <div class="main"> <p> 這是一行文本，這裡作為範例，顯示在布局框中。 </p> </div> <div class="footer"> <p> 查看詳細資料>> </p> </div> </div> </div> </body></html>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
