Web前端技术 课件 模块二 任务4 及MV欣赏栏目实现

热门推荐及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>标签定义，音乐分类用无序列表<ul><li>标签定义。下半部分由八个相同结构的栏目组成，每个栏目都是由<dl><dt><dd>组成，<dl>为每个栏目的容器，<dt>里放图片，<dd>里放说明文字。样式分析——热门推荐12音乐分类采用无序列表及flex弹性布局设置

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

结构分析——MV速递延时符“MV速递”栏目由上下两个部分组成。上半部分由“MV速递”和“更多”组成，都由<div>标签定义。下半部分就是一个视频播放标签<video>。样式分析——MV速递12“MV速递”标题栏目尺寸与“热门推荐”一致，只是少了音乐分类，但总体的结