赛邦软件 网络营销一站式服务品牌
专业网站建设,400电话,手机网站,微网站建设,商城建设,企业营销型网站

您当前位置:赛邦软件 >>

做好DIV+CSS的网页重构需要关注哪些问题?

发布时间:2017-04-12 09:48:33

        div+css  如今被大家认可接受了,并且得到了一直的好评,好多的网站都已经开始进行实时的改版,利用这种技术,赛邦网站设计公司在做网站的时候遇到的或者说是一些心得体会吧,想拿出来和广大的网站制作爱好者分享下:


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


        网页重构,最主要的好处在于实现了网页设计的标准化,摒弃传统的表格布局方式,充分达到内容、表现和行为三者的分离,使得HTML代码更加容易阅读和维护,同时文件也变得更小。


4.jpg


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

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


        第二是盒模式,对于任何一个div层,可以定义其宽度width、高度height、四周边框border粗细和样式,以及内容到边框的边界padding和边框到周围层的空白margin等属性,而层实际占据的空间则是上述属性相叠加的结果,正确设置这些属性能帮助我们实现紧凑而又美观的网页布局。


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


        总之,DIV+CSS的网页布局方式有非常多的优处,建议网页设计者从最初开始就放弃table布局方式,这样非常有利于对css样式表的深入学习和应用。并且DIV+CSS的网页布局方式并不复杂,只要了解一些基础知识,通过一个案例的实践过程就可以掌握,并且得到不断的提高。


营销型网站建设       |       手机网站       |       手机APP       |       微信平台定制开发
    赛邦软件科技有限公司 备案号豫ICP备15024232号-1
    Copyright 2015,ALL Rights Reserved