DIV+CSS网页布局方法探析.doc

DIV+CSS网页布局方法探析 　　【摘 要】在网页设计中DIV+CSS网页布局方法被越来越多的应用到，论文通过具体的实例分析了DIV+CSS的布局的技术方法，综述了在布局当中的常用方法，并且结合Table 布局方式，在此基础上提出了网页布局方法的探究。 【关键词】DIV CSS 网页布局 方法 1 引言 传统网页布局的方法主要包含框架和表格。当利用表格的方式进行布局的时候快捷方便，但出于对版式的要求，一般需要插入许多的表格， 甚至有时还要对表格进行多层嵌套，这不仅延长了页面打开的时间， 而且降低了网页中代码的可读性， 增加维护成本，DIV+CSS布局方式使网页结构和外观相分离， 不但极大地简化了代码，而且使站点加载的速度变得快捷、维护也更加方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV+ CSS布局方式的使用，使传统的网页布局的不足得到很好的弥补，当前国内多数比较著名的网站都利用此类方式方法进布局， 给用户带来了全新的体验模式。 2 DIV与CSS的介绍 2.1 DIV DIV即指区块， DIV一般用于定义HTML网页上的区块，将网页中不同的段落或不同的内容封装进区块的起始与结束标记当中， 经过属性设置以控制其中元素的特性。 2.2 CSS CSS意指层叠样式表，CSS 可以把HTML文件内容与样式的定义相分离，只需制定定义样式的CSS文件，同时让所有的HTML文件调用已经定义的样式，当需要更改HTML文件中任何部分的风格时，只需要将CSS文件打开进行样式的更改就可以了，即可使相同的HTML内容显现出不同的形式，这样使网站更新与维护变得更为简易。 2.3 DIV+CSS 的优点 2.3.1 网站的更新与维护更简易 因为CSS文件能够被多个网页链接或使用，当需要重新布局网站页面时，只要依照区块的内容标记到CSS样式的文件里，寻找到相应的ID，并进行简单的修改即可。不需要在每一个HTML文件中进行重复的设置，使修改页面变得更加简捷，极大地提高了网站更新与维护的效率，节约网站的运营成本。 2.3.2 内容与表现相分离 即CSS代码和HTML代码相分离，CSS可以把样式的部分单独的置于独立的样式文件中，而在HTML的文件中只放置网页需要显示的内容，而网页的内容表现的形式则可以完全通过CSS文件来实现，消除了大量的冗余代码，解决页面表现和结构混合在一起的问题。 2.3.3 有哪些信誉好的足球投注网站引擎中有哪些信誉好的足球投注网站的简便 当使用DIV + CSS 网页布局设计时，结构得到优化、代码的精简度提高、网页内容更容易被有哪些信誉好的足球投注网站引擎采集到。当网页有哪些信誉好的足球投注网站时，有哪些信誉好的足球投注网站引擎程序不需要去访问CSS文件，可以直接提取HTML文件中DIV内容，这样在更短时间可以有哪些信誉好的足球投注网站整个页面。当一个页面中包含许多的标记表格来布局，遇到多层的表格嵌套时，整个页面往往会直接跳过或直接放弃嵌套的内容。因而运用DIV+CSS技术，让有哪些信誉好的足球投注网站引擎收录网站变得更加方便，提升有哪些信誉好的足球投注网站引擎的索引效率。 2.3.4 网页加载迅速 当代码写在了CSS 文件中时，让页面体积变小、代码简洁，而且相较于表格嵌套方式而言，DIV+CSS赋予页面更多的独立区域，当要打开页面时，不会在整个页面局限于一个大表格里，而是逐层加载，提升了页面加载速率。 2.3.5 维持网站风格和视觉的一致性 所有区域由CSS文件控制，针对分辨率及操作系统发生更改时，网页用表格技术设计出来时会有变形的现象出现，而使用DIV + CSS技术可以让页面变得更加灵敏，并且不同的浏览器可以达到一致的显示效果。 2.3.6 浏览器兼容性强 DIV + CSS 布局兼容性更强，所有的浏览器几乎都可以运行，符合WEB的标准规范和发展趋势，并且兼容性强大，在新开发的浏览器中也可以很好的运行。 3 网页布局的发展 3.1 早期使用的网页布局方法 早期网页布局一般采用如下四种方法所示，这些方式都是较为常用的布局方式，一般由其中一种， 或是几种布局方式的结合使用：随着许多新上网设备的涌现和网络技术的迅速发展，使以往的网页布局方式变得不能适应新要求。 3.2 新WEB标准 针对表现、行为和结构三个部分，W3C 设定了大部分的标准，采用了很多新标准的优点，具有更少的组件和代码、带宽要求低、网站更易于维护、降低成本等，主要如下三点： （1）表现标准语言CSS； （2）结构化标准语言XML和XHTML； （3）行为标准主要包括对象模型。 4 DIV+ CSS 网页布局应用实例 4.1 三栏式自适应宽度布局 使用标记将网页划分为不同的区域，包括footer 、header、content三个区域，分