原文首发于 baishusama.github.io,欢迎围观~
整理了下常见三栏布局的做法。
布局索引
P.S. 各个布局的原理在本篇没有解释,对于圣杯布局和双飞翼布局感兴趣的童鞋可以看看参考中的后两篇文章。
优缺点
前两种布局的缺点是主要内容无法优先加载。当页面加载慢时会影响用户体验。
后四种布局调整了 HTML 代码顺序,克服了上述缺点。
与圣杯布局相比,双飞翼布局以更复杂的 HTML (主要内容外再包裹一层)为代价简化了 CSS 样式(左侧边栏少用一个相对定位)。
原文首发于 baishusama.github.io,欢迎围观~
整理了下常见三栏布局的做法。
P.S. 各个布局的原理在本篇没有解释,对于圣杯布局和双飞翼布局感兴趣的童鞋可以看看参考中的后两篇文章。
前两种布局的缺点是主要内容无法优先加载。当页面加载慢时会影响用户体验。
后四种布局调整了 HTML 代码顺序,克服了上述缺点。
与圣杯布局相比,双飞翼布局以更复杂的 HTML (主要内容外再包裹一层)为代价简化了 CSS 样式(左侧边栏少用一个相对定位)。