参考|高级|设计|网页|网页设计针对五个模块的不同类型布局demo，基本上概括了所有需求，很有代表性。注意dtd为strict模式，编码是已改为utf。


个人觉得虽然实用有限，但作为技术参考，一定程度上总结了很多解决方案。
固定代码架构，分为五个部分 eader, content, navigation, other stuff and footer


HTML 代码:

<div id="container">  <div id="header">Header</div>  <div id="wrapper">    <div id="content">Content</div>  </div>  <div id="navigation">Navigation</div>  <div id="extra">Extra stuff</div>  <div id="footer">Footer</div></div>

作者是意大利设计师，标题不好翻译，看示意图加例子就明白了。


Three percentage columns (n.01)



Three percentage columns (n.02)



Three percentage columns (n.03)



Three percentage columns (n.04)



Three percentage columns (n.05)



Three percentage columns (n.06)



Three fixed columns (n.7)



Three fixed columns (n.8)



Three fixed columns (n.9)



Three fixed columns (n.10)



Three fixed columns (n.11)



Three fixed columns (n.12)



Liquid, secondary columns fixed-width (n.13)



Liquid, secondary columns fixed-width (n.14)



Liquid, secondary columns fixed-width (n.15)



Liquid, secondary columns fixed-width (n.16)



Liquid, secondary columns fixed-width (n.17)



Liquid, secondary columns fixed-width (n.18)



Liquid, three columns, hybrid widths (n.19)



Liquid, three columns, hybrid widths (n.20)



Liquid, three columns, hybrid widths (n.21)



Liquid, three columns, hybrid widths (n.22)



Two columns liquid, side fixed (n.23)



Two columns liquid, side fixed (n.24)



Two percentage columns (n.25)



Two percentage columns (n.26)



One column liquid and two halves (n.27)



One column liquid and two halves (n.28)



Two percentage columns and one larger (n.29)



Two percentage columns and one larger (n.30)



Two columns liquid, fixed side and large one (n.31)



Two columns liquid, fixed side and large one (n.32)



Two colums fixed (n.33)



Two colums fixed (n.34)



Two colums fixed (n.35)



Two colums fixed (n.36)



Two colums fixed (n.37)



Two colums fixed (n.38)



One column fixed and two halves (n.39)