14.3　DIV+CSS布局实例

接下来讲解真正的设计布局。和一般的方法一样，首先要在脑海中有大致的轮廓构想，可能看到有关Web标准的站点大都很朴素，因为Web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就靠发挥想象力了。

注意　在实际应用过程中，DIV在有些地方的确不如表格方便，例如背景色的定义。但任何事情都有得有失，取舍于个人的价值判断。

14.3.1　确定布局

W3C的最初设计草图采用的表格一般是上中下三行布局，用DIV+CSS使用三列来布局，先定义好层和样式名称，部分代码如下。

01 ＜！-设置层布局—＞

02 ＜！-层布局中的头部—＞

03 ＜div id="header"＞＜/div＞

04 ＜！-设置容器层—＞

05 ＜div id="mainbox"＞

06 ＜！-设置子层—＞

07 ＜div id="menu"＞＜/div＞

08 ＜div id="sidebar"＞＜/div＞

09 ＜div id="content"＞＜/div＞

10 ＜div id="left"＞页面左列＜/div＞

11 ＜div id="middle"＞页面中列＜/div＞

12 ＜div id="right"＞页面右列＜/div＞

13 ＜/div＞

14 ＜！-设置底部—＞

15 ＜div id="footer"＞＜/div＞

【代码解析】代码第5～13行只是从＜body＞＜/body＞中定义了其层和样式类型的名称，通过DIV层的设置，把页面分成头部（header）、体部（mainbox）和底部（footer）。