探析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.
转载注明来源:https://www.xzbu.com/1/view-15146914.htm
