使用div+css布局页面，若想实现上中下布局，可以在一个div内创建三个div，使用css设置螽啸镥释相应的高度来实现。下面小编举例讲解div+css实现上中下布局。
工具/原料
div+css
代码编辑器：DreamweaverCS5
方法/步骤
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，背景颜色为红色，中部的di即枢潋雳v(class为middle的div)高度为400px，背景颜色为蓝色，下部的div（class为down的div）高度为100px，背景颜色为黑色。
7、在浏览器打开test.html文件，查看实现的效果。
