Div+CSS布局示例

主要内容：

本周需要完成的任务：根据前几周的设计，

 各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材；  使用Div+CSS实现网页框架。 参考图：

操作部分：Div标签及盒子模型

提示：请务必做好准备工作。

 在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创

建一个“myweb“文件夹。

 将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”

文件夹内，以备制作网页时使用。

 将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是

一个网页HTML代码的标准模版。

 将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。

1. 在上一节制作的网页的基础上，继续修改，使三个盒子都能居中显示。

需要修改CSS文件： body{ background:url(../images/back1.jpg); margin:0; } #red,#blue,#green{ margin:0 auto; } „„

保存后测试。

2. 会发现得到如下结果：

原因：#red和#blue都被添加了float:left;属性,而#green没有float属性。 结论：margin:0 auto;这种居中对齐方法，对于有浮动属性的div不起作用。

解决办法：将显示在同一行的、需要浮动的盒子，用一个大盒子套起来，这个大盒子不必浮动，也就能使margin:0 auto;这种居中对齐方法有效。

首先修改HTML文件： „„

然后修改CSS文件： „„ #main,#green{ margin:0 auto; } #main{ width:508px; height:200px; } „„ 注意：HTML文件和CSS文件都保存，测试。

知识链接：

使用CSS实现居中的方法：  Margin:0 auto;

注：此方法不适用与具有浮动（float）属性的Div。

Div+CSS应用示例

以如下网页为例，分步讲解：

1. 首先，确定网页布局，先横向划分大盒子，划分结果如下：

2. 将模版网页test.html复制一份，将复件重命名为“index.html”，使用记事本的方式打开，并编辑代码：

„„

3. 5个盒子中间都没有内容，又没有样式，页面中看不到效果，所以先为盒子添加样式，查看网页布局：

 在站点内新建“CSS”文件夹；

 在“CSS”文件夹内新建记事本，重命名为“common.css”。 4. 在HTML文件中添加：

„„

5. 以记事本方式打开“common.css”，编辑代码： body,div,p,h1,img{ padding:0; margin:0; } 保存。

通常在CSS文件开头，都写这样几行代码，作用是将浏览器对不同块元素默认设置的边距，包括内边距和外边距，都清零，尽量避免出现浏览器不兼容的现象。

6. 继续修改CSS文件，设置盒子的样式，看到当前网页的布局：

body,div,p,h1,img{ padding:0; margin:0; } #logo,#nav,#banner,#content,#footer{ width:900px; height:200px; background:blue; border:1px red solid; }

一般想看到盒子的样式，只要设这三个属性：width、height和background。 为了能看出来是五个盒子，再加上边框属性：border。保存后测试。 7. 看到盒子样式后，再设置所有盒子居中显示： „„ #logo,#nav,#banner,#content,#footer{ width:900px; height:200px; background:blue; border:1px red solid; margin:0 auto; }

8. 下面对每个盒子做个性化设置： #logo：

„„ #logo{ height:80px; background:#fff; }

#nav： „„ #nav{ height:40px; background:#56990c; }

#banner： „„ #banner{ height:250px; background:#bbb; }

#content： „„ #content{ height:400px; background:#fff; }

#footer： „„ #footer{ height:50px; background:#68acd3; }

9. 对布局进行细化，比如盒子#content，需要分成左右两块，先修改HTML文件： „„

10. 设置#conL，#conR的样式： „„ #content #conL{ width:600px; height:400px; background:#f0f0f0; } #content #conR{ width:300px; height:400px; background:#d3e7f2; } „„

保存后测试。

11. 为了让#conL和#conR在同一行，需要为两个盒子都添加float属性： #content #conL,#content #conR{ float:left; padding:15px; }

同时为了内容显示好看，为两个盒子都加了内边距padding。 保存后，测试。

12. 会发现#conL，#conR的位置又错了，不在同一行了：

 原因是加了padding，两个盒子的总宽度超过了大盒子#content的宽度；  解决方法： „„ #content #conL{ width:570px; height:400px; background:#f0f0f0; } #content #conR{ width:270px; height:400px; background:#d3e7f2; } „„

13. 仔细观察还会发现，#footer的位置也会受前面盒子float浮动的影响： „„ #footer{ clear:both; height:50px; background:#68acd3; } „„

14. 网页布局基本完成，一般布局不用显示边框： „„ #logo,#nav,#banner,#content,#footer{ width:900px; height:200px; background:blue; border:1px red solid; margin:0 auto; } „„

思考操作：

将小组网站规划设计中，设计的网页框架，使用Div+CSS实现出来。 示例：