第三章内容学习完成后,完成下面作业。 要求: 1.每个作业的代码文档中都要有自己的学号和姓名信息,具体位置详见“案例实现”。 2.使用电脑完成作业的同学,将编写好的代码文件提交。 3.使用手机完成作业的同学,不需要提交代码文件,但需要提交截屏图,包括所有代码编辑状态的截屏图,代码运行后网页效果截屏图。 4.没有电脑且不方便使用手机完成作业的同学,需要在纸上写出代码,并拍照提交。 【作业3- 4 】 歌曲 PK 评分展示 一、案例描述 1、 考核知识点 details 和 summary 元素 meter 元素 2、 练习目标 Ø 掌握 details 和 summary 元素 的使用方法。 Ø 掌握 meter 元素 的应用。 3、 需求分析 随着网络技术的不断发展,一些爱唱歌人士可以将自己唱的某一首歌曲录制下来,上传到网上与他人 PK 。本案例通过引入 meter 元素来实现 PK 后的效果展示。 文字素材: 这些年一个人 过雨也走 有过泪有过错 还记得坚持甚么 真爱过才会懂 会寂寞会回首 终有你终有梦在心中...... 4、 案例分析 1) 效果如图所示。 歌曲 PK 评分效果展示 1 2) 点击 “查看评分结果”后效果如图所示。 歌曲 PK 评分效果展示 2 3) 具体实现步骤如下所示: a) 由

标记和

标记定义歌曲部分。 b) details 和 summary 元素 定义下拉菜单效果。 c) 无序列表定义评分部分。 d) 评分进度条由 meter 元素 定义。 二、案例实现 新建 HTML 页面,代码如下: 保存后,在谷歌浏览器中预览。