<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自適應百分比HTML布局框架 CSS5</title> <style type="text/css"> body {font: 100% 宋體, 新宋體;background: #666666;margin: 0;padding: 0;text-align: center;color: #000000;} #container { width: 80%; /* 這將創建一個占據 80% 瀏覽器寬度的容器 */ background: #FFFFFF; margin: 0 auto; /* 自動邊距（與寬度一起）會將頁面居中 */ border: 1px solid #000000; text-align: left; /* 這將覆蓋 body 元素上的“text-align: center”。 */ } #mainContent {padding: 0 20px; /* 請記住，填充是 div 方塊內部的空間，邊距則是 div 方塊外部的空間 */} </style> </head> <body> <div id="container"> <div id="mainContent"> <h1> 自適應百分比布局 </h1> <p>1、最外層布局DIV寬度設置為百分比值，沒有設置具體px或em，布局網頁寬度將根據瀏覽器寬度而自適應寬度。<br /> 2、最外層DIV寬度設置80%，並且布局居中。為了看到布局居中效果設置1px邊框。<br /> 3、#mainContent設置padding左右20px樣式，讓內容距離最外層DIV的靠左和靠右有20px間距距離。</p> <h2>H2 級別的標題 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> </div> </div> </body> </html>