在网页制作中，使用 DIV+CSS 进行网页布局设计是很常见的。

所有的设计中，第一步就是构思。如果构思好了，就可以用设计工具把构思好的界面布局勾画出来。

第二步，也就是编写 HTML 和 CSS 了。

布局中需要注意的一些问题点：

很多 LOGO 图片为什么要使用 GIF 格式？使用 JPEG 不是更好吗？因为 GIF 格式的图片文件更小，这样能使页面载入的速度更快。

合理的切片是非常之重要的，因为切片的方法正确与否决定了 CSS 书写的简易程度以及页面载入的速度。

举例一：比如要设计一个典型的三列博客模板，有 header、content 和 footer三部分。整个布局需要在浏览器窗口中居中显示。

HTML 布局代码为：

 CSS 样式为：

这在所有现代浏览器中都是有效的。但是注意，在混杂模式中的 IE 5.x 和 IE 6 不支持 margin:auto 声明，但 IE 却把 text-align:center 认为让所有东西都居中，不仅仅是文本，所以，如果是碰到混杂模式的这种情况，可以用下面的CSS样式来处理这种布局。

混杂模式 CSS 样式：

举例二：基于浮动的固定宽度布局

HTML 布局代码：

 CSS 样式代码：