乌龙

构建DIV+CSS页面（2）

本套教程已经修订，请大家阅读修订版本，谢谢

新手专题教程第一期修订版（1）

新手专题教程第一期修订版（2）

新手专题教程第一期修订版（3）

新手专题教程第一期修订版（4）

新手专题教程第一期修订版（5）

第二行#menu只有一列，套用“单行单列”的布局
即规定#menu宽度、高度，还有居中对齐
css部分代码如下（黑色加粗部分是背景色，方便大家看效果。记得去除，以下不再罗唆）：

引用:

#menu { margin-left:auto; margin-right:auto;width:780px;height:25px;background-color:#CCCCCC;}

第三行#base比较棘手，是一行三列的布局，套用“单行三列”－“float定位一”的布局
首先要在xhtml部分做以下修改
（不记得怎么改的复习这里：http://bbs.bianews.com/thread-31591-1-1.html）：

引用:

    <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部分：

引用:

#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看看效果了。
接下来的布局工作很轻松，因为布局方式都是重复的。

• 第四行#advanced是单行三列，跟第三行#base相同（除了div名、宽度、高度要做修改，下同）；
• 第五行#other是单行两列，跟第一行#header相同；
• 第六行#footer单行单列，跟第二行#menu相同。

于是分别写出第四、五、六三行的xhtml和css

第四行#advanced
xhtml：

引用:

    <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：

引用:

#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;}  

第五行#other
xhtml:

引用:

   <div id="other"><!--其他内容（第五行容器）开始-->
        <div id="down"><!--资源下载（第五行左列）开始-->
        </div><!--资源下载（第五行左列）结束-->
        <div id="example"><!--实例（第五行右列）开始-->
        </div><!--实例（第五行右列）结束-->
<div class="clear"></div>
    </div><!--其他内容（第五行容器）结束-->

css:

引用:

#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
css：

引用:

#footer { margin-left:auto;margin-right:auto;width:780px;height:50px;background-color:#0000CC;}

[ 本帖最后由 乌龙 于 2008-8-17 08:07 编辑 ]

乌龙

ok，按下F12，一个不同色块相间的拼图是不是已经出现在你眼前了呢？

接下来，我们补充完最后一段代码，布局部分的工作就基本完成了。

最后一段css代码是：

引用:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

还记得最外层的#container么？其实在这个固定宽度的页面里，他可有可无。以上代码的意思是：
最小宽度600px；最大宽度1200px（注意黑体加粗部分）
呵呵，这个就是自适应宽度的代码。当我们对最外层的div设置了最小最大宽度，里边其他行容器只需要把宽度设置为100％，就可以实现自动适应窗口大小了。这个我会在以后的教程里用到。

好了，第二节《构建DIV+CSS页面》就到这里。

附件： div+css v2.0.rar (1.91 KB)

div+css v2.0.rar (1.91 KB)
下载次数: 15

2008-6-14 19:28

教程导读

引用:

新手专题教程第一期（1）

新手专题教程第一期（2）

新手专题教程第一期（3）

新手专题教程第一期（4）

新手专题教程第一期（5）

新手专题教程第一期（答疑）

[ 本帖最后由 乌龙 于 2008-7-5 02:38 编辑 ]

reck

我非常努力的学习

izero

向你学习， A ZA！

huxianfangyuan

css div分

huxianfangyuan

下不了啊

huxianfangyuan

下不了啊

huxianfangyuan

下不了啊

huxianfangyuan

下不了啊

huxianfangyuan

威望好少啊