用div+css布局网页

陈焜

湖北职业技术学院

【摘 要】本文介绍了网页设计中常用的布局方法，重点介绍了DIV和CSS的应用规则和利弊，并结合实例探讨了DIV+CSS布局技术在网页设计中的应用。

【关键词】DIV ；CSS； 网页

1.引言

随着各种的网站制作技术的风起云涌，利用DIV+CSS的设计方式也逐步称为网站的主力军之一，DIV及CSS作为制作网页的重要组成部分，已经成为网页设计中必不可少的要素。本文将对使用DIV+CSS技术制作网页方法和利弊进行阐述。

2.DIV+CSS布局方法

2.1 DIV+CSS 盒模型

盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。网页就是由许多个盒子通过不同的排列方式（纵向排列、横向排列和嵌套排列）堆积而成。

2.2 DIV+CSS 定位

定位是网页布局的最重要的技术，CSS定位通过 position 属性的值实现，属性值有以下 4 种，分别为：static、relative、absolute、fixed[1]。static：静态定位，为默认值，为无特殊定位，对象遵循HTML 定位规则，此时盒子按照普通布局在页面上显示。relative：相对定位，使用该属性值时盒子仍然是普通布局，占据它所在的位置，在计算定位的时候，才通过 left，right，top，bottom 等属性，让这个盒子相对于它的原始起点进行移动后显示。absolute：绝对定位，绝对定位的盒子的位置相对于最接近的一个具有定位屬性的父块进行的，如果没有已定位的父块，则相对于 body对象，即浏览器窗口。

2.3 盒子浮动

用盒子浮动技术，能使盒子脱离文档流向左或向右移动，排列方式多样，布局灵活方便。浮动的元素会生成一个块级框，它可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。盒子浮动通过设置 float 属性值实现，属性值有以下 3 种：none、left、right.其中 none 表示不浮动；left 表示浮在左边；right 表示浮在右边。有时，浮动使用不当会导致页面出现错位的情况，这时可以使用清除浮动的方法。清除浮动通过设置 clear 属性值实现。

3.DIV+CSS的优缺点

3.1DIV+CSS有以下优点[2]。

3.1.1网页载入比较快，由于DIV+CSS中的CSS富含丰富的样式，失望也定位和表现更加灵活。

3.1.2页面内容与样式分离可以是网页代码减少，使页面的样式的调整变得更加方便。

3.1.3表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

3.2DIV+CSS缺点：

3.2.1DIV+CSS到现在还没有实现所有浏览器的统一兼容，使得设计变得更复杂。

3.2.2DIV+CSS比TABLE定位复杂得多，多层嵌套的DIV会严重影响网页代码的可阅读性，对于网页设计高手也很容易出现问题，更不要说初学者了。

4 .实例

制作如图所示的两列排版方式的网页效果：

操作步骤如下：

①首先，根据网页内容制作各个div块，其中id为container的是最外层的div块，里面包括top（标题广告区）、leftnav（左菜单导向区）、content（主要内容区）以及footer（页脚区）4个区域

②然后，在各个区域中加入一些内容：

③最后定义各个区域的样式表：外围框元素container的宽度是整个屏幕宽的90%，设置左右边距是auto使它居中对齐，并且加上背景色和边框线，定义网页内容的字体颜色和行高：

#container {

width： 90%； /* 宽度是屏幕宽的90% */

margin： 0 auto； /* 居中对齐 */

background-color： #fff；

border： 1px solid gray；

color： #333；

line-height：130%；

}

设置标题广告区top的背景颜色、间距及底线，并清除h1元素的默认间距和边距值。设置左菜单导向区的宽度、间距和边距，并且进行左排列，然后重新设置其中p元素的间距和边距值：

#leftnav {

width： 160px；

margin： 0；

padding： 1em；

float： left；

}

设置主要内容区，为了空出左菜单导向区，设置左边距为200px，并且加一条左边框线，然后设置其允许的最大宽度、间距及其中h2元素的间距和边距值。设置页脚区，首先必须清除上述设置的左排列clear：both，然后设置其间距、边距、背景色及上框线等，完成操作。限于篇幅这里不列出源代码。

参考文献

[1] 雷烨.运用DIV+CSS技术对网页进行布局[J].电脑知识与技术，2016，7.

[2] 吴以欣，陈小宁.动态网页设计与制作[M].人民邮电出版社，2013，2.