CSS DIV网页布局技术教程

1、假如我们要进行一个基本的网页布局，首先我们要提前进行一个规划方案，比如页面的整体构成是什么样的。假设我要按照草图中所示的样式进行布局。

3、第二步：从草图中我们可以看到该网页的框架组成最少需要四个div标签。我们先设置第一个顶部的div标签及为其设置相应的CSS样式。为其设置id为header。<div id="header" class=""> </div>

5、第四步：此时我们在浏览器中可以看到所设置的id名称为header的div标签的显示效果了。

7、第七步：为了让这两个div标签显示在同一行，我们需要设置float样式。float通常用的有两种属性，既float：left，向左浮动；float：rigth,向右浮动。#left{ width:40%;height:400px; background:#cc0033;float:left;} #right{ width:40%;height:400px; background:#00cc33; float:left;}设置浮动后，就可以看到两个div标签显示在同一行了。

9、第九步：我们看到所设置的最后一个div标签跑到上边去了。原因就是我们给中间的两个div标签设置了浮动float样式，设置浮动样式后就会脱离原来的文档流，导致最后一个div标签紧挨着第一个div标签。为此我们需要个给最后一个div标签设置清除浮动样式。clear:both,既清除该div标签两边的浮动带来的影响。

11、总结：1、首先根据页面的布局草图进行div标签的和css样式的编写2、div和css布局时用的最多的就是浮动flota样式属性3、div标签通过css样式可以呈现出不同的样式效果4、一般是通过设置div标签的id或者classs属性进行定位