文档介绍：: .
实验九Div+CSS网页布局
、站点规划
DIV+CSS
在网页制作中，有许多的术语，例如： HTML CSS DIV等等。下面我们就开始一步一步使用
进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画岀来。
■ Th
bs：i*
fl***
-:
丄峙•理町
-：• n " im^ f
氧二世阵i
［磁*＜辽—|
-> *7 ■ < =i Uitri
i*rt> A i H
址勺削Wi HflWIlitl*
.r • ^llli ；A*-A llkipjn Fl!
«* fi . / > + ■* 叮* 八 r
-.Fh 的
屯。叫Rii・匚
!>riK H i 齐®
CSi". * * v
礼齡IN応 HX1EW丹
# ■„ 4> '珂E JH*## FT!
:・ Qi； •卜 '.^T 'j? i'w t：・
■SICK:1 2 3 4 Jl |T 耐-也 - i
■曲匚"押顶:宀1
密 }r F H A rifE
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分
为以下几个部分：
Header 层
SideBar 层
Main Body 层
PageBody 层
Footer 层
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了
body{}
^container {} tfHeader (}
ffPageBody {}
舲 {}
#MainBcdy 0
^Footer 0
DIV结构如下：
I body {} /*这是一个HTML元素，具体我就不说明了 */
^Container {} /* 页面层容器 */
P#Header {} /* 页面头部 */
-#PageBody {} /* 页面主体 */
I P#Sidebar {} /* 侧边栏 */
I L#MainBody {} /* 主体内容 */
L#Footer {} /* 页面底部 */
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写 HTML弋码和CSS
接下来我们在桌面新建一个文件夹，命名为“ DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN"
"-">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 无标题文档</title>
<lin