新手专题教程第一期（3）
[align=center][size=4][color=blue][b]构建DIV+CSS页面（2）[/b][/color][/size][/align][size=4][color=seagreen][/color][/size]
本套教程已经修订，请大家阅读修订版本，谢谢
[url=http://bbs.bianews.com/thread-39854-1-7.html][color=#000000]新手专题教程第一期修订版（1）[/color][/url]
[url=http://bbs.bianews.com/thread-39862-1-7.html][color=#000000]新手专题教程第一期修订版（2）[/color][/url]
[url=http://bbs.bianews.com/thread-39863-1-7.html][color=#000000]新手专题教程第一期修订版（3）[/color][/url]
[url=http://bbs.bianews.com/thread-39875-1-7.html][color=#000000]新手专题教程第一期修订版（4）[/color][/url]
[url=http://bbs.bianews.com/thread-39877-1-7.html][color=#000000]新手专题教程第一期修订版（5）[/color][/url][size=4][color=seagreen][/color][/size]
[size=4][color=seagreen][/color][/size]
[size=4][color=seagreen][b]第二行#menu[/b][/color][/size]只有一列，套用“单行单列”的布局
即规定#menu宽度、高度，还有居中对齐
[b]css部分代码[/b]如下（[i]黑色加粗部分是背景色，方便大家看效果。记得去除，以下不再罗唆[/i]）：
[quote]
#menu { margin-left:auto; margin-right:auto;width:780px;height:25px;[b]background-color:#CCCCCC;[/b]}
[/quote]
[size=4][color=seagreen][b]第三行#base[/b][/color][/size]比较棘手，是一行三列的布局，套用“单行三列”－“float定位一”的布局
首先要在[b]xhtml部分[/b]做以下修改
（不记得怎么改的复习这里：[url=http://bbs.bianews.com/thread-31591-1-1.html]http://bbs.bianews.com/thread-31591-1-1.html[/url]）：
[quote]
<div id="base"><!--基础知识行（第三行容器）开始-->
[color=red][b]<div id="left1">
[/b][/color] <div id="html"><!--html（第三行左列）开始-->
</div><!--html（第三行左列）结束-->
<div id="css"><!--css（第三行中列）开始-->
</div><!--css（第三行中列）结束-->
[color=red][b]<div class="clear"></div>
</div>[/b][/color]
<div id="dw"><!--dw（第三行右列）开始-->
</div><!--dw（第三行右列）结束-->
[color=red][b]<div class="clear"></div>[/b][/color]
</div><!--基础知识行（第三行容器）结束-->
[/quote]
[b]css部分：[/b]
[quote]
#base{ width:780px; height:auto;}
#left1{ float:left; width:520px;}
#html{ float:left; width:260px; height:200px; [b]background-color:#0000CC;[/b]}
#css{ float:right; width:260px; height:200px;[b]background-color:#00FFFF;[/b]}
#dw{ float:right; width:260px; height:200px;[b]background-color:#FFFF00;[/b]}
[/quote]
第三行的布局到此结束。大家可以按下F12看看效果了。
接下来的布局工作很轻松，因为布局方式都是重复的。
[list=1][*]第四行#advanced是单行三列，跟第三行#base相同（除了div名、宽度、高度要做修改，下同）；[*]第五行#other是单行两列，跟第一行#header相同；[*]第六行#footer单行单列，跟第二行#menu相同。[/list]于是分别写出第四、五、六三行的xhtml和css
[size=4][color=seagreen][b]第四行#advanced[/b][/color][/size]
[b]xhtml：[/b]
[quote]
<div id="advanced"><!--进阶知识行（第四行容器）开始-->
[b][color=red]<div id="left2">[/color]
[/b] <div id="color"><!--色彩（第四行左列）开始-->
</div><!--色彩（第四行左列）结束-->
<div id="pic"><!--图文排版（第四行中列）开始-->
</div><!--图文排版（第四行中列）结束-->
[b][color=red]<div class="clear"></div>
</div>[/color][/b]
<div id="lay"><!--页面布局（第四行右列）开始-->
</div><!--页面布局（第四行右列）结束-->
[color=red][b]<div class="clear"></div>[/b][/color]
</div><!--进阶知识行（第四行容器）结束-->
[/quote]
[b]css：[/b]
[quote]
#advanced{ width:780px; height:auto;}
#left2{ float:left; width:520px;}
#color{ float:left; width:260px;height:200px; [b]background-color:#FFFF00;[/b]}
#pic{ float:right; width:260px;height:200px; [b]background-color:#0000CC;[/b]}
#lay{ float:right; width:260px; height:200px;[b]background-color:#00FFFF;[/b]}
[/quote]
[size=4][color=seagreen][b]第五行#other[/b][/color][/size]
[b]xhtml:[/b]
[quote]
<div id="other"><!--其他内容（第五行容器）开始-->
<div id="down"><!--资源下载（第五行左列）开始-->
</div><!--资源下载（第五行左列）结束-->
<div id="example"><!--实例（第五行右列）开始-->
</div><!--实例（第五行右列）结束-->
[color=red][b]<div class="clear"></div>
[/b][/color] </div><!--其他内容（第五行容器）结束-->
[/quote]
[b]css:[/b]
[quote]
#other { width: 780px;margin-right: auto; margin-left: auto;overflow: auto;}
#down {float: left;width: 390px; height:200px;[b]background-color:#00FFFF;[/b]}
#example {float: right;width: 390px; height:200px;[b]background-color:#FFFF00;[/b]}
[/quote]
[size=4][color=seagreen][b]第六行#footer[/b][/color][/size]
[b]css：[/b]
[quote]
#footer { margin-left:auto;margin-right:auto;width:780px;height:50px;[b]background-color:#0000CC;[/b]}
[/quote]
[[i] 本帖最后由 乌龙 于 2008-8-17 08:07 编辑 [/i]]