网页设计论文

您当前的位置:学术堂 > 计算机论文 > 网页设计论文 >

DIV+CSS在网页布局制作中的应用

来源:科技风 作者:杨晓姗
发布于:2020-03-26 共2139字
网页设计与制作论文第三篇:DIV+CSS在网页布局制作中的应用
 
  摘要:布局对网页的作用类似于设计图对地产开发商的作用,制作商务网页的首要内容是对网页进行布局。常见的布局方式有:表格布局、框架布局、层布局,鉴于以上布局方式均存在一定的缺陷逐渐退出历史潮流。目前流行的布局方式是DIV+CSS来制作页面,DIV主要解决网页中的元素(如文字、图片、表格、音视频等)放置在网页显示位置的问题,而CSS主要解决网页元素美观性的问题。本文主要探讨DIV+CSS布局方式用法及要注意的问题。
 
  关键词:DIV+CSS; 浮动布局; 定位布局;
 
  一个商务网页是否吸引用户,布局至关重要。所谓布局就是对网页元素进行定位,网页整体结构是上中下还是左中右,网页的LOGO、导航、网页标题、网页核心内容、版权信息等内容显示的位置。鉴于表格布局导致表格标签的嵌套浏览器解析较慢,框架布局不够灵活,DIV+CSS布局方式逐渐成为主流,DIV实现把页面进行切割,不同的DIV放置不同的内容,CSS实现对内容进行美化,如添加背景色、设置不同块之间的间距等等。
 
  1 DIV+CSS的概念
 
  DIV是HTML语言中的一个标签元素即<div></div>,该标签代表一个容器本身没有实际意义,是一个块级元素,在该标签中可以放置文字、图片、链接、音乐、div等,一个页面可以通过多个div标签的嵌套实现对网页进行分割,通过设置div中的内容与div的内边距、不同div之间的外边距来对页面进行布局。
 
  CSS(Cascading Style Sheets)指层叠样式表,作用是对网页元素进行美化,CSS可以出现在HTML标签行中、HTML的<head></head>标签中、外部样式表三个位置,在DIV+CSS布局中常常把CSS独立形成一个.css文件,实现与HTML文件完全分离,可以实现样式表的重复使用、网页的结构与表现可以实现完全分离。CSS中主要有类选择器、ID选择器、复合选择器和标签选择器四种,优先级顺序为:复合选择器>ID选择器>类选择器>标签选择器,复合选择器的优先级最高、标签选择器的优先级最低,ID选择器只能使用一次,类选择器可以重复使用,在实际制作网页过程中要根据需求灵活选择CSS选择器的类型。
 
  2 DIV+CSS的运用
 
  2.1 标准布局
 
  标准布局是指网页元素按HTML代码的顺序自上而下或自左向右逐步分布的,就像流水一样,我们将这种流动方式称为标准流或文档流。标准流布局具有以下两个比较典型的特征。块级元素会在所处的包含元素内自上而下按顺序垂直分布。因为在默认状态下,不管把块级元素的宽度设置多窄,它都会独占一行。内联元素会在所处的包含元素内自左向右水平分布显示,超出一行后,会自动自上而下换行显示,然后继续自左向右按顺序流动,依次类推。
 
  2.2 浮动布局
 
  标准布局不能完全满足网页设计的需求,有时设计需要把两个或者多个DIV在一行显示,此时需用到浮动布局,浮动布局的主要作用是打破标准流布局的自上而下、自左向右的布局方式,使得块元素不独占一行。此时可有多种方式实现效果。
 
  方法一:left、rihgt同时左浮动或者右浮动,#left#right{float:left;};方法二:left左浮动、right右浮动,即#left{float:left;},#right{flaot:right};方法三:left设置宽度和左浮动,right设置左外边距值,即#left{width:200px;float:left;},#right{margin-left:200px;};方法四:类似与方法三,right设置右浮动,left设置右外边距。设置浮动后会给right后面的元素产生影响,为了清除这种影响通常做法是在right后添加一个空白div1,并设置改空白div的样式#div1{clear:both;}。
 
  2.3 定位布局
 
  定位布局分为相对定位和绝对定位,主要是通过元素的position、z-index、overflow、clip属性来实现,相对定位通过设置水平位置和垂直位置来实现,其在标准流中的位置仍然存在。绝对定位的使用其祖先元素必须设置定位属性,在绝对定位中,标准流中其他元素的布局对绝对定位的元素不影响,所以会导致绝对定位的元素覆盖其他元素,这时就通过设置z-index属性来控制元素的层级顺序实现想要的效果。在实际应用中相对定位很少单独使用,相对定位一般作为祖先元素的定位,从而辅助设置其子孙元素的绝对定位。
 
  3 DIV+CSS布局要注意的问题
 
  页面的整体布局一般都采用标准流方式,当页面中有多个块元素要在一行显示时,可通过浮动布局和定位布局来实现,采用浮动布局,要注意清除对后面元素的影响,定位布局通常设置祖先元素的相对定位作为参考对象,即祖先元素必须拥有定位position属性,属性值为relative或absolute,其次要设置绝对定位的坐标值,参考点是祖先元素4个顶点中的任意一点,只能设置两个值即水平方向:left或right;垂直方向:top或bottom。
 
  4 结语
 
  使用DIV+CSS布局可以完美地实现结构、表现的分离,DIV的主要作用是把页面分割成一个个区域,然后运用标准布局、浮动布局、定位布局三种布局方式实现页面的结构,CSS对设置每一个区域的样式以及区域内网页元素的样式。DIV+CSS的布局方式使得网页的开发速度、执行效率以及代码的可读性都有了很大的提高,但如果要熟练的运用DIV+CSS的布局完整页面需要不停的学习和积累经验。
 
  参考文献
 
  [1]李居兰.谈网页设计常用的布局方法[J].计算机产品与流通,2019(11):253.
  [2]黄楚鹏.基于CSS页面布局的网页设计[J].电脑知识与技术,2017,13(04):45+55.
  [3]雷烨.运用DIV+CSS技术对网页进行布局[J].电脑知识与技术,2016,12(07):212-213.
点击查看>>网页设计与制作论文(优秀范文8篇)其他文章
作者单位:湖南信息学院
原文出处:杨晓姗.探析DIV+CSS布局方式制作商务网页[J].科技风,2020(08):115.
相关内容推荐
相关标签:
返回:网页设计论文