人民大2024Web前端技术-PPT模块二 任务4 热门推荐及MV欣赏栏目实现.pptx

热门推荐及MV欣赏栏目实现Web前端技术主讲老师：***延时符

CONTENTS目录01任务描述03知识点导图02学习目标04相关知识05任务实施延时符

任务描述延时符

任务描述网页中的通常会用图文并茂地方式展现需要表达的内容，表现形式一般为上方是一张图片，图片下方写着简要的说明文字，如需了解更多详情，点击图片或者文字均可转到详情页面。目前绝大多数网站都会或多或少采用这种表现形式，同学们可通过本节任务学习并掌握相关技能。从使用频率来说，视频播放功能用得并不多，主要取决于网站是否需要通过视频来展现。在本节任务中，音乐需要通过MV视频向用户传递新歌，因此同学们通过案例学习视频播放相关技能。延时符

页面效果图延时符

学习目标延时符

学习目标掌握通过定义列表设置栏目的方法；掌握播放视频标签的方法；掌握CSS背景图片定位的方法；知识目标能够根据效果图使用合理标签进行页面结构搭建；能学会设置栏目的HTML和CSS方法；能学会视频播放标签的属性；技能目标延时符培养严谨、精益求精的工作态度；培养能够举一反三、总结规律的能力；培养探索精神。素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符video标签audio标签background-position高级应用

HTML标签：video标签延时符很多站点都会使用到视频.HTML5提供了展示视频的标准。主流浏览器都支持video标签。video标签定义视频，比如电影片段或其他视频流。提供了播放、暂停和音量控件功能，也提供了width和height属性控制视频的尺寸。video支持的视频格式如表2-4-1所示：

HTML标签：video标签延时符常用的属性及值如表2-4-2所示：video的使用方法视频讲解

HTML标签：audio标签延时符页面中除了可以播放视频，还可以播放音乐或录音，HTML5提供了展示音频的标准。主流浏览器都支持audio标签。HTML支持3种音频文件格式：OGG、MP3和WAV。OGG:OGG文件没有被压缩，所以音质是3种文件格式中最好的，但同时文件大小也是最大的。MP3:MP3文件被压缩过，所以文件大小会略小一些，同时音质也会低于OGG文件。另外，MP3格式是最普遍使用的文件格式。WAV:WAV文件也是被压缩过，文件大小是3种文件格式中最小的，但音质也是最差的。常用的属性与值如表2-4-3所示：audio的使用方法视频讲解

CSS样式：background-position高级应用延时符background-position属性在上节任务中已经用过，可通过background-position将放大镜图标从搜索框中向右移动一段距离，在一个网站里，往往会使用多个小图标增加网站的美感，如果一个图标保存为一个文件，那么无论是文件管理、调用图标还是图标维护都比较麻烦，因此通常把所用的图标放在一张图片上，称为图标集。比如图2-4-6所示。图2-4-6图标集

CSS样式：background-position高级应用延时符当使用其中某个图标时，首先将该图作为背景图放置在容器里，然后通过设置宽度和高度以及某图标在图中的坐标位置即可。比如使用空心圈的盾牌图标，它的坐标和尺寸如图2-4-7：图2-4-7目标图标坐标和尺寸

CSS样式：background-position高级应用延时符其实现的原理如图2-4-8：图2-4-8图标集调用图片原理图

CSS样式：background-position高级应用延时符按原理图设置一个容器，将图标集作为背景图放入：未设置坐标时，效果如图2-4-9，图标集的左上角的图作为背景显示在容器中：按图2-4-8进一步设置CSS，将背景图分别向左移115px，向上移115px，完成后的效果图如图2-4-10所示：图2-4-9未设置坐标时效果图2-4-10图标集中调用图标效果图background-position高级应用视频讲解

任务实施延时符结构分析样式分析设置页面样式页面结构

结构分析——热门推荐延时符“热门推荐”栏目由上下2个部分组成。上半部分由“热门推荐”、音乐分类和“更多”组成，其中“热门标签”和“更多”由div标签定义，音乐分类用无序列表ulli标签定义。下半部分由八个相同结构的栏目组成，每个栏目都是由dldtdd组成，dl为每个栏目的容器，dt里放图片，dd里放说明文字。

样式分析——热门推荐12音乐分类采用无序列表及flex弹性布局设置 3音乐栏目通过尺寸定义将八个小栏目排成两行，每行四个。每个子栏目利用定义列表设置，其中图片采用背景图片定位方式显示。延时符任务实施视频讲解热门推荐栏里的文字用div放在左右两侧，中间的音乐分类采用一级导航菜单的方法

结构分析