浅析网页布局中DIV+CSS技术的应用.doc

《浅析网页布局中DIV+CSS技术的应用.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、浅析网页布局中DIV+CSS技术的应用摘要：传统的网页布局设计方法多采用表格嵌套内容的方式來实现,而采用DTV+CSS与TABLE相比有很多的优势，实现了样式与内容的分离，更有益于网站的优化，也更符合W3C的标准，当然其也有自身的不足，我们在网页设计中要适当地加以分析和运用，有利于对网站的管理和维护。关键词：DIV+CSS；TABLE；网页设计DTV+CSS是网站标准(或称"WEB标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格(TABLE)定位方式的区别。目前主流的网页设计架构大多为DIV+CSS结构，DIV+CSS区别于传统的表格定位的形式，采用以

2、“块”为结构的定位形式，DIV本身就是容器性质的，不但可以内嵌TABLE还可以内嵌文本和其它的HTML代码。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。CSS是(CascadingStyleSheets)的简称，中文译作“层叠样式表单”，在网页制作时采用CSS技术，可以有效地对页而的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者所有页面的外观和格式。DIV+CSS与TABLE方式在设计时差别很

3、大，网页开始设计前需要仔细规划，比如对组成网页的各部分元索命名，方便在CSS中进行样式定义，公共属性部分最好用类名定义。整个网站通用的样式可以放到单独的一个css文件中，常有的公共属性有：网页宽度、背景颜色、背景图片、字体默认大小、颜色、链接样式等。具体来说DIV+CSS布局主要有以下几种优势：一、网页代码标准化网页设计采用DIV+CSS,最大的优势是实现网页代码的标准化，摒弃过时的表格布局方式，实现了样式与内容的分离，HTML代码结构性更好，更易阅读和维护。当需要进行网页外观修改时，只需要修改CSS文件即可,完全不用修改网页的结构部分代码，也不会破坏页面其他部分的布局样

4、式。二、提高页面加载速度使用表格布局的网页必须将整个表格加载完成后才能显示出网页的内容，而DIV+CSS布局的网页则因DIV是一个松散的盒子而使其可以边加载边显示出网页内容，由于将大部分页面代码写在了CSS当中，使得页血体积容量变得更小，相对于表格嵌套的方式，DTV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。三、灵活控制页面布局页面的下载通常是按照代码的排列顺序，比如表格布局代码的排列是从上向下，从左到右，无法改变。而通过CSS控制，可以任意改变代码的排列顺序，比如将重耍的内容先加载出来。四、利于搜索引擎的搜索使用DIV+CSS布局，结构清晰，用只包含结构

5、化内容的HTML代替嵌套的标签，主次分明，对搜索引擎更加友好，更容易被搜索引擎收录，易于检索。五、简化页面，保持站点一致性使用DIV+CSS对外观进行控制时，由于CSS可以一处定义多处使用，因此除了减少工作量外，也起到了统一站点视觉效果的功能并人人缩减了页面代码。将所有页面或所有区域统一用css文件控制，就避免了不同页面或不同区域所体现出的效果偏差。六、良好的兼容多种设备使用DIV+CSS布局时，可使站点更容易被多种浏览器和用户访问，同时能够兼容多种设备，如手机、平板电脑等。虽然DIV+CSS在网站建设中有很多的优势，但是在实际使用中也难免存在不足：(1)DIV+CSS在

6、网站建设中比传统的TABLE定位要复杂的多，这就要求设计者一定要事先对网站的整体结构有一个清晰的规划和设计，合理应用块结构，否则极易出现混乱。(2)DIV+CSS网站建设的样式元素通常会放在一个或多个外部文件中,有可能相当的复杂，甚至比较庞大，如果在网站建设中CSS文件调用出现异常，那么整个网站的外观就会而冃全非。(3)虽然说DIV+CSS解决了大部分浏览器兼容的问题，但是也有在部分浏览器中使用出现异常的情况，比如火狐浏览器，在TE中显示正常的页面，到了火狐浏览器中就可能会有异常，这样的情况经常发生，DIV+CSS还没有实现所有浏览器的统一兼容，因此在页面设计的同时，一定

7、耍注意调试浏览器的兼容性。基于DIV+CSS的以上特点，我们在实际的网页设计中，要注意以下几个方而的应用：（1）FLOAT属性：DIV（层）默认是占据一整行，对于常见的两列或多列布局的设计，需耍能够正确设置FLOAT及WTDTH属性来实现效果。许多浏览器在显示未指定WIDTH的FLOAT元素时会有BUG,所以不管FLOAT元索的内容如何，一定要为其指定WIDTH属性。（2）盒模式：层具有宽度WIDTH＞高度HEIGHT＞边框BORDER＞内间距PADDING和外间距MARGIN等属性，而层实际占据的空间是上述属性值相加的大小，