DIV+CSS之布局一行三列页面实证分析

闻立鸥

摘要：当前DIV+CSS技术已经成为制作网页的主流技术，内容与表现的分离不仅大大提高了页面的浏览速度，而且提高了网站的维护效率。本文通过案例的拆分，将DIV+CSS制作网页的流程与大家分享。

关键词：DIV；CSS；三列页面

中图分类号：TP393 文献标志码：A 文章编号：1674-9324（2014）33-0132-02

一、为什么要使用DIV+CSS技术

在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容，然后采用传统的表格（Table）布局方式，为了实现网页所需的外观效果，层层嵌套表格，不仅制作网页费时费力，修改更新页面工作量巨大，同时产生大量的代码冗余，网页加载速度缓慢。而一个由div+css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备（包括手机、PDA和计算机）上以任何外观表现出来，而且用div+css布局构建的网页来简化代码，加快显示速度。因此要转变观念，采用层（DIV）布局，并且使用层叠样式表（CSS）来实现页面的外观，给网站浏览者更好的体验。

二、DIV+CSS技术简介

DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。使用DIV+CSS布局，div標签就是布局中所用到的容器。页面上的每个容器都占有一定的位置，有一定的大小。每个容器都会影响其他容器的排布，它们相互作用，而形成一个页面的布局。

三、DIV+CSS技术制作个人一行三列页面的流程解析

本案例页面布局采用的是一种典型的一行三列的形式，很常见且很实用。使用DIV+CSS技术方法进行制作，可先将页面分为左、中、右三个部分，分别用三个盒子放置相应的栏目，三个盒子分别命名为leftbox、midbox、rightbox。其中在midbox有三块垂直排列的文章列表，分别用articleone、articletwo、articlethree放置；rightbox中放置页面的导航，用名称为nav的盒子放置。盒模型的结构图如下：

1.网页双背景效果的代码实现。

2.利用DIV构建整体网页的结构。