html布局百分⽐⾃适应框架⽹页模板<!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.
个人网页设计模板html文件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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。