布局

1.实现单栏式布局

• 一栏布局
• 一栏式布局（优化）
• 一栏式布局（通栏）
• 小BUG解决办法：
  1. 给body或者是通栏的div添加min-width
  2. 给不是通栏的div添加max-width

2.实现三栏式布局

• 三栏式布局

3.实现圣杯布局

• 圣杯布局
• 圣杯布局有个BUG，就是当缩放浏览器没有达到2*nav+footer的宽度时，布局结构会破坏，掉盒子
• 原因是nav盒子的负margin是以ct父盒子的内容宽度做为值，当浏览器缩放导致ct的盒子宽度比nav盒子的main还小时，就会出现布局结构破坏

4.实现双飞翼布局

• 双飞翼布局
  • 关键点是在main里嵌套盒子作左右margin，ct父盒子的内容不会像圣杯布局一样被padding减小，最后导致浏览器缩放应该布局结构

5.实现如下页面 页面范例

• 风景列表