常见页面布局图

HTML+CSS要点6:常见布页面布局

特点

  1. float元素设置宽高后不会随着父级的变化而变化,而普通流会随父级(例如设置80%)变化而变化

1 上中下一栏式

HTML+CSS要点6:常见布页面布局

2 左右两栏式

2.1(混合浮动+普通流)

HTML+CSS要点6:常见布页面布局

2.2 左右两栏式(纯浮动)

HTML+CSS要点6:常见布页面布局

2.3 左右两栏式(定位)

HTML+CSS要点6:常见布页面布局

3 左右两栏+页眉页脚

HTML+CSS要点6:常见布页面布局

4 左中右三栏式

4.1 浮动加普通流

HTML+CSS要点6:常见布页面布局

4.2 左中右三栏式之双飞翼

HTML+CSS要点6:常见布页面布局

5 左中右三栏+页眉页脚

HTML+CSS要点6:常见布页面布局

相关文章: