实验二 元素浮动及定位实验.pdfVIP

Web前端开发实实

实验二元素浮动及定位实验

一、实验目的

1）掌握标签浮动技术。

2）掌握定位方式的使用。

二、实验设备

硬件：PC机

软件：XP、WIN7、8、8.1、10系统，Web浏览器，HBuilder

三、实验要求

请结合给出的素材，运用浮动和定位制作一个团购页面，效果如图6-32所

示。

图6-32团购页面效果展示

四、实验分析

该练习主要考察对元素的浮动及定位模式的掌握程度。图6-32所示的宣传

页面整体可以分为上下两部分，上部分主要包括：悬浮图标、团购名称、图片展

示、切换图标四部分。其中，悬浮图标和图片展示模块使用img标记，团购名

称使用h2标记，切换图标使用列表标记ul、li搭建结构。下部分主要包括

文字说明、价格优惠两部分。其中，文字说明以及价格优惠模块左右两部分均使

用p标记搭建结构。

五、实验步骤与相关代码

1．搭建基本结构

1