CSS布局

单列布局

html中，header需要包裹在一个提供背景色的header-container的容器中，footer也需要包裹在一个提供背景色的footer-container的容器中，然后header和footer分别设置Margin：0 auto水平居中，然后设置max-width等于内容区的max-width

单列布局

三栏布局

1. 圣杯布局
   html中，主内容放在最前，侧边栏放在之后，给他们分别设置浮动，然后侧边栏那设置分别设置负margin放到主内容两侧，然后给包裹容器设置padding，预留出两侧留给侧边栏的位置，最后给侧边栏设置relative，分别移动到左侧和右侧
   圣杯布局

2. 三栏布局

html中，侧边栏放在前面，主内容放在侧边栏之后，侧边栏设置浮动属性，一左一右，内容在设置margin留出左右侧侧边栏空间
三栏布局

3. 双飞翼布局

html中，主内容放在最前，保证优先渲染，侧边栏放到主内容之后，主内容和侧边栏分别设置浮动，按照圣杯布局的css设置把侧边栏放到对应的位置，然后，给主内容再嵌套一个div，设置此div的左右margin，留出侧边栏的位置
双飞翼布局

实现如下效果

风景如画效果