CSS Positioning (layout) 续

1. 先要进行 semantic markup. This is how our page will be structured. 每一个 id 对应一个功能模块
#floater (for vertical centering)
#centred (the centre box)
    #sidebar
        #logo
        #nav (unordered list)
    #content
#footer (for copyright, etc.)

这是一个嵌套的过程，比如以上是 body 的 semantic markup，而 sidebar 模块又可以进行 semantic markup。
2. 确定每一个模块的 dimension, display, position, float 等；这可以自上而下，也可以自下而上
3. 在 semantic markup 分解之后，网页中某一个小部分，都有自己的 layout。套用相应的常用的 layout 方法，就差不多了。
4. 每一个模块的额外修饰

关于 Html element 的 id 和 class 遵循

• id 对应功能模块，如 header, sidebar, nav, footer 等
• class 对应常用的样式

则 class 就是通用的，比如

.floatLeft    { float: left; }
.floatRight   { float: right; }
.clear    { clear: both; }
.layoutCenter  { margin: 0 auto; }
.textCenter   { text-align: center; }
.textRight   { text-align: right; }
.textLeft   { text-align: left; }
.hide    { display: none; }
.show    { display: block; }
.invisible   { visibility: hidden; }

常用的 layout 方法：