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

信息工程学院

实验报告用纸

实验名称:姓名:实验场地:同组者：

第页

实验名称：元素浮动及定位实验

1、实验目的

1）掌握标签浮动技术。

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

2、实验要求

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

图2-1团购页面

3、实验环境

硬件：PC机

软件：XP、WIN11系统，Web浏览器，HBuilder

4、实验操作步骤

1．搭建基本结构，代码如4-1图所示。

图4-1团购页面

保存并运行实践案例，效果如4-2图所示。

图4-2团购基本结构页面

2．定义CSS样式

（1）引入CSS样式

linkrel=stylesheettype=text/csshref=style.css

（2）为页面中需要单独控制的标记添加相应的类名，代码如4-3图所示。

图4-3标记添加相应的类名

（3）定义基础样式,整体控制团购页面,控制上边盒子,控制下边盒子，代码如4-4图所示。

图4-4css样式代码

保存并运行实践案例，效果如4-5图所示。

图4-5团购页面实现效果图

5、实验数据处理及实验结论

该练习主要考察对元素的浮动及定位模式的掌握程度。宣传页面整体可以分为上下两部分，上