![小蔡学Web：[7]web布局](https://search.52zhanxing.com/aiimages/小蔡学Web：[7]web布局.png)
操作方法
首先我们打开DW网页编辑器然后新建一个div.html文件。
在<body>中输入3个div标签，用来排列。
书写样式表，用ID调入，如下： <style type="text/css"> #top{ height:100px; width:960px;} #middle{ height:500px; width:960px;} #foot{ height:200px; width:960px;} </style> <body> <div id="top"></div> <div id="middle"></div> <div id="foot"></div> </body>
然后我们配上背景色可以看到非常实用的布局。修改样式： #top{ height:100px; width:960px; background-color:#CC0000;} #middle{ height:500px; width:960px; background-color:#FF9900;} #foot{ height:200px; width:960px; background-color:#FFFF00;}
然后我们修改样式表让变成三列形式的布局。让每一个div的长宽改变。如下： #top{ height:800px; width:200px; background-color:#CC0000;} #middle{ height:500px; width:700px; background-color:#FF9900;} #foot{ height:200px; width:200px; background-color:#FFFF00;} 调试网页后。
但是我发现我们没有得到想要的3列布局，我们应该让我们的div浮动起来，修改样式表让他们都左浮动。 #top{ height:800px; width:200px; background-color:#CC0000; float:left;} #middle{ height:800px; width:500px; background-color:#FF9900; float:left;} #foot{ height:800px; width:200px; background-color:#FFFF00; float:left;}