溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹html如何實現百分比自適應框架網頁模板，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
最外層DIV寬度采取百分比值完成構造居中而長久適應。
機關居中 自順應網頁模板成績
1、殘破HTML CSS模板代碼：
<!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% 宋體, 新宋體;bac千克round: #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">
<h2> 自適應百分比機關 </h2>
<p>1、最外層布局DIV寬度設置為百分比值，沒有設置詳細px或em，組織網頁寬度將根據閱讀器寬度而自順應寬度。<br />
2、最外層DIV寬度配置80%，況且布局居中。為了看到結構居中成就設置1px邊框。<br />
3、#mainContent設置padding擺布20px格式，讓形式隔絕距離最外層DIV的靠左與靠右有20px間距距離。</p>
<h3>H2 級此外標題問題 </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,
justo convallis luctus rutrum, erat nulla fermentum diam, at nonu妹妹y 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>以上是“html如何實現百分比自適應框架網頁模板”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
