《DIV+CSS技术在网页布局中的应用研究,网页设计论文.docx》由会员分享，可在线阅读，更多相关《DIV+CSS技术在网页布局中的应用研究,网页设计论文.docx（12页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、DIV+CSS技术在网页布局中的应用研究,网页设计论文内容摘要：互联网信息技术突飞猛进，网页设计与制作技术对于提高群众工作效率与工作质量具有重要意义。文章首先介绍了网页设计与制作的主要Web标准，接着分析了DIV、CSS、盒子模型及其技术优势，最后提出了DIV+CSS技术的实践应用场景。应用结果表示清楚，使用DIV+CSS技术进行网页布局，配合使用浮动、定位等相关属性，在实际应用中有不错效果，使项目后期维护更容易。 本文关键词语：DIV;CSS;网页布局;盒子模型; Abstract：With the rapid development of Internet information tech
2、nology, web page design and production technology is of great significance to improve work efficiency and quality. This paper first introduces the main web standards for web page design and production, then analyzes DIV, CSS, box model and technical advantages, and finally puts forward the practical
3、 application scenario of DIV+CSS technology. The application results show that using DIV+CSS technology for web page layout, combined with floating,positioning and other related attributes, can achieve good results in practical application, making the project easier to maintain in the later stage. K
4、eyword：DIV; CSS; web layout; box model; 网页能够看作承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。在网页设计与制作经过中，网页布局是非常重要的一个步骤，一个网页布局能否合理睬直接影响用户的使用体验，所以网页开发人员应该在网页制作之前进行布局设计1。在早期的网页制作中，开发人员用表格进行网页布局，有较多缺点，制作完成后改动不易，不好调整，同时tr、td等标签过多，影响网络传输，样式调整比拟复杂。 一种遭到互联网行业广泛青睐的技术应用逐步凸显出来，这就是DIV+CSS布局技术。它能够让用户调整网页中的元素就像编辑Word文档一样方便，
5、同时能够精准定位网页中的位置，降低了网页维护的难度，也提高了网页在服务器中的下载速率和在网络中的传输速率。 1 Web标准 Web标准是由W3C及其他的标准化组织制定的多种标准组合而成的，并不是单指某一个标准,华而不实主要包括Web的构造、表现和行为。在内容上包含、X、CSS、JavaScript等2。 1.1 构造标准 构造标准主要包括三个内容，分别是：、XML和X，其作用是用来对网页元素进行整理和分类。如今主流技术是超文本标签语言5(Hyper Text Markup Language 5)，简称H5，主要是通过相应的标签来描绘叙述网页中的文本、图片、声音等多媒体内容。 1.2 表现标准
6、表现标准主要指的是CSS样式，用于设置网页元素的外观样式，包括版式、颜色、大小等样式。CSS通常也被称为CSS样式或样式表，主要用于设置Web页面中文本内容的字体、大小、对齐方式等文本样式，图片、视频等盒子的外宽高、边框样式、内外边距等外形样式，版面的排版布局定位等外观显示样式。 1.3 行为标准 行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM中立于平台和语言的接口，和ECMAScript。而JavaScript是网页中的一种脚本语言。 2 DIV+CSS技术概述 2.1 DIV技术简介 DIV英文全称为 pision ，译为中文是 分割、区域 。 p 标签简单而言就是一个块
7、标签，能够实现网页的规划和布局。在文档中，页面会被划分为很多区域，不同区域显示不同的内容，如导航栏、Banner、内容区等，这些区块一般都是通过 p 标签进行分隔。 能够在 p 标签中设置内外边距、宽高，同时内部能够包容段落、标题、表格、图像等各种网页元素，还能够多层嵌套。 p 标签非常强大，通过与id、class等属性结合设置CSS样式，能够替代大多数的块级标签，如 h 标签、 p 标签，但是它们在语义上有一定的区别， p 标签是一个通用的块的级元素，最大的意义在于和浮动属性float配合，实现网页的布局3。 2.2 CSS技术简介 多数网页都是遵循Web标准开发的，即用编写网页构造和内容，
8、而相关版面布局、文本或图片的显示样式都使用CSS控制。与CSS的关系就像人的身体与衣服，通过更改CSS样式，能够轻松控制网页表现样式，如此图1所示。 图1 构造与表现分离 CSS样式规则：选择器属性1:属性值1；属性2:属性值2；。CSS样式作用的对象用选择器来指定，对该对象设置的详细样式以 键值对 形式写在花括号内。选择器主要有四种，分别是标签选择器、类选择器、id选择器和通配符选择器4。 1标签选择器是指用标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。所有标签名都能够作为标签选择器，用标签选择器定义的样式对页面中该类型的所有标签都有效。 2类选择器使用 . 英
9、文点号进行标识，后面紧跟类名。类名就是元素的class属性值，能够为元素对象定义单独的样式，一个元素能够设置多个类名，同时，一个类样式能够被多个元素对象引用。 3)id选择器使用 # 进行标识，后面紧跟id名。id名就是元素的id属性值,大多数元素都能够定义id属性，元素的id名是唯一的，只能对应于文档中某一个详细的元素。 4通配符选择器用 * 号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。一般用于样式的初始化，去除元素的默认样式，如边框、内外边距、列表样式等。 2.3 盒子模型简介 2.3.1 盒子模型 网站页面内容都是根据区域划分的，每一块区域分别承载不同的内容，使网页的
10、内容固然零散，但是在版式排列上仍然清楚明晰且有条理。这些承载内容的区域被称为盒子模型。盒子模型是把页面中的元素看作是一个方形的盒子，也就是一个盛装内容的容器4。每个盒子都由元素的内容Content、内边距Padding、边框Border和外边距Margin组成，并且每个盒子都有大小，盒子的宽为内容的宽、左右内边距、左右边框和左右外边距之和，盒子的高为内容的高、上下内边距、上下边框和上下外边距之和5。以生活中常见的手机包装盒为例，盒子模型内容相当于手机，内边距相当于内填充物，边框相当于手机盒子硬壳，外边距相当于与其他盒子的距离，如此图2所示。 图2 盒子模型图 2.3.2 CSS的定位机制 CS
11、S的定位机制有三种，分别是普通流、浮动流和定位流2。 1普通流，也叫标准文档流，是阅读器的默认方式，内容元素排版布局经过中，会自动从左往右，从上往下进行流式排列。 2浮动流，内容元素会脱离标准文档流的控制，移动到其父标签指定位置。在CSS中，通过float属性来定义浮动，由于浮动标签不再占用原文档流的位置，它会对页面中其他标签的排版产生影响，要用clear属性去除浮动。 3定位流，通过position属性定义标签的定位形式，结合边偏移属性top、left、bottom、right能够精到准确定义标签的位置。有四种定位形式：静态定位static，默认定位方式；相对定位relative，相对于其原
12、文档流的位置进行定位；绝对定位absolute，相对于其上一个已经定位的父标签进行定位；固定定位fixed，相对于阅读器窗口进行定位。 2.4 DIV+CSS技术优势 2.4.1 精简代码，减少重构难度 使用DIV+CSS进行网页布局，代码精简，构造与表现的分离，使CSS文件能够在网站的任意一个页面进行调用，若要修改部分页面，只需要修改CSS文件中代码，而假如使用表格布局，修改部分页面是一件费事的事情。 2.4.2 网页访问速度更快 使用DIV+CSS进行网页布局，精简了很多页面代码，所以用户阅读访问的速度也得到了提高，进而很大程度上提升了用户对网站的好感度。 2.4.3 搜索引擎优化更好 使
13、用表格嵌套层次太多会导致无法被搜索引擎抓取的问题，而采用DIV+CSS布局的网站对于搜索引擎很友好，其简洁、构造化的代码愈加有利于突出重点，同时也更合适搜索引擎抓取。 2.4.4 阅读器兼容性更好 由于阅读器厂商较多，其常用的内核也有四、五种，不同的阅读器对table的解析可能不同，所以使用table进行网页布局，在使用不同阅读器情况下有可能会发生错位变形，进而导致意想不到的后果，而利用DIV+CSS进行网页布局，其边框和内外边距设置好后，则不会出现这样的情况，无论用户使用什么阅读器，网页都不会出现错位变形的情况。 3 DIV+CSS技术实践应用 3.1 某网页的布局分析 在进行网页实现前，一
14、定要对网页布局进行分析。下面以一个常见两列布局的网站首页构造进行分析，如此图3所示，页面从上到下分别是头部Header、导航Nav、焦点图Banner、内容Content和页面底部Footer，华而不实头部又分为Logo和Search两部分，内容又分为Main和Aside两部分。 图3 某网站首页构造图 3.2 某网页的构造 分析完页面布局，接下来使用 p 标签来搭建页面构造。 !DOCTYPE lang= en head meta charset= UTF-8 title XX网站首页 /title /head body p id= header p id= logo logo /p p i
15、d= search search /p /p p id= nav 导航栏 /p p id= banner 焦点图 /p p id= content 导航栏 p id= main main /p p id= aside aside /p /p p id= footer 页面底部 /p /body / 3.3 某网页布局的主要CSS样式 搭建完页面构造，就要进行页面的CSS样式设置，下面列出了该页面布局相关的主要样式。 style bodymargin:0;padding:0;font-size:24px;textalign:center; /*设置所有模块的宽度为980px，居中显示*/ pwi
16、dth:980px;margin:5px auto;background:#d2d2d2; /*分别设置各个模块的高度*/ #headerheight:60px; /*logo左浮动search右浮动*/ #logowidth:300px;float:left;margin:0; #searchwidth:300px;float:right;margin:0; #navheight:40px; #bannerheight:200px; #contentheight:200px; /*main左浮动aside右浮动*/ #mainwidth:70%;height:200px;float:left
17、;margin:0; #asidewidth:30%;height:200px;float:right;margin:0; #footerheight:90px; /style 4 结束语 使用DIV+CSS技术进行网页布局，配合使用浮动、定位等相关属性，灵敏应用，在实际应用中能够获得不错的效果，而且遵循Web标准，进行构造与表现分离，采用规范命名，能够使得项目在后期的维护上更容易，同时在二次开发和重构上也具有优势6。 以下为参考文献 1李彦.DIV+CSS技术在网页设计布局中的应用研究J微型电脑应用,2020(3):19-21,30. 2刘心美.DIV+CSS网页布局的设计与实现J科技资讯,2021(30):14-16. 3李慧. DIV+CSS布局技术在网页设计中的应用J电脑编程技巧与维护,2021(7):20-22. 4马程序员.5+CSS3网页设计与制作M北京:人民邮电出版社,2020. 5刘军华,陶永进.DIV+CSS网页布局技术中盒子模型的应用研究J湖南邮电职业技术学院学报,2020(4):35-39. 6曹瑞燕.基于页面布局技术的网页设计研究J .辽宁经济职业技术学院(辽宁经济管理学院)学报,2020(3):70-72.