在网页设计中使用div+CSS有什么好处?

发布时间:2020-06-09 10:38:00

网页的设计和制作采用div+CSS,最大的优点是实现了网页代码的标准化,摒弃了过时的表格布局,实现了内容、性能和行为的分离。HTML代码具有更好的结构,更容易阅读和维护,网页的文件大小更小。例如,最近客户网站重建后,网页文件的大小不到原来大小的一半,因此占用的网站空间更少,网站打开速度更快。

网页的设计和制作采用div+CSS,最大的优点是实现了网页代码的标准化,摒弃了过时的表格布局,实现了内容、性能和行为的分离。HTML代码具有更好的结构,更容易阅读和维护,网页的文件大小更小。例如,最近客户网站重建后,网页文件的大小不到原来大小的一半,因此占用的网站空间更少,网站打开速度更快。

div+CSS和table在设计上有很大的区别。在设计网页之前,你需要仔细计划。例如,您需要命名组成web页面的元素,以便于CSS中的样式定义。公共属性部分最好由类名定义。整个网站的总体风格可以放在一个单独的CSS文件中。常用属性包括:网页宽度、背景颜色、背景图片、默认字体大小、颜色、链接样式等。最好在CSS文件中收集每个网页的不同样式,并解释哪个网页或网页的哪个部分在块的前面,从而简化CSS文件的大小,避免混淆,更便于维护。值得一提的是,样式不应该嵌入到web代码中,以完全分离内容和样式。

为了做好div+CSS网页的设计和制作,我认为有三点需要理解。

1、Float属性:默认情况下div(layer)占据整行。对于常见的两列或多列布局设计,需要能够正确设置float和width属性才能达到效果。多列布局后,如果有一个层占用了常规列,则需要设置clear属性以清除层浮动。

2、框模式:层具有宽度、高度、边框、内部间距填充和外部间距边距等属性。层所占用的实际空间是上述属性值的总和。合理利用这些属性可以实现网页布局的简洁美观。

3、层嵌套:经验丰富的网页设计师都知道,层不应该嵌套太多,一般不超过3层。过多的嵌套将导致代码复杂性、冗余、维护困难和运行缓慢问题。另外,在多列布局中,可以通过分层浮动的方式实现,而不需要整体设置IE层。

让我们单独谈谈浏览器兼容性。与表布局相比,div+CSS更容易导致多个浏览器的不兼容。主要原因是不同的浏览器对web标准有不同的默认值。中国的主流是ie、Firefox和chrome的使用率较低。在兼容性测试方面,首先要保证ie的多个版本都没有问题,下面是一些针对具体问题在网站上寻找解决方案的方法和技巧。


17742004931 联系我们,谈您的需求

立即咨询 立即建站