网页设计采用DIV+CSS实现网页代码的标准化

网页设计采用DIV+CSS，最大的优势是实现网页代码的标准化，摒弃过时的表格布局方式，实现了内容、表现和行为这3者间的分离，html代码结构性更好，阅读和维护更容易，同时网页文件大小也更小。比如最近给一个客户的网站重构后，网页文件大小不到原来的一半，因此占用更少的网站空间，网站打开速度也更快。

DIV+CSS与TABLE方式在设计时差别很大，网页开始设计前需要仔细规划，比如对组成网页的各部分元素命名，方便在css中进行样式定义，公共属性部分最好用类名定义。整个网站通用的样式可以放到单独的一个css文件中，常有的公共属性有：网页宽度、背景颜色、背景图片、字体默认大小、颜色、链接样式等，每个网页不同的样式在css文件中最好集中一块，并在块前说明是哪个网页或哪个网页部分，这样既精简css文件大小，又避免出现混乱，对维护也更方便。值得一提的是，网页代码中不要嵌入样式，彻底实现内容和样式的分离。

做好DIV+CSS的网页设计，个人决得有三点需要重点理解。

1、float属性：DIV（层）默认是占据一整行，对于常见的两列或多列布局的设计，需要能够正确设置float及width属性实现效果。多列布局结束后如果跟了一个占据通栏的层，此时需要设置clear属性清除层浮动。

2、盒模式：层具有宽度width、高度height、边框border、内间距padding和外间距margin等属性，而层实际占据的空间是上述属性值相加的大小，合理运用这些属性能实现紧凑而又美观的网页布局。

3、层嵌套：有经验的网页设计师都知道层不宜嵌套过多，一般不超过3层，嵌套过多的会导致代码复杂冗余、维护困难及运行慢的问题。另外，在多列布局时完全可以用层浮动实现，不需要整体设置一个ie层来嵌入。

单独提下浏览器兼容的话题。DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里设计到一些方法和技巧，可以针对具体问题在网站查找解决办法。

【关键词标签】    (PC+手机)响应式网站建设

• 企业网站如何优化产品展示页面
• 实体店和论坛结合如何实现多倍赢利
• 网站域名如何转入转出
• 修改网站关键词要注意哪些问题才不会影响排..
• 为什么目前中文域名未被广泛应用，为啥呢!
• 地方房产网站如何做好，需要注意的一些问题
• 怎样安装360手机助手,360手机助手怎..
• 2010谷歌收购公司数量位居全球第一
• 金山大战360接档3Q大战
• 风起云涌的微博的未来发展
• 百度奇艺视频网站即将发布社区系统“奇谈”
• 企业网站建设应注意的一些事项
• 浅谈企业网络营销之网站门面考究
• 如何做网站内容与高质质外链
• 网站联盟广告与站点友情链接要注意那些事项