- Div+CSS3.0网页布局案例精粹（升级版）
- 张晓景
- 1913字
- 2020-08-27 19:30:38
3.6 应用案例——使用Div+CSS布局页面
在使用CSS排版的页面中，利用Div进行标记，再用CSS对其样式进行控制，可以很方便地实现各种效果，而且还实现了网站结构、表现、行为的分离，页面的最终效果如图3-25所示。
图3-25 页面的最终效果
源文件位置：源文件\第3章\3-6.html
视频位置：视频\第3章\3-6.mp4
3.6.1 设计分析
本案例设计制作了一个企业网站的首页页面，简洁的布局结构及统一的排版方式使整个页面给人一种清晰的感觉。整个页面以蓝色为主色调，再加上图片和文字的巧妙搭配，使页面更具商业气息。
3.6.2 制作步骤
（1）打开文件3601.html，看到代码视图如图3-26所示。将页面切换到css.css文件，可以看到标签名为*和body的CSS规则，其代码如图3-27所示。
图3-26 代码视图
图3-27 CSS规则代码
（2）在代码页面中，将光标置于body标签中，然后单击“插入”面板上的“Div”按钮，弹出“插入Div”对话框，在ID下拉列表框中输入box，如图3-28所示，单击“确定”按钮，在页面中插入名为box的Div，如图3-29所示。
图3-28 “插入Div”对话框
图3-29 插入名为box的Div
（3）将页面切换到div.css文件，创建一个名为#box的CSS规则，其代码如图3-30所示，页面效果如图3-31所示。
图3-30 CSS规则代码
图3-31 页面效果
（4）将光标移至名为box的Div中，将多余的文本内容删除，在该Div中插入名为top的Div。将页面切换到div.css文件，创建一个名称为#top的CSS规则，其代码如图3-32所示，页面效果如图3-33所示。
图3-32 CSS规则代码
图3-33 页面效果
提示
在实时视图中，如果需要删除Div中的文字，需要双击文字进入文本框，用户可以在文本框内自由使用“Delete”键或“Backspace”键执行删除功能。
（5）将光标移至名为top的Div中，将多余的文本内容删除，在该Div中插入名为top-1的Div。将页面切换到div.css文件，创建一个名称为#top-1的CSS规则，其代码如图3-34所示。
图3-34 CSS规则代码
（6）返回实时视图页面，在名为top-1的Div中插入图像“源文件\第3章\images\3403.png”，页面效果如图3-35所示。
图3-35 页面效果
（7）根据名为top-1的Div的制作方法可以制作出名为top-2的Div，其代码如图3-36所示，页面效果如图3-37所示。
图3-36 CSS规则代码
图3-37 页面效果
（8）单击“插入”面板上的“Div”按钮，在名为top的Div后插入名为top2的Div。将页面切换到div.css文件，创建一个名称为#top2的CSS规则，其代码如图3-38所示。在名为top2的Div中输入文字，如图3-39所示。
图3-38 CSS规则代码
图3-39 输入文字
（9）在代码页面中，选中刚刚输入的文字，为其添加ul和li的列表标签，其代码如图3-40所示。
图3-40 列表标签代码
（10）将页面切换到div.css文件，创建一个名称为#top2 li的CSS规则，其代码如图3-41所示。返回设计页面，页面效果如图3-42所示。
图3-41 CSS规则代码
图3-42 页面效果
（11）用相同方法插入名为main的Div，在该Div中插入图像“源文件\第3章\images\3405.png”，其代码如图3-43所示，页面效果如图3-44所示。
图3-43 CSS规则代码
图3-44 页面效果
（12）将光标移至刚插入的图像后，单击“插入”面板上的“Div”按钮，插入名为main-1的Div。将页面切换到div.css文件，创建一个名称为#main-1的CSS规则，其代码如图3-45所示。返回实时视图页面，页面效果如图3-46所示。
图3-45 CSS规则代码
图3-46 页面效果
（13）将光标移至名为main-1的Div中，将多余的文本内容删除，单击“鼠标经过图像”按钮，弹出“插入鼠标经过图像”对话框，其设置如图3-47所示，单击“确定”按钮，在页面中插入鼠标经过图像，页面效果如图3-48所示。
图3-47 “插入鼠标经过图像”对话框
图3-48 页面效果
（14）继续在该Div中插入其余4张图片，页面效果如图3-49所示。
图3-49 页面效果
（15）单击“插入”面板上的“Div”按钮，在名为main的Div后插入名为main2的Div。将页面切换到div.css文件，创建一个名称为#main2的CSS规则，其代码如图3-50所示。返回实时视图页面，页面效果如图3-51所示。
图3-50 CSS规则代码
图3-51 页面效果
（16）将光标移至名为main2的Div中，将多余的文本内容删除，在该Div中插入名为main2-1的Div。将页面切换到div.css文件，创建一个名称为#main2-1的CSS规则，其代码如图3-52所示。返回实时视图页面，页面效果如图3-53所示。
图3-52 CSS规则代码
图3-53 页面效果
（17）将光标移至名为main2-1的Div中，将多余的文本内容删除，并输入文本内容。将页面切换到css.css文件，创建一个名称为.font01的CSS规则，其代码如图3-54所示。
图3-54 CSS规则代码
（18）选中刚刚输入的文字，应用刚刚新建的样式，页面效果如图3-55所示。
图3-55 页面效果
（19）用相同的方法制作出该Div中的内容，其代码如图3-56所示，页面效果如图3-57所示。
图3-56 CSS规则代码
图3-57 页面效果
（20）用相同方法制作出页面中的其他内容，具体的代码如图3-58所示，页面效果如图3-59所示。
图3-58 CSS规则代码
图3-59 页面效果
（21）完成页面的制作，执行“文件”→“保存”命令，保存页面。单击页面右下角的“预览”按钮，页面效果如图3-60所示。
图3-60 页面效果
3.6.3 案例总结
本节通过案例的制作，向读者简单地介绍了一些Div+CSS布局相关的基本知识，如CSS布局页面、定义Div及常见布局方式等，完成本案例的制作后，读者应该了解、掌握关于Div+CSS布局的知识和方法，并且能将其应用到实际中。