Web前端开发（HTML5+CSS3+JavaScript） 实验5-弹性布局.docx

PAGE2/NUMPAGES6

XXX学院

实验报告

成绩

专业班级

实验日期

姓名

学号

实验名称

弹性布局

指导教师

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

实验要求

按给出的素材，使用弹性布局实现如下图的商品列表展示效果。

参见上图，具体要求如下：

设置合适弹性容器的宽度，使每一行包含4个商品项。

商品信息（除放入购物车按钮外）使用图片和两个段落元素，按钮呈现平面按钮样式（无边框）

每个商品项有一定的外边距和内边距；有合适的阴影和圆角，鼠标悬停时放大1.02倍。

整个商品列表在容器中居中对齐。

需要提交html文件

二、实验目的

1.熟悉弹性布局中容器和项目的相关属性。

2.能结合其他样式，将弹性布局应用于实际开发中。

三、实验设备

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

四、实验步骤

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

2.编写代码；

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

五、程序框架

无

六、代码(粘帖至此行)

七、运行结果(截图)

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