使用div+css布局页面，若想实现上中下布局，可以在一个div内创建三个div，使用css设置相应的高度来实现。下面小编举例讲解div+css实现上中下布局。
工具/原料
1
div+css
2
代码编辑器：Dreamweaver CS5
方法/步骤
1
新建一个html文件，命名为test.html，用于讲解div+css实现上中下布局。
2
在test.html文件内，使用div标签创建一个模块，并设置其class属性为content，主要用于下面通过该class属性设置样式。
3
在test.html文件内，在上一步的div内，再使用div创建三个模块，并分别设置其class属性为up,middle,down。
4
在test.html文件内，在css标签内，通过“*”来初始化页面中所有的元素内外边距均为0，并且设置页面中每个div宽度为100%，并且居中对齐。
5
在css标签内，对class为content的div进行样式布局，设置其宽度为500px，高度为600px，div内的文字颜色为白色，居中显示。
6
在css标签内，对上中下三个div模块进行样式设置，定义上部的div（class为up的div）高度为100px，背景颜色为红色，中部的div(class为middle的div)高度为400px，背景颜色为蓝色，下部的div（class为down的div）高度为100px，背景颜色为黑色。
7
在浏览器打开test.html文件，查看实现的效果。
总结：
1、创建一个test.html文件。 2、在文件中，创建一个div模块，在div内再创建三个div模块，并分别设置它们的class属性。 3、使用css设置所有的div宽度为100%，并且使用margin:0 auto设置居中对齐。 4、使用css设置外部div模块固定的高度，同时设置内部的三个div模块固定高度，就可以实现上中下的布局了。
注意事项
上中下三个div模块总的高度要等于外部div的高度。
上一篇：怎样用CSS制作响应式布局
下一篇：css布局模型中层布局模型的用法