实训5DIVCSS布局规划.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