html自动布局框架,html布局 百分比自适应框架网页模板

自适应百分比HTML布局框架 CSS5

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 方块外部的空间 */}

自适应百分比布局

1、最外层布局DIV宽度设置为百分比值，没有设置具体px或em，布局网页宽度将根据浏览器宽度而自适应宽度。

2、最外层DIV宽度设置80%，并且布局居中。为了看到布局居中效果设置1px边框。

3、#mainContent设置padding左右20px样式，让内容距离最外层DIV的靠左和靠右有20px间距距离。

H2 级别的标题

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,

justo convallis luctus rutrum, erat nulla fermentum diam,