DIVCSS在网页布局中的应用研究.docVIP

DIV+CSS在网页布局中的应用研究 摘要：网页布局对于网页的设计制作非常重要， DIV+CSS是目前网页设计中比较流行的一种页面布局 方式。本文通过分析DIV+CSS布局技术优势，阐述了 DIV、CSS的布局原理，并通过一个实例说明DIV+CSS 布局的基本流程和使用技巧。 关键词：DIV； CSS；网页布局；Web2.0标准；优 势 中图分类号：TP393文献标识码：A文章编号: 1009-3044 (2015)02-0181-02 Abstract： Page layout is very important for the web page design. DIV + CSS have gradually become the most popular page layout technology. This paper analyzes the advantages of DIV and CSS layout and explains relevant layout principles. Finally， we explain implementation method and skills with a concrete example. Key words： DIV； CSS； Page layout； Web 2.0 standard； advantage 1引言 随着网络技术的不断发展，早期的表格布局方式 已经不能适用新的要求，许多网站设计师开始采用 Web2.0标准［1］, DIV+CSS网页布局技术已成为主流的 应用模式，其结构清晰化、便于维护和修改，提高用 户体验度等优势，已被业内广泛认可和应用。 2 DIV+CSS布局的优势 表现和内容相分离，代码精简 结构和表现相分离［2］，这正是CSS布局的特色所 在，结构与表现分离后，CSS将样式部分单独放在一 个独立的样式文件中，HTML文件只需提供网页内容， 至于内容的表现形式完全由CSS来实现。这样代码才 简洁，尤其是网站改版时，只需修改CSS文件内容， HTML文件即可表现出不同的形式［3］。如下代码可以 加深理解结构和表现相分离的含义。 通过上例可以看出如果还有更多的图片列表，那 么第二种CSS布局方法将更具优势。 提高页面浏览速度 采用DIV+CSS布局的网页比传统表格嵌套布局的 网页浏览、加载速度更快。针对同一个页面效果，一 般DIV+CSS构造的页面容量均比表格排版容量小［3］。 方便搜索引擎的搜索 采用DIV+CSS布局的网页有利于SEO优化。设计 后的网页能够通过W3C验证，搜索引擎spider爬行效 率将提高，并可能给予一个较高的排名结果。同时由 于CSS的引用使得网页中正文部分更为突出，更易于 被搜索引擎采集搜录。 （4）样式便于操作，网页便于维护 DIV+CSS布局更便于样式的控制，使得网页的维 护更加方便，也更加易于修改。 3 DIV+CSS的布局原理 3.1盒子模型[4] CSS盒子模型是DIV+CSS的网页布局的核心。 HTML文档中的每一个盒子都可以看成四部分组成： 内容（content）、填充（padding）、边框（border）和 边界（margin）。每个部分又派生出top、right、bottom、 left四个分支属性，如图1所示。 3.2常用的定位属性 在CSS中定位机制包括：标准流，定位和浮动。 通过使用position属性，我们可以选择4种不同类 型的定位，position属性值分别有：static、relative、 absolute、fixedo 其中 relative （相对定位）与 absolute （绝对定位）是最常用的两种定位方式。如果设定相 对定位：元素实际上依然占据文档中的原有位置，只 是视觉上相对于它在文档中的原有位置移动了。如果 指定绝对定位时，元素就脱离了文档，即在文档中已 当某个盒子设置为float浮动定位后，将使块级元 素脱离普通文档流，浮动的框可以向左或向右移动， 直到它的外边缘碰到最近的父包含框或另一个浮动框 的边框为止。其他邻近元素将占据其空间表现得就像 浮动框不存在一样。可以通过clear属性清除邻近某侧 其他元素浮动。 4DIV+CSS布局应用实例 采用DIV+CSS的网页布局思路如下：首先用DIV 分块，定义语义结构；然后利用CSS定位和添加样式 达到美化网页效果，如：加入背景、对齐、边框线条 等；最后在CSS定义的盒子内添加相应的主体内容。 下面以博客首页设计为例，通过调用外部CSS文件， 实现如图2效果，很好的体现了 web标准结构与内容 相分离的思想。 当没有导入CSS样式表文件时，样例页面效果如 图2所示，只是页面的“内容”。如果导入外部CSS 文件后，页面呈现