实训5DIV+CSS.PDFVIP

实训 5 DIV+CSS 布局规划 【实训目标】 （1）熟悉常见网页布局结构类型。 （2）能够对主流商业网站布局结构进行分析。 （3）综合运用 DIV+CSS 对小型网站页面进行布局规划、编写代码实现布局效果。 【实训内容】 （1）使用 CSS 对 DIV 进行样式定义，实现图层定位与布局。 （2）利用 DIV 的 float 属性来实现图层中多个子图层的水平排列。 （3）使用 DIV+CSS 完成常见的页面布局代码设计。 （4）综合运用 DIV+CSS 技术模拟真实网站进行网页仿真设计。 【实训项目】 （1）DIV+CSS 页面布局设计。 （2）设计《2015 年 CERNET 华东北地区年会网站》。 项目 1 DIV+CSS页面布局设计 1．实训要求 （1）固定页面布局设计，用 DIV、CSS 实现??图 1-5-1 所示的布局效果。 （2）用 DIV+CSS 完成图 1-5-2 所示的页面布局效果。 图 1-5-1 DIV+CSS 固定型页面布局之一 图 1-5-2 DIV+CSS 固定型页面布局之二 （3）弹性页面布局设计。所谓“弹性”是指宽度与高度的单位为百分比，而不是具体 的数值。运用 DIV+CSS 完成图 1-5-3 所示的页面布局设计。 Web 前端开发技术实验与实践—— HTML、CSS、JavaScript（第 2 版） 58 图 1-5-3 DIV+CSS 弹性页面布局 2．实训内容 （1）DIV 创建与 DIV 嵌套。 （2）DIV 属性的设置与应用。 （3）DIV 样式引用方法。 （4）外部样式表的定义与引用。 3．实训所需知识点 （1）图层 div 标记 div style=position: absolute;left:10px;top:10px;width:100px;height:100px; background: red; /div （2）链接 link 标记 link type=text/css rel=stylesheet href=外部样式表文件名称 / （3）样式 style 标记 style type= @import url(外部样式表文件名称); /style 4．页面结构分析 网站首页设计一般采用 DIV+CSS 结构进行布局。通常页面 DIV 结构如图 1-5-4 所示。 图 1-5-4 一般网页布局 DIV 结构图