单列布局
html中,header需要包裹在一个提供背景色的header-container的容器中,footer也需要包裹在一个提供背景色的footer-container的容器中,然后header和footer分别设置Margin:0 auto水平居中,然后设置max-width等于内容区的max-width
三栏布局
圣杯布局
html中,主内容放在最前,侧边栏放在之后,给他们分别设置浮动,然后侧边栏那设置分别设置负margin放到主内容两侧,然后给包裹容器设置padding,预留出两侧留给侧边栏的位置,最后给侧边栏设置relative,分别移动到左侧和右侧
圣杯布局三栏布局
html中,侧边栏放在前面,主内容放在侧边栏之后,侧边栏设置浮动属性,一左一右,内容在设置margin留出左右侧侧边栏空间
三栏布局
- 双飞翼布局
html中,主内容放在最前,保证优先渲染,侧边栏放到主内容之后,主内容和侧边栏分别设置浮动,按照圣杯布局的css设置把侧边栏放到对应的位置,然后,给主内容再嵌套一个div,设置此div的左右margin,留出侧边栏的位置
双飞翼布局