布局解决方案

居中布局

多列布局

全屏布局

渐进增强 & 优雅降级

随着互联网的发展，连微软公司都抛弃了IE浏览器，转而支持 Edge 这样的高版本浏览器，所以，一般情况下，没有必要时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

渐进增强 Progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，从而达到更好的用户体验。

优雅降级 Graceful degradation（推荐）：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

// 区别在于，渐进增强时向上兼容，优雅降级是向下兼容。

版心和布局流程

阅读报纸时，不难发现 — 虽然报纸中的内容很多，但是经过合理的排版，版面可以做到清晰、易读。同样，在进行页面制作的时候，要想使页面结构清晰、有条理，也需要对网页进行合理的“排版”。

“版心”，即网页中主体内容所在区域，一般在浏览器窗口中水平居中显示，常见宽度：960px/1000px/1200px等。

[ 布局流程 ] 为了提高网页制作的效率，布局时通常需要遵循一定的布局流程，具体如下：

确定页面的版心（可视区域）；

分析页面中的行模块，以及每个行模块中的列模块；

制作 HTML 页面和 CSS 文件；

CSS 初始化，然后开始运用盒模型原理，通过 DIV + CSS 布局来控制页面中的各个模块；

// 代码示例：一列固定且居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<link rel="stylesheet" href="css/base.css">
	<style>
		.top,.banner,.main,.footer{
			width: 1000px;
			margin: 0 auto;
			text-align: center;
			font-size: 30px;
		}
		.top{
			height: 80px;
			line-height: 80px;
			background-color: green;
		}
		.banner{
			height: 200px;
			line-height: 200px;
			background-color: yellow;
		}
		.main{
			height: 700px;
			line-height: 700px;
			background-color: blue;
		}
		.footer{
			height: 100px;
			line-height: 100px;
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div class="top">top</div>
	<div class="banner">banner</div>
	<div class="main">main</div>
	<div class="footer">footer</div>
</body>
</html>

// 代码示例：一列固定且居中

<!DOCTYPE html>

<head>

<style>

.top,.banner,.main,.footer{

width: 1000px;

margin: 0 auto;

text-align: center;

font-size: 30px;

}

.top{

height: 80px;

line-height: 80px;

background-color: green;

}

.banner{

height: 200px;

line-height: 200px;

background-color: yellow;

}

.main{

height: 700px;

line-height: 700px;

background-color: blue;

}

.footer{

height: 100px;

line-height: 100px;

background-color: #ccc;

}

</style>

</head>

<body>

<div class="banner">banner</div>

<div class="footer">footer</div>

</body>

</html>