总要求
参照下面的效果视频,根据提供的文字信息和图片完成本项目。
考核要求
整个项目以学号+姓名的方式打包压缩提交到课堂派,压缩包格式不限,如:202013000000张树彬.rar,其它认定为无效作业,成绩记0分。
效果说明
静态效果:水平居中展示所有图片;
动态效果:鼠标hover到某个图片后,图片从矩形放大为圆角矩形,并带有阴影,说明文字出现并移出到底端;鼠标移开后,恢复原样。详情请参考 河南加油
文字素材
一方有难、八方支援
仅以此文,向为2021年7月遭受特大洪水侵袭的河南人民提供帮助和关注的各级同胞表示感谢!
郑州加油
河南加油
郑州挺住
河南挺住
图片素材
右键另存为,保存到本地使用
评分标准
-
文件命名规范5分
-
H5结构合理5分
-
采用外部CSS样式5分
-
有初始化CSS样式或者单独的CSS文件5分
-
弹性盒子布局10分
-
图片显示无变形10分
-
元素水平居中10分
-
过渡动画10分
-
字体图标10分
-
阴影效果10分
-
圆角矩形10分
-
整体效果10分