web实验.docVIP

长 春 大 学 20 15 — 2016学年第 二 学期 Web前端开发技术 课程 实 验 报 告 学 院： 计算机科学技术 专 业： 软件工程 班 级： 软件14401 学 号： 041440125 姓 名： 王连发 任课教师： 刘 艳 实验六 浮动与定位 一、实验目的 1.理解元素的浮动，能够使用浮动对网页进行布局。 2.熟悉清除浮动 3.掌握常见的几种定位模式，能够对元素进行精确定位。 二、内容及要求 运用浮动与定位组织页面，通过案例的形式分步骤制作传智播客设计学院首页banner，其效果如图6-1所示，满足以下要求： 1.整个banner分为左右两部分，其中左边为广告图、右边为课程介绍。 2.广告图部分由一张背景图片、广告词、切换图标构成。 3.课程介绍部分由标题、常用软件图标及课程介绍概述构成。 图6-1 传智播客设计学院首页banner效果图 三、实验原理 浮动：所谓元素的浮动是指设置了浮动属性的元素会脱离文档流控制，移动到父元素位置的过程。{float:属性值;}，在此的语法中，常用的float属性值有三个：left、right、none。分别用于设置元素向左浮动、元素向右