div+css技术在网页布局中的应用

《div+css技术在网页布局中的应用》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、DIV+CSS技术在网页布局中的应用　　摘要信息科学技术的进步使得互联网技术行业快速发展起来。其中网页设计作为互联网技术行业中重要的一部分，应用先进技术提高其工作效率与工作质量具有重要意义。DIV+CSS技术在网页布局中的优势作用使得其在网页设计与开发中应用越来越广泛。基于此，本文首先对DIV+CSS技术进行概述，并对其在网页布局中的优势与应用原理进行分析，最后举出网页设计的实例对该项技术的具体应用进行分布阐述。　　【关键词】DIVCSS网页布局实践　　当前，我国的信息技术得到了突飞猛进的发展，逐渐渗透到人们的生活与工作中，互联网已经成

2、为不可或缺的重要工具。随着互联网的不断发展，网页开发与设计的功能日益强大。传统表格布局技术一些弊端的凸显使得DIV+CSS技术的应用逐渐增强，并且受到互联网行业的青睐。该种布局技术能够准确定位网页设计中的对象，提高网页传输与下载的速率，并且能够降低网页维护的难度，简化操作流程。　　1DIV+CSS技术概述　　1.1DIV技术　　作为DIV+CSS技术中不可缺少的一部分，DIV也是设计、开发网页过程中的应用语言、标记元素，为文档提供布局结构。DIV起始到结束标签之间包含的内容都是HTML文档中大块的构成部分，还能把其称作定位技术，控制整个

3、设计与开发中的元素。　　1.2CSS技术　　即为CascadingStyleSheet（层叠样式表），在设计网页时，CSS能够对页面的颜色、布局与背景等进行有效控制，丰富页面效果。另外，还能在一定程度上简化操作流程，也能提高网页语言的简洁性。在传统的表格布局技术中，也曾使用CSS技术。　　1.3DIV+CSS技术　　该种布局技术进一步规范网页设计中的结构，规整页面中的元素，分离内容与样式，使之成为单独个体。另外，在将DIV与CSS进行合并的过程中，能够提高网页操作的灵活性与方便性。　　2DIV+CSS技术在网页布局中的优势　　2.1分离

4、内容与样式，精简代码　　将内容与样式进行分离，是该种布局技术最为显著的特征。样式由独立样式文件进行放置，链接到html文件中，通过对外部样式表里CSS样式属性的修改，就可以改变整个站点的版式。通过对应用CSS与未应用CSS技术的排版代码进行分析，能够发现应用CSS样式进行排版的代码要简洁得多。由此可见，CSS布局方式具有明显的优势。　　2.2浏览页面更快速　　相较于以往表格嵌套布局，应用该种布局技术能够显著提高网页浏览与加载的速度。这是因为在达到相同页面效果的情况下，该种布局技术的页面容量小于表格排版。　　2.3利于搜索引擎爬虫　　利用

5、该种布局技术，结构清晰，容易被搜索引擎搜索到，并且使排名结果得到上升。另外，应用CSS能够突出网页中的正文部分，方便搜索引擎进行采集与寻找。　　2.4方便进行网页维护　　传统表格布局，页面需要修改时，往往需要改动大量代码，工作量巨大，而DIV+CSS技术在网页布局中的应用能够便于控制样式，降低网页维护的难度，并且便于进行修改。　　3DIV+CSS技术在网页布局中应用原理　　3.1盒子模型　　该种布局技术的核心为CSS盒子模型，也是网页布局的基础。HTML文档之中包含的每一个盒子都能看做由内容、填充、边框与边界四部分组成。每一个部分都具有

6、四个边：top、right、bottom与left，可以单独修改一个边，也可以同时修改全部边。　　3.2定位和浮动　　CSS中包括三种基本的定位机制：普通流、定位和浮动。普通流就是元素按照其在HTML中的位置先后次序依次?@示，行内元素共处一行之中，块级元素占一行或多行。相对定位与绝对定位应用比较广泛。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。若使用绝对定位方式，绝对定位使元素的位置与文档流无关，因此不占据空间。若一个盒子设置成浮动定位，浮动将元素从原来的占位中删除，使元素可以左右移动

7、，直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。若是需要清除临近元素的浮动，可以利用clear属性进行清除。　　4DIV+CSS技术在网页布局中的实践应用　　4.1网页布局、规划　　网页制作的基础为效果图的制作，不仅需要迎合建设方的需求，还要满足用户访问的需要。得到一张美工图片后，应该从上下、上中下、左右等展开思考。例如，将一个布局模式为上中下的网页作为实例进行分析，该网页中含有网站的标识与导航条，在布局中能够应用DIV技术，采用左右浮动进行定位。选取一张视觉效果好的图片作为Banner条，使用DIV标签进行定位，使用独立DIV对

8、中间部位进行控制。该网页底部存在版权方面的信息，也使用DIV标签实现布局。　　将DIV+CSS技术的网页布局理念作为依据对整个主页的结构进行划分，得出DIV框架的结构图，将此图作为显示出每个区块嵌套关系的依