这篇文章主要介绍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%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#mainContent {padding: 0 20px; }
</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如何实现百分比自适应框架网页模板”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
