下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分

　　为以下几个部分：

　　1、顶部部分，其中又包括了 LOGO、MENU 和一幅 Banner 图片;

　　2、内容部分又可分为侧边栏、主体内容;

　　3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

　　根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

　　第 38 页

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　DIV 结构如下：

　　│body {} /*这是一个 HTML 元素，具体我就不说明了*/

　　└#Container {} /*页面层容器*/

　　├#Header {} /*页面头部*/

　　├#PageBody {} /*页面主体*/

　　│ ├#Sidebar {} /*侧边栏*/

　　│ └#MainBody {} /*主体内容*/

　　└#Footer {} /*页面底部*/

　　至此，页面布局与规划已经完成，接下来我们要做的就是开始书写 HTML 代码和 CSS。接下来我们在桌面新建一个文件夹，命名为“DIV+CSS 布局练习”，在文件夹下新建两个空的记事本文

　　档，输入以下内容：

　　"//www .w 3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　第 39 页

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　这是 XHTML 的基本结构，将其命名为 index.htm，另一个记事本文档则命名为 css.css。

　　下面，我们在标签对中写入 DIV 的基本结构，代码如下：

　　第 40 页

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开 css.css 文件，写入 CSS 信息，代码

　　如下：

　　/*基本信息*/

　　body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

　　/*页面层容器*/

　　#container {w idth:100%}

　　/*页面头部*/

　　#Header {w idth:800px;margin:0 auto;height:100px;background:#FFCC99}

　　/*页面主体*/

　　#PageBody {w idth:800px;margin:0 auto;height:400px;background:#CCFF00}

　　/*页面底部*/

　　#Footer {w idth:800px;margin:0 auto;height:50px;background:#00FFFF}

　　把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。

　　关于以上 CSS 的说明(详细请参考 CSS2.0 中文手册，网上有下载)：

　　1、请养成良好的注释习惯，这是非常重要的;

　　2、body 是一个 HTML 元素，页面中所有的内容都应该写在这标签对之内，我就不多说了;

　　3、讲解一些常用的 CSS 代码的含义：

　　font:12px Tahoma;

　　这里使用了缩写，完整的代码应该是：font-size:12px;"TEXT-ALIGN: left; LINE-HEIGHT: 5pt; MARGIN: 0.8pt 0cm 0pt;" class=MsoNormal align=left>

　　第 41 页

　　《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

　　margin:0px;

　　也使用了缩写，完整的应该是：

　　margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

　　或

　　margin:0px 0px 0px 0px

　　顺序是 上 / 右 / 下 / 左，你也可以书写为 margin:0(缩写);

　　以上样式说明 body 部分对上右下左边距为 0 像素，如果使用 auto 则是自动调整边距，

　　另外还有以下几种写法：

　　margin:0px auto;

　　说明上下边距为 0px，左右为自动调整;

　　我们以后将使用到的 padding 属性和 margin 有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin 是外部距离，而 padding 则是内部距离。