Div+CSS布局示例

实训六 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 个盒子中间都没有内容，又没有样式，页面...