介绍
这个布局是基于一个截面图，然后把它转化为一个html页面，但是介绍的目的不是仅限于这一个特定的例子，而是可以用于所有以后的布局过程。
在我们开始之前，需要有几点准则指导着我们，避免我们误入歧途、走火入魔，中毒太深：
每次进行一步，每一步都用一组浏览器来测试开始布局踏出第一步很容易，但是半途碰到问题并不是我们所期望的。为了避免这种情况的发生， 我们每进行一步，都要用一组浏览器来进行测试。这样你就能清楚的看到布局是如何进行的，也可以避免一些问题的出现。
基于现代浏览器构建，但是也要向前兼容最好基于标准兼容的浏览器构建布局，但是也要让一些老版的浏览器兼容。
校验你的HTML代码和CSS时常检验你的HTML代码和CSS，这样的话很多的布局问题就能够得到解决。
这下面这两个地址会对你有所帮助：
① WC3 HTML validator
② WC3 CSS validator
Step1.考量一下对浏览器的支持性：
在开始设计CSS布局之前，你应该想一下你要支持的浏览器或者说支持到什么程度。客户、用户、测试日志文件等可能会对你有一定的帮助。
Step2.查看容器布局
看看你的设计，想一下主要由哪些容器组成。
Step3.为容器命名
上面所说的容器将会是你的页面布局中放置内容的容器，所以你需要为他们起一个能够描述他们特征的名字，就像
如果这些容器对页面来说是唯一的，在标签代码中最后使用ID来表示，而不是class来标示。这在为其他元素来写样式的时候显得很 重要，因为当出现冲突时，用ID来标识的样式会重写用class来标识的代码。
Step4.开始写样式和代码
首先确定文档类型，在这里我们采用HTML4.01strict
登录后复制
然后是增加头信息和字符编码等,将外联样式命名为style.css
登录后复制
最后，加入上面我们分析好的一些元素：
登录后复制
Step6.指定样式
body { margin: 0; padding: 0; background: #ddd; } #container { margin: 1em auto; width: 650px; background: #fff; } #header { background: #CF3; } #mainnav { background: #9F3; } #menu { float: right; width: 165px; background: #6F9; } #contents { float: left; width: 440px; background: #9FC; margin: 0 0 0 20px; } #footer { clear: both; background: #FF9; } 登录后复制