返回 政治论文 首页
DIV_CSS技术在网页布局中的应用

  随着Web2.0的流行,DIV+CSS技术已被广泛的应用于网页布局中,不管是大型的门户网站,还是个人主页都采用了DIV+CSS布局方式。本文阐述了Table布局的不足、DIV与CSS简介、如何使用DIV+CSS技术进行布局以及使用DIV+CSS技术进行布局的优势。
  【关键词】DIV CSS 网页设计
  在DIV+CSS技术产生之前,由于可以对Table标签的边框设置为0,早期的网页布局采用的都是Table布局。Table布局的核心是根据网页的效果图将表格划分成满足网页版式的各个独立区域,将网页的HTML标签和内容放入相应的单元格中,设计简单的网页时,table布局比较简单直观,这种布局方法在早期的网页非常流行,但是复杂的网页结构一般都要用多个表格进行嵌套才能实现页面的布局,Table布局的不足逐渐显现出来,首先,如果将网页的全部元素都放在表格中,表格又嵌套表格,网页的设计会变得非常复杂,更新网站时工作量非常巨大。其次,网页内容和定义网页外观的CSS样式混合都放在表格中,不利于数据调用分析。最后,浏览器显示网页时先下载表格完成后再显示表格里的内容,复杂的表格嵌套会使得浏览器解析文件时速度变慢。采用DIV+CSS布局的方式可以实现网页结构和外观的分离,有效的弥补了Table布局方式的不足。
  1 DIV与CSS简介
  DIV(division,区分)是HTML的一个标签,具有容器的特性,可以将HTML分割成不同的区块,并且可以将文本、图片、链接等其的HTML标签放在div容器中,但是如果使用div时,不结合CSS层叠样式,它跟其它的HTML标签一样,不能实现布局效果。
  CSS(Cascading Style Sheet,层叠样式表)是用来定义网页的外观显示,CSS于1996年正式推出,在网页中使用CSS样式可以对网页内容的显示进行精确控制,主要是通过定义元素的相关属性,包括对元素的大小、颜色、边框等来实现其展示形式。
  2 DIV+CSS布局方法
  2.1 CSS盒子模型
  盒子模型是网页布局的基础,指定元素如何显示以及如何相互交互,每个盒子都有四个关键的盒子属性:边距、边框、填充、内容。边距(margin)是元素外面的区域,它永远没有颜色,并且总是透明的。边框(border)是元素的边框,边框可以具有多种样式、颜色和宽度。填充(padding)是内容到边框的距离,存在于内容周围。Margin、Padding、border都有上下左右四个边,可以应用于一个元素的所有边,也可以应用于单独的边。
  2.2 盒子的浮动与定位
  HTML文档流默认是上下结构的,HTML标签分为行内(inline)元素和块级(block)元素,行内元素可以不用设置元素的width和height属性,显示完一行,才会显示下一行。块级元素是独占一行,即使一行还有空白部分,也会自动显示在下一行。如果要实现HTML文档流为左右结构,即让块级元素显示在同一行则要使用float浮动属性,float属性常用的三个取值为left、right、none,可以根据具体的网页布局需要,实现左浮动或右浮动。
  使用float属性时,一般结合clear属性使用,clear紧跟在float元素之后,用换行方式区隔开浮动元素,clear属性常用的取值有left、right、both、none,注意和前一个浮动元素的浮动方向必须一致。
  2.3 DIV+CSS布局
  在对网页采用DIV+CSS技术进行布局时,一般分为三个步骤:第一、根据网页的设计效果图分析页面的具体结构,形成div布局结构;第二、往各个div块里插入相应的内容;第三,编写每个DIV块的CSS控制定位。
  (1)分析页面结构,形成div布局结构:一般网页布局都是分成为网页头部、网页内容主体以及网页底部三大块,然后根据布局需要再将这三大块分成不同的区域,采用div元素将页面的结构定义出来,代码如下:
  
  


  

  

【相关论文推荐】
  • DIV+CSS技术在网页布局中的应用
  • 浅析网页布局中DIV+CSS技术的应用
  • Div在网页布局技术中的应用
  • DIV+CSS布局在网页设计教学中的应用研究
  • DIV+CSS在网页布局中的应用研究
  • DIV+CSS在网页布局和样式中的应用分析
  • 浅谈CSS+DIV在网页制作中的应用
  • 初探DIV+CSS在网页优化中的应用
  • 基于DIV+CSS的网页布局技术应用