1、代码是：<!DOCTYPE html><html>挢旗扦渌;<head><meta ch锾攒揉敫arset="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、把内层所有的区块删掉，只保留最外层区块（粗体部分）：&盟敢势袂lt;!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:pin娱浣嫁装k;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>注意：封底的区块，高度和宽度，都是自适应的。
