常见网页布局技术解析

【摘要】2019年10月，第六届世界互联网大会在中国浙江乌镇召开，来自世界各地的政府代表、互联网企业领军人物、专家学者等1500余名嘉宾出席大会。人们通过网页获取大量的信息，布局合理、设计精美的网页越来越受用户的青睐。

【关键词】网页布局;DIV+CSS

网页是互联网的重要信息载体，人们使用网页获取信息大大促进了网页设计的发展。精美的网页不仅需要内容精益求精，也要对内容进行合理有效的视觉编排。这就需要网页设计人员不仅要能够熟练地使用软件，还要对网页的布局知识进行深入的学习，从而掌握网页设计布局的技巧。

1. 关键技术

1.1 HTML5

HTML5是万维网的核心语言，它是万维网联盟在2014年完成的第五次重大修改后发布的超文本标记语言（HTML）。HTML5赋予网页更好的意义和结构、更短的启动时间、更快的联网速度、更开放的应用接口和更丰富的多媒体支持，它的技术优势更多的体现在移动设备网页的设计与开发上。

1.2 DIV

DIV全称Division，即划分，也可以称其为图层，它是HTML中指定的，专门用于布局设计的容器对象，可以容纳其他网页元素。

1.3 CSS

CSS全称Cascading Style Sheets，层叠样式表，完全有别于传统的布局方式，可以实现网页表现和内容分类。

CSS是控制网页布局样式的基础，将页面的内容与表现形式分离。网页中由HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式，将设计部分剥离出来放在一个独立样式文件中。这样的页面对搜索引擎更加友好。

1.4 DIV+CSS布局技术

DIV+CSS布局技术是当下最流行的网页布局技术。DIV标记将页面分块，然后在各个块中添加相应的内容，最后使用CSS定位对各块定位。通过DIV+CSS布局页面，网页中的文本、图片等定位精确，更新方便，易于后期维护，受到广大网站管理人员的青睐。

2. 常见网页布局方式

2.1 内容居中布局设计

居中布局的设计目前在网页中的应用非常广泛，所以如何在CSS中让设计居中显示是大多数开发人员首先要学习的重点之一。居中布局设计主要有以下两个方法：

2.1.1 使用自动空白边让设计居中

父层DIV的ID设置为“box”，水平居中，只需定义Div的宽度，然后将水平空白边设置为auto，其代码如下所示：

#box{width：720px; margin：0 auto; }

此设置方法是网页中最常用的居中设置方法，所有浏览器中均有效。但是IE5.X或低版本的浏览器并不支持自动空白边。因此，需要将text-align属性设置为left，其CSS代码如下：

body{text-align：center;}

#box{width：720px; height：600px; margin：0 auto; text-align：left; }

2.1.2 使用定位和负值空白边让设计居中

页面中定义容器的宽度，将容器的position属性设置为relative，再将left属性设置为50%，就会把容器的左边缘定位在页面的中间，代码如下：

#box{width：720px; position：relative; left：50%;}

如果希望容器中间居中，只要设置容器左边负值的空白边，宽度为容器宽度的一半，代码如下：

#box{width：720px; position：relative; left：50%; margin-left：-360px;}

2.2 浮动布局设计

浮动布局设计在网页制作中起着非常重要的作用，也是最常见的一种布局方式，浮动布局设计又可分为多种形式。

2.2.1 两列固定宽度布局

设置id名为left与right的Div，两个div并排显示，代码如下：

#left，#right {width：300px; border：2px solid #06F;float：left;}

2.2.2 两列固定宽度居中布局

两列固定宽度居中布局可以用一个居中的Div作为容器，将两列分栏的另两个Div放置在容器中。CSS代码如下：

#box{width：608px; margin：0 auto;}

#left，#right {width：300px; height：300px; float：left;}

一個对象的真实宽度是由本身的宽、左右外边距、左右边框和内边距等属性相加而成，所以box的宽度设为608px。

2.2.3 两列宽度自适应布局

网页自适应主要通过宽度的百分比值设置，如，将左栏宽度设置为30%，右栏宽度设置为60%，代码如下：

#left{width：30%;float：left;}

#right{width：60%;float：left;}

2.2.4 两列右列宽度自适应布局

在实际应用中，有时需要左栏固定宽度，右栏根据浏览器窗口的大小自动适应。则需要在CSS中设置左栏宽度，右栏不设置宽度、浮动，代码如下：

#left{width：200px;float：left;}

2.2.5 三列浮动中间列宽度自适应布局

三列布局时，中间列宽度自适应布局，则设置左栏固定宽度居左显示，右栏固定宽度居右显示，中间栏根据左右栏的间距变化自动适应。单纯地使用float属性与百分比属性不能实现此类布局，需要设置绝对定位。绝对定位后的对象，不需要考虑它在页面中的浮动关系。

首先设置绝对定位控制左列与右列的位置：

body{margin：0px;}

#left{width：300px; position：absolute; top：2px; left：1px;}

#right{width：300px; position：absolute; top：0px; right：0px;}

中列设置如下：

#main{ margin：0 auto; margin：0px 304px 0px3 04px;}

只需要将main的左边和右边的边距固定保持left和right的宽度，便实现了两边各让出304px的自适应宽度，不需要再设定浮动方式，就可实现布局的要求。

2.3 高度自适应布局

高度值同样也可实现自适应布局， CSS代码如下：

html，body{margin：0px; height：100%;}

#left{width：300px;height：100%; position：absolute;float：left;}

值得注意的是需要将left、html、body的高都设为100%，这是基于浏览器解析规则引发的高度自适应问题。

3. 结语

DIV+CSS的网页布局技术真正实现了页面内容与表现形式的分离，大到各大门户网站，小到不计其数的个人网站，都使用在Div+CSS布局网页。学习和使用DIV+CSS技术布局网页十分必要。

作者简介：田君，内蒙古人，从事数据库管理、网页设计等方面的教学与研究工作。