计算机论文

DIV+CSS技术在网页设计布局中的应用

时间：2023-02-16 09:30 所属分类：计算机论文 点击次数：

　　摘要：本文详细阐述了DIV+CSS的基础理论，并从标准布局、定位布局、浮动布局这三个方面对DIV+CSS布局技术在网页设计中的应用进行了介绍，并提出DIV+CSS技术在网页设计布局中的应用的注意事项。

　　关键词：DIV+CSS;布局技术;网页设计

　　网页当中，布局良好可以成为吸引网民的重要手段，它如同陶艺创作前期的创意构思图一般，可以引导网页设计时进行更为科学合理的内容分配，使得整体局面丰富而不凌乱，让人体会到网页的美。布局，其实就是将网页当中的各个元素进行合理定位安排，使得整个网页结构层次分明，各个元素不漏不乱，均出现在它应该出现的位置。在网页布局当中， Table技术使用非常多见，但是由于其存在的问题和不足，使得DIV+CSS布局方式逐渐成为了网页设计布局的主要技术方式，并在网页设计布局中发挥重要的作用。

　　一、DIV+CSS的基础理论

　　DIV技术其主要作用就是对HTML语言开展的，也可以称之为层叠样式表中的定位技术，其主要的作用就是划分。DIV元素多种多样，但是其主要用途就是为了对HTML文档中的大块内容提供结构和背景元素。DIV技术可以对网页的样式信息和內容进行划分，使其成为独立的含有实际意义的模块。DIV技术对所有模块进行直接控制。

　　CSS技术指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。[1]CSS技术可以静态修饰网页的同时，动态的对网页中各个元素进行格式化，使得更加容易便捷的对网页布局进行控制，从而提高网页下载速度。

　　二、DIV+CSS布局技术在网页设计中的应用

　　DIV+CSS布局技术在网页设计中应用时，要加强对网页信息里面所包含的语言和结构进行详细的了解和仔细的研究，使得网页的各个组成部分、元素能够按照相应的组合排列方式的框架所形成，从而使得整个网页设计布局更为科学合理。

　　(一)标准布局

　　在网页设计当中，其标准布局的具体含义就是指将网页中各个组成元素按照HTML代码的要求，从左到右，自上而下按照顺序进行分布，这个就是网页设计布局当中的标准布局。在进行网页设计当中，关于块级元素，计算机默认的分布方式就是其所有元素按照自上而下的顺序进行垂直分布，大家一起的操作标准，默认为无论块级元素多么的宽扩或者如何超出其宽窄限制，都会让他自己独立占领一行。而内联元素则与块级元素有很大的区别，他所包含的元素是选择从左到右的在水平方向分布显示的，如果超出了一行，那么就会由系统自动对其进行自上而下的换行，然后再开展自左向右的排列顺序进行分布布局，如此一直往下类推，直到完成相关网页设计工作。[2]

　　(二)浮动布局

　　当在进行网页设计过程中，其标准布局方式在进行布局设计时无法满足系统或者网页设计的需求，我们可以将部分设计利用两个甚至更多的DIV在一行当中进行显示，那么为了实现该一目的，就需要利用到浮动布局。浮动布局他的表现和作用就是打破传统的标准布局模式，不再以自上而下、从左到右的标准布局方式布局，而是选择让块级元素不再独立占领一行，而是可以多个块级元素存在一行等多种方式来实现网页设计布局的多重设计效果。

　　(三)定位布局

　　定位布局一般分为三种方式即相对定位、绝对定位及固定定位。其主要的属性表达主要有position、z-index等元素属性。绝对定位是利用HTML的文档内容在水平方向和竖直方向存在的不变的元素来确定的，其绝对位置定位的元素不占据空间环境;绝对定位它的位置是和相对于已经定位的祖先元素而言，如果当前需要进行定位的元素内容已经没有祖先元素的存在，那么就需要相对于整个网页来讲进行定位;相对定位的说法是相对于绝对定位来定义的，它与绝对定位的区别就在于它们的参照物不同，绝对定位其参照点是页面左上角的原点，而相对定位的参照物则是元素本身的位置;如果发现该元素在此过程中存在了偏移出现在了新的定位上，那么我们仍然要从原始的起点位置进行确定占据相应的空间;固定定位指的是其位置永远都是相对于网络页面窗口位置选择相应的位置，即使网页下滑或者左右移动，其事物仍然位置不会发生改变，比如在网页上看到的小广告，无论我们怎么点击或者浏览网页，它就存在哪里。[3]

　　定位布局实现各项元素属性，其主要的实现方式就是相对定位，通过确定水平和竖直的位置，来实现标准流的位置存在。在进行绝对定位使用的过程中，我们一定要对其祖先元素进行位置属性的设置，以此保证标准流的其他元素布局不会因为绝对定位的影响而产生影响，所以在开展网页布局设计时，为了实现绝对定位的元素覆盖其他元素，我们可以通过z-index属性来实现控制元素的目的，通过控制元素层级顺序来达到定位布局的效果，在实际的运用过程中，其相对定位一般不是独立单独使用的，其主要是利用祖先元素作为其定位元素，从而实现绝对定位中子孙元素的定位。

　　三、DIV+CSS布局的注意事项

　　在进行网页设计整体布局时，现今主要采取的方式为标准流方式，当网页页面存在多个块级元素在一行当中显示时，我们就可以通过浮动布局和定位布局对网页设计布局进行改变实现目的。采用浮动布局，我们可以实现对后续出现的元素所开展的清除工作及影响。在进行定位布局的时候，开展祖先元素的定位设置，可以作为定位布局相对定位的参考对象，同时还要满足绝对位置的坐标设置。

　　综上所述，为了实现网页设计布局更加科学合理，网页整体更加的美轮美奂，我们可以采用DIV+CSS布局技术，从而来实现网页结构的完美和表现分离的流畅。DIV+CSS的布局方式可以有效提升网页的开发速度，提升网页的运行效率和代码的可读性，但是要实现对DIV+CSS技术的熟练运用还是要加强自身的学习和经验积累。

　　参考文献：

　　[1]温盛萍. DIV+CSS布局技术在网页设计中的应用[J]. 信息化建设， 2015， No.206(10)：83.

　　[2]张继皇. 网页设计中DIV+CSS布局技术的应用研究[J]. 广东教育(职教版)， 2018， 000(007)：123-125.

　　[3]张晓景. Div+CSS 3+jQuery网页设计深度剖析[M]. 电子工业出版社， 2016.