CSS+div页面排版

          CSS排版过程：首先在整体上进行<div>标记分块，然后进行CSS定位，最后添加相应的内容，如果网页是拓扑结构，则可以修改CSS属性进行重新定位即可。

【网页框架设计】

       CSS+div的设计的第一步：（1）明确页面组成，通过div对页面进行分块，分块内容包括Banner、content(主题内容)、links(菜单导航）和footer（脚注）几个部分，每个部分可以通过不同的id进行标识。

       （2）设计页面板式，常见的有双栏板式：

                                      


         

      （3）用CSS定位，对页面进行整体规划，定位的规则是由大到小（body--container）、由上到下、由左到右的位置进行（banner--content--links--footer），每个分块需要注意的属性：

                              

【CSS+div VS table排版】

        table排版的优势表现在：思路简单，使用table嵌套可以完成划分模块以及重新划分模块，相对于float和position来说有很大的优势；表格大小自动调整，不存在背景色填充不满的问题。

        但它升级很困难，一旦页面设计完成，重新排版相当于重新设计；显示慢，必须等表格内容全部显示出来页面才能显示完整；而div各个模块可以分别下载，这样就提高了下载速度。

        美工方面，div+CSS将美工与后台操作完全分离，而table的美工还必须去代码中寻找排版方式。

【CSS注意知识点】

        由于浏览器的不同，css属性也有很多不一样的显示方式，这些内容需要我们在应用中一点一点的积累，首先我们要了解div的盒装模型：

                                 


       这种盒装模型在给我们定位提供便利的同时也会有很多兼容性问题：

                            


       在设计的过程中规避这些不同点，才能让我们的网页适应不同的浏览器。

【总结】

       网站设计过程中可以下载很多现成的模板，但了解这些css+div的基础知识，才能更加随心所欲的去修改自己的页面，美化是一个不断实践的过程。