初探DIV+CSS在网页优化中的应用

1、    初探div+css在网页优化中的应用    闫娜摘 要：随着网络的不断发展，网页在网络中占据了半壁江山，网页能够及时的响应请求做出回应是每一个网页设计者所要努力实现的，但是前端包含的资源越来越多，例如要有html、image、flash还有css等等，面对这样庞大的资源，如何更好地优化网页，不仅仅是给客户端的用户一个好的体验，也可以从服务器端节约资源。而优化网页涉及到很多方面，而今天主要从div+css方面探讨网页优化。关键词：网页 优化 div css：g71 ：a ：1672-3791（2017）02（b）-0038-021 table与di

2、v+css比较传统的网页一般都使用table对网页进行布局，相对于div标签，用table布局简单容易上手，数据内容的呈现更加稳定可靠。在使用table对网页布局时往往采用多重表格嵌套的方式，由于网页文件中使用table标签会使网页浏览速度变慢，又因为table中的内容是自适应的，为了这种特性，显示网页的时候只有当一个完整的table標签显示完成，它中间的内容才会显示出来，所以有可能在开始浏览网页时会出现空白过一段时间内容才显示的情况。另外在使用table布局的时候往往把相关的属性都设计在标签中，在设计就无形中造成了代码的冗余，而且对后期网页的维护带来极大的不利。而div+css样式相对与ta

3、ble标签能够很好的解决以上table来带的弊端，是不是div+css样式完全能够解决以上问题呢也不尽然，所以该文将从代码的角度探讨关于div+css网页优化的问题。2 div+css布局的优势（1）结构和样式分离便于网页的维护。div+css布局的最大优势在于，结构和样式的分离，这为后期页面的维护提供了极大的方便。如果要修改网页的板式只需要打开样式文件进行修改即可，由于样式文件在整个站点中是通用的，所以只需修改样式文件就可以起到事半功倍的效果，大大节约了人力物力。（2）网页的体积小节约资源，打开速度块。由于网页中的样式写在了css文件中，大大降低了网页的体积容量，相对与table布局中只有最

4、外层的表格完全加载才能显示内部内容，div+css的布局方式将网页划分成很多个区域，采用逐层加载，大大提高了加载的速度，网页打开的速度也就更快。除此之外，由于网页文件的体积较小，浏览较快，可以大大节约流量，一次也可以节约一笔成本。（3）友好的搜索引擎。在搜索的时候就凸显了关键词的重要性，使用div+css布局之后，大部分的样式代码被写在了css文件中，网页中的主题部分就突出了出来，这样更便于搜索引擎的采集，从而增加了网站被检索出来的速度。（4）保持页面整体风格一致。把样式单独写到一个css文件中，增加了样式代码的可重用性，也便于css文件中设置好的样式应用于其他文件，从而保证了整个站点风格的统

5、一。3 如何对div+css进行优化（1）写正确css的位置。css代码作为样式代码通用性极强，css有的是放在当前页中有的是作为独立的文件，所以为了起到优化的效果，css代码要放在一个单独的文件中，这样既便于维护与，也便于其他文件的应用。即使css代码一定要放在当前文档中，也不要放在body标签中，防止样式还加载，网页就已经显示。（2）简写css属性代码。我们使用css样式时的代码往往是软件自动生成，这些生成的代码虽然调理清晰，但是也造成了文件体积的增加，也牺牲了文件的执行效率，简写css的属性代码就可以有效的减少css文件的大小，如何来简写这些代码呢，例如我们要设置一个id为menu的di

6、v标签背景颜色为黄色，我们知道颜色值是以6位16进制的数表示的，如果用dreamweaver自动生成就会显示如下：#menu background-color： #ffcc99；我们会看到从左到右紧挨着的两个颜色值是相同的，从代码优化上我们就可把上面的代码写成右面的样子。#menu background-color： #fc9；如果进一步设置menu的方框样式设置，填充左右10 px，上下为0 px，边界左右为5 px，上下为2 px，dreamweaver中自动生成的代码为：如果填充和边界上下左右有设置不同的值，例如padding的格式如下：padding： top的值、right的值、bo

7、ttom的值、left的值。margin的格式和padding相同。当bottom和left的值缺失时默认和对应的top和right的值相同。如果再接着设置menu的边框样式，如果四个边框的样式不完全相同就写成下面的形式：border-top：1px solid #cccccc； border-left：1px solid #cccccc；border-right：1px solid #cccccc；border-bottom：4px solid #cccccc；如果四个边框的样式完全一样代码就可以进一步优化为下面的样子：border： 1px solid #cccccc；除了上面说的颜色值，

8、方框的设置，边框的设置之外，例如背景、字体列表等的css样式也可以根据具体的设计要求进行优化。（3）重新排列css代码。为了节约文件中空格和换行的出现次数，节约文件所占据的存储空间，如上面的menu的css代码，通过简写代码我们优化过后的代码如下：#menu background-color： #ffff00； padding： 0px 10px；margin： 2px 5px；border： 1px solid #cccccc； 那么我们通过重新排列代码起到了代码的进一步优化，上面的代码就可以写成下面的形式：#menu background-color： #ffff00； padding：

9、0px 10px； margin： 2px 5px； border： 1px solid #cccccc；（4）提取重复的样式。在设计页面的过程中，如果有两个或者两个以上的css样式基本一样，而只有极少数的部分不同，我们就可以把公用的代码单独提取出来，做成一个单独的样式，例如在设计left和right的css时候如下：#left border：1px solid #03f； padding：10px； width：250px； float： left；#right border：1px solid #03f； padding：10px； width：500px； float： right；通过

10、上面的代码我们会看到这两个样式中除了宽度和浮动样式不一样其他的都一样那么我们就可以把重复的代码提取出来，提取出来之后的样式如下：.gongong border：1px solid #03f； padding：10px； #leftwidth：250px； float： left；#rightwidth：500px； float： right；在正文中的應用如下：此处显示 id “left” 的内容此处显示 id “right” 的内容另外，同一部分的代码尽量放在一块，这样归类整理之后代码才更具有调理性，没一部分的写完之后最好有分隔标志，以便以后再次使用。参考文献1 李敏.浅谈网页布局技术的教学实践j.无线互联科技，2016（17）：85