Web前端开发（HTML5+CSS3+JavaScript） -实验3 位置属性应用.docx

PAGE2/NUMPAGES6

XXX学院

实验报告

成绩

专业班级

实验日期

姓名

学号

实验名称

位置属性应用

指导教师

（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）

实验要求

按给出的素材，使用位置、定位属性以及背景样式实现如图1.1所示的搜索栏效果，元素的具体尺寸自定义。

图1.1搜索栏

可以参考图1.2所示的结构来实现。

图1.2搜索栏结构图

二、实验目的

1.掌握相对位置和绝对位置的具体应用。

2.理解盒子模型。

3.熟悉背景样式的使用。

三、实验设备

Windows7/10、32/64操作系统;安装VSCode开发环境;安装FireFox/Chrome浏览器的计算机。

四、实验步骤

1.打开VScode，新建html文件；

2.编写代码；

3.在浏览器运行、调试。

五、程序框架

无

六、代码(粘帖至此行)

七、运行结果(截图)

八、实验小结(收获或存在问题、改进措施、教学建议等)