用div标签确定网页布局的方法
1、代码是：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<div id="container" style="width:365px">
<div id="header" style="background-color:green;">
<h1 style="margin-bottom:0;">
<big><big><big>标题</big></big></big></h1></div>
<div id="menu" style="background-color:#FFD700;
height:100px;width:80px;float:left;">
<b>菜单</b><br>HTML<br>CSS<br>JavaScript</div>
<div id="content" style="background-color:#EEEEEE;
height:100px;width:200px;float:left;">内容</div>
<div id="footer"style="background-color:#FFA500;
clear:both;text-align:center;">哈哈哈</div>
</div>
</body>
</html>
布局效果见下图。
2、下面，我们逐层来认识这个代码。
把这个代码复制到notepad里面，可以看到，第一个<div>标签和最后一个</div>标签是一对。
也就是说，别的<div>标签都是嵌套在这个里面。
注意：
当鼠标放在某个标签上，与之配对的标签会高亮显示；
<div>标签，表示一个区块。
3、把内层所有的区块删掉，只保留最外层区块（粗体部分）：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<div id="container" style="width:365px"></div>
</body>
</html>
id="container"表示这个区块是一个容器；
style="width:365px"表示容器的宽度是365个像素，高度不限。
由于没有内容，所以在网页里面看不到任何内容。
4、在容器里面加入标题：
<div id="header" style="background-color:green;">
<h1><big><big><big>标题</big></big></big></h1></div>
其中：
id="header"表示这是一个标题；
style="background-color:green;"表示这个区块的背景色是绿色；
这个区块的宽度与容器宽度一样，这是一种自适应的宽度；
这个区块的高度，取决于字体。
5、再加入一个菜单区块：
<div id="menu" style="background-color:pink;
height:100px;width:80px;float:left;">
<b>菜单</b><br>A<br>B<br>C</div>
其中：
id="menu"表示这是一个菜单；
style="background-color:pink;"表示背景色是粉色；
height:100px;width:80px;表示区块高100像素，宽80像素；
float:left;表示这个区块位于容器左侧。
6、如果菜单的内容超过了区块的范围，区块不会随之变大：
<div id="menu" style="background-color:pink;
height:50px;width:50px;float:left;">
<b>菜单</b><br>A<br>B<br>CCCCCCCCC</div>
7、正文区块，用来输入文字内容：
<div id="content" style="background-color:orange;
height:80px;width:200px;float:left;">
<b>内容</b></div>
注意：
这个区块没有指定位置，所以，它会紧贴上一个模块，且顶端持平。
8、但是，如果两个并排的区块的宽度之和大于容器的宽度，后面的区块就会被迫换行。
9、当某个区块的宽度大于容器的宽度，容器只能纵容它。
10、容器用footer来封底：
<div id="footer"style="background-color:yellow;
clear:both;text-align:center;">底层</div>
注意：封底的区块，高度和宽度，都是自适应的。
