关于采用DIV+CSS重构网页设计的几点体会

DIV+CSS作为目前网页设计的标准，得到了广泛的应用，国内非常多的网站早在几年前就已经实现了重构。本文结合作者近期改版网站过程中遇到的一些问题，浅谈自己的几点体会，希望能对刚刚从事网页设计的朋友有所帮助，当然也欢迎大家能批评指正。

网页重构，最主要的好处在于实现了网页设计的标准化，摒弃传统的表格布局方式，充分达到内容、表现和行为三者的分离，使得HTML代码更加容易阅读和维护，同时文件也变得更小。例如，网站改版后，所有的网页文件大小都不到原来的一半，因此占用的服务器空间更小，运行效率也得到很大的提升，主页打开速度明显比以前更快。

DIV+CSS的网页布局方式，与传统的table布局有很大差异，因此在网页设计之前就要有一个详细的规划，对组成网页的各部分元素都进行命名，方便在CSS文件中进行样式定义，公共属性部分可以采用类名的方式来定义。在整个站点中，对于网站通用的样式可以定义一个公共的css文件，例如包括网页宽度、背景颜色、背景图片、文字默认大小、颜色、链接样式等，然后可以为每个网页定义一个单独的css文件，这样做非常有利于精简css文件的大小，避免出现引用混乱和难以维护的问题。同时，也要绝对避免使用行内css的方式，彻底实现内容和样式的分离。

个人认为，做好DIV+CSS的网页重构，有两个关键的概念必须要精通。

第一是float属性，因为在默认情况下，所有的div都是占据一整行的，因此对于常见的两列、三列等多列布局的设计，要正确设置float以及width属性来实现层浮动，达到我们所需要的布局效果，多列布局结束之后单独占据一行的其他层（比如通栏banner等），也要设置clear属性来清除层浮动。

第二是盒模式，对于任何一个div层，可以定义其宽度width、高度height、四周边框border粗细和样式，以及内容到边框的边界padding和边框到周围层的空白margin等属性，而层实际占据的空间则是上述属性相叠加的结果，正确设置这些属性能帮助我们实现紧凑而又美观的网页布局。盒模式的理解对于网页布局的设计至关重要，特别是不同浏览器中可能会有不一样的解释方式，甚至会由于1个像素的差异导致布局混乱，这个时候可以适当减小层的width或者height属性来进行微调。

DIV的嵌套也是一个需要重点说明的问题，我们都知道在table布局时要尽量减少嵌套，对于DIV也是一样，嵌套的弊端在于代码复杂、维护困难以及运行效率低，因此也要尽量将嵌套控制在3层之内。另一方面，对于多列布局的情况下，完全可以采用层浮动的方式实现，没有必要整体设置一个div来嵌入。

当然，层布局方式还面临一个重要的挑战就是浏览器兼容性，造成这个问题最主要的原因是不同浏览器对web标准的默认值不同。从国内来看，大部分用户使用IE浏览器，如我的网站近几个月的统计来看超过45%的访问者使用IE 6.0，其余使用较多的包括IE 8.0、IE 7.0以及国产的以IE为内核的浏览器，Firefox和Chrome等非IE内核的浏览器占得比例很少。因此，在浏览器兼容性测试方面，要首先保证在IE浏览器下运行不出现错误，这方面有很多的技巧大家可以从网上查到，对于一些细小的差异可以逐步进行改进和调试。

总之，DIV+CSS的网页布局方式有非常多的优点，建议网页设计者从最初开始就放弃table布局方式，这样非常有利于对css样式表的深入学习和应用。其实，DIV+CSS的网页布局方式并不复杂，只要了解一些基础知识，通过一个案例的实践过程就可以掌握，并且得到不断的提高。本人在这方面也是新手，欢迎能和广大从事网页设计的朋友们相互交流、共同进步。

作者网站：兰州开心网 http://www.lzkxw.com/

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有