CSS DIV网页布局技术教程

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

2、第一步：首先我们先通过网页编辑器软件进行新建一个html文档或者打开已有的一个网页文档。

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

4、第三步：为其设置css样式：因为设置的是id，所以在样式中必须写上”#“号开头，后面跟上i蟠校盯昂d名称，这样就通夸臾蓠鬏过css定位到对应id名称的标签了。<style type="text/css"> #header{ width:100%;height:150px; background:#ff0099;}</style>

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

6、第五步：接下来写中间的两个div标签和样式。<div id="left" class=""></div><div id="right" class=""></div>#left{ width:40%;height:400px; background:#cc0033;} #right{ width:40%;height:400px; background:#00cc33;}但是此时我们发现中间的两个div标签没有在同一行显示，而是一个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标签显示在同一行了。

8、第八步：编写最后一个div标签和样式。<div id="footer" class=""></div>#footer{width:100%;height:100px; background:#009900;}此时在浏览器中查看效果发现最后一个div标签跑到上边去了。

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

10、第十步：此时我们在浏览器中进行查看就会发现显示正常了。

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