盒模型在网页设计中的应用研究,网页设计论文

盒模型在网页设计中的应用研究,网页设计论文内容摘要：本文将盒模型技术应用于布局网页的页面，摒弃了传统表格布局网页的方式并精简了网页代码，使网页布局格式愈加趋于标准化。实践结果表示清楚，在网页设计中采用盒模型技术DIV标签位置愈加灵敏，网页外观修饰效果愈加出众，对网页页面元素排版精到准确度能够到达像素级。本文关键词语：盒模型;网页设计;CSS;应用研究;Abstract：Thispaperappliestheboxmodeltechnologytothelayoutofwebpages,abandonsthetraditionalwayoftablelayoutofwebpages,simplifiesthewebpagecode,andmakesthewebpagelayoutformatmorestandardized.ThepracticalresultsshowthattheboxmodeltechnologyusedinwebpagedesignmakesthepositionofDIVtagsmoreflexible,theeffectofwebpageappearancemodificationmoreoutstanding,andtheaccuracyofwebpageelementtypesettingcanreachthepixellevel.Keyword：BoxModel;WebDesign;CSS;ApplicationResearch;1引言随着社会的发展与进步，越来越多的行业开场制作个性化的网页，以提高其宣传力和影响力。为了愈加灵敏地对网页进行布局，实现页面的外观修饰，使设计出的页面构造愈加清楚明晰，更有利于搜索，方便重构和维护页面，盒模型技术的使用必不可少。盒模型原理就是将层叠样式表中的定位技术〔DIV〕标签元素当作是有一点空间的盒子。采用盒模型技术来布局网页页面的主要方式方法就是在超文本标记语言〔〕页面文档中先进行DIV标签对象的插入，再使用层叠样式表〔CascadingStyleSheet,CSS〕样式规则对插入的的DIV标签对象进行定位和样式设置，进而实现网页元素的布局和定位[1]。在网页中使用多个DIV标签进行分隔，加上CSS的定位和修饰，完全具体表现出出了网页设计中DIV+CSS盒模型布局的基本原理。2盒模型技术在使用盒模型技术设计网页页面时，应首先对DIV和CSS的使用非常熟练。华而不实DIV负责构造布局，CSS负责样式的美化。使用DIV+CSS盒模型技术能够准确和快速地定位网页页面中的各个元素[2]，并对各种元素的各种属性进行相应的设置，进而到达整个页面的布局和外观的修饰。2.1DIV技术DIV技术不仅能够分割网页页面，而且网页内容背景和总体构造也要依靠于作为标签元素的p技术，进而到达网页内容构造化、模块化。DIV技术的使用标志着网页设计技术从传统的二维空间延伸至先进的三维空间。有了DIV，在网页中能够轻松实现图片和文本的各种运动效果[3]。DIV作为标记语言中的格式标记，总是成对的出现，即出现的格式为p/p。该标记对的用法和p/p标记极为类似，包含有align对齐属性。p/p标签元素也称为容器，其他的段落标记和文本标记等对象都能够放置于该标记对中[4]。2.2CSS技术CSS技术在网页设计中的主要作用就是定义各种网页标签的样式属性。使用CSS技术能够使网页愈加的标准化和构造化，能够使样式和代码分离开，使得整个网页代码愈加清楚明晰。因而它在网页设计领域备受推崇。网页设计中扩展名为.css文件。能够把它当做是一种纯文本文件来对待。其语法构造格式为selector{property:value}。同时根据CSS样式规则的选择符进行分类，可将CSS样式分为类样式、ID属性标签、标签、复合内容4类。的头部包含所有类型的CSS样式，包含在head/head标记代码之中，开场代码标记为style，结束的代码标记为/style。3盒模型网页设计在DIV+CSS网页设计技术中，盒模型是一个重要的概念，其构造图如此图1所示。盒模型通常能够理解为把DIV元素当做一个有点空间的盒子来看待。盒子通常都有外层和里层，在这里Margin就是盒子的最外层；与之相对应的最里层便是content，其作用主要是存放详细的内容。从图1能够看出，Border为盒模型的边框，Padding为盒模型填充的内容。不管是哪种组成属性，都是由于控制元素内容的布局及定位。打开CSS规则定义对话框，Top、Right、Bottom和Left参数值能够在方框选项中设置Margin栏中的Top、Right、Bottom和Left参数值。在边框选项中，主要是对盒模型中Border的颜色、宽度和样式的属性值进行设置。网页设计中，假如要改变content和Border距离，在盒模型中能够采取与Margin一样的设置方式方法。普通用户看到网页展示的全部内容为盒子包含的content部分，内容能够是包括网页中块元素、行内元素、文本元素和图像元素等中的任一元素[5]。图1盒模型构造图使用DIV+CSS技术设计网页页面，主要是通过CSS规则中的Position和Floatd属性值快速进行定位。华而不实，Relative、absolute、fixed、static是Position定位中的四个属性。Relative是指以起点为参照能够在水平方向和垂直方向上进行移动，进而到达相对定位的目的。Absolute在页面中的作用是进行绝对定位，网页设计经过中使用绝对定位同样需要通过positon属性值的设置来完成。若要在页面中固定元素，则需要使用具有悬浮作用的fixed。Static在相应的四个属性值中固然具有静态的意思，但实际上在网页设计中并没有定位的意思。通过对Position相应属性值的改变，能够变换DIV的布局样式。Float主要作用是对浮动属性进行设置，以起到网页中对另外的DIV进行定位的目的。4盒模型布局设计在网页设计经过中，页面上任何元素均能够通过盒模型、浮动、定位来控制它们的显示方式。现主要介绍居中布局和浮动布局两种方式。网页中有诸多的布局方式，但总体来讲较为常用的一种布局方式就是居中布局[6]，即DIV+CSS学习的重点。4.1DIV容器居中显示方式方法使用该方式方法在阅读器中使用整个网页布局居中显示，详细做法能够先后分为对DIV容器的宽度进行定义，其次是对relative的属性值进行设置，left赋值50%，即可完成网页中间容器左边缘的定位。运行如此图2所示。图2网页中间容器左边缘定位图假如想要在整个网页呈居中显示，能够通过一个负值的空白边，把其宽度设置为整个容器宽带的一半，再加上关键的margin-left:-360px;代码，即可将整个网页在阅读器中进行居中显示。其运行如此图3所示。同时在这里还应注意当在一个DIV容器中包含了其他DIV容器时，那么该DIV容器中具备了居中属性的功能，假如设置其值为auto，则可将华而不实的p容器在该容器中居中显示。图3阅读器中网页居中显示4.2DIV+CSS浮动布局作为网页的布局方式浮动布在使用中也不可小觑。各个容器之间的定位通过Float属性值来控制，进而到达布局的目的，这就是浮动布局的原理。方式方法有两种：固定宽度布局、宽度自适应布局[7]。4.2.1固定宽度布局采用嵌套的方式进行布局，在网页中定义DIV容器作为网页的主体，在主体DIV容器中嵌套两个或多个容器，使用CSS规则进行设置，可快速有效地到达容器的固定宽度的布局。如此图4所示。图4容器固定宽度布局4.2.2宽度自适应布局容器宽度的百分比值的设置能够控制宽度自适应布局。因而，在宽度自适应布局中，只需使用CSS规则设置容器宽度的百分比即可，如此图5所示。图5宽度自适应布局在这里需要注意的是当在一个DIV容器中嵌套多个DIV容器时，假如要设置宽度自适应大小，可固定华而不实的一个或多个DIV容器后，其他DIV容器则不设置其宽度即可使其自适应内容的大小。5结束语作为网页标准之一的DIV+CSS技术，有着非常明显的优点，能够使网页阅读的速度大大得到提升，页面代码的篇幅大幅减少，使用的范围愈加广泛，适用于大多数阅读器[8]。同时修改也愈加方便，更改版面的时间也愈加短暂，查找使用的搜索引擎功能也愈加方便。DIV+CSS技术功能强大，其诸多功能中分离构造与表现的功能，对于网页设计初学者来讲阅读起来非常方便，由于它能够对文档代码进行大幅度的精简，仅保存了一部分的网页页面构造代码，同时网页下载时的速度也得到了极大的提高。以下为参考文献[1]温盛萍.DIV+CSS布局技术在网页设计中的应用信息化建设,2021(10):53-55[2]杨米娜.DIV+CSS技术在网页布局中的应用研究电脑开发与应用,2020(04):64-66[3]刘瑞新.网页设计与制作教程.北京:机械工业出版,2020[4]何福男.网站设计与网页制作项目教程北京:电子工业出