第二行#menu只有一列，套用“单行单列”的布局
# q) O% f X4 J, S9 z/ ?$ u
即规定#menu宽度、高度，还有居中对齐
4 q3 o! y( K/ h( j% Qcss部分代码如下（
黑色加粗部分是背景色，方便大家看效果。记得去除，以下不再罗唆）：
! E9 R m" V' c8 l! Q
复制内容到剪贴板
代码:
#menu { margin-left:auto; margin-right:auto;width:780px;height:25px;background-color:#CCCCCC;}第三行#base比较棘手，是一行三列的布局，套用“单行三列”－“float定位一”的布局# `: P h' K: f; }4 e. u7 ?
首先要在xhtml部分做以下修改复制内容到剪贴板
代码:
<div id="base"><!--基础知识行（第三行容器）开始-->
<div id="left1">
<div id="html"><!--html（第三行左列）开始-->
</div><!--html（第三行左列）结束-->
<div id="css"><!--css（第三行中列）开始-->
</div><!--css（第三行中列）结束-->
<div class="clear"></div>
</div>
<div id="dw"><!--dw（第三行右列）开始-->
</div><!--dw（第三行右列）结束-->
<div class="clear"></div>
</div><!--基础知识行（第三行容器）结束-->css部分：" R4 L6 R4 i5 [' L% O
复制内容到剪贴板
代码:
#base{ width:780px; height:auto;}
#left1{ float:left; width:520px;}
#html{ float:left; width:260px; height:200px; background-color:#0000CC;}
#css{ float:right; width:260px; height:200px;background-color:#00FFFF;}
#dw{ float:right; width:260px; height:200px;background-color:#FFFF00;} 第三行的布局到此结束。大家可以按下F12看看效果了。
4 c* f3 g0 x' ]接下来的布局工作很轻松，因为布局方式都是重复的。
. D- o8 @4 v) p. P/ n' H; t8 {" S" @( o u. m+ Y/ Z
- 第四行#advanced是单行三列，跟第三行#base相同（除了div名、宽度、高度要做修改，下同）；
- 第五行#other是单行两列，跟第一行#header相同；
- 第六行#footer单行单列，跟第二行#menu相同。
于是分别写出第四、五、六三行的xhtml和css
8 j/ W# Z4 a* F2 y/ r. Q, p) S
* C$ e- w* k% ] C% X+ |% `第四行#advanced
1 B2 Q7 X( g4 F/ \2 T" Sxhtml：复制内容到剪贴板
代码:
<div id="advanced"><!--进阶知识行（第四行容器）开始-->
<div id="left2">
<div id="color"><!--色彩（第四行左列）开始-->
</div><!--色彩（第四行左列）结束-->
<div id="pic"><!--图文排版（第四行中列）开始-->
</div><!--图文排版（第四行中列）结束-->
<div class="clear"></div>
</div>
<div id="lay"><!--页面布局（第四行右列）开始-->
</div><!--页面布局（第四行右列）结束-->
<div class="clear"></div>
</div><!--进阶知识行（第四行容器）结束-->css：
; N& Z+ F: I* q6 c0 f* X9 n0 I复制内容到剪贴板
代码:
#advanced{ width:780px; height:auto;}
#left2{ float:left; width:520px;}
#color{ float:left; width:260px;height:200px; background-color:#FFFF00;}
#pic{ float:right; width:260px;height:200px; background-color:#0000CC;}
#lay{ float:right; width:260px; height:200px;background-color:#00FFFF;} 第五行#other0 |. l3 y4 R, Y' t- |, T
xhtml:
" z$ o) K( Y# n7 S* T复制内容到剪贴板
代码:
<div id="other"><!--其他内容（第五行容器）开始-->
<div id="down"><!--资源下载（第五行左列）开始-->
</div><!--资源下载（第五行左列）结束-->
<div id="example"><!--实例（第五行右列）开始-->
</div><!--实例（第五行右列）结束-->
<div class="clear"></div>
</div><!--其他内容（第五行容器）结束-->css:6 j- }3 C! y" [5 s6 Q! Z; s
复制内容到剪贴板
代码:
#other { width: 780px;margin-right: auto; margin-left: auto;overflow: auto;}
#down {float: left;width: 390px; height:200px;background-color:#00FFFF;}
#example {float: right;width: 390px; height:200px;background-color:#FFFF00;} 第六行#footer
7 s- f' W/ A+ N& V$ Y' t" tcss：
- E( `! [# }7 q; M9 M% ?复制内容到剪贴板
代码:
#footer { margin-left:auto;margin-right:auto;width:780px;height:50px;background-color:#0000CC;}
