人民大2024Web前端技术-PPT模块三 任务1 歌曲分类页面实现.pptx

歌曲分类页面实现Web前端技术主讲老师：姜文秀延时符

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

任务描述延时符

任务描述一个网站是由多个页面组成，主页是最主要也是内容最丰富的页面，其他的页面一般会沿用主页的头部尾部内容以及总体风格，本次任务要完成歌曲分类页面，并且页面能够响应式展示多个热门推荐的内容。采用flex布局方式结合媒体查询，最终页面布局效果能够随着屏幕大小而改变。当屏幕宽度大于968像素时，效果如图1所示，当屏幕宽度小于等于768像素，并且大于500像素时，效果如图2所示。延时符

页面效果图延时符图1图2

学习目标延时符

学习目标掌握媒体查询的添加方法；掌握flex布局和绝对定位结合的使用方法；掌握CSS中文本超出隐藏的设置方法。知识目标能够根据现有页面制作出另一个头尾相同页面结构的页面；能够根据需求灵活选用不同的布局方式；能够为页面添加媒体查询；技能目标延时符培养分析问题、解决问题的能力；培养严谨、精益求精的工作态度；培养责任感、竞争意识、团结合作和奉献精神；素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符视口text-overflow文本溢出空白处理word-wrapposition定位媒体查询align-self

HTML标签：视口延时符viewport视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。接下来所讲的视口是指理想视口。视口是为了网站在移动端有最理想的浏览和阅读宽度而设定。理想视口是最理想的视口尺寸。需要手动添加meta视口标签。标签如下：metaname=viewportcontent=width=device-width,initial-scale=1.0meta视口标签的主要作用是：布局视口的宽度跟理想视口的宽度一致，也就是设备有多宽，布局的视口就多宽。

CSS样式：text-overflow文本溢出延时符如果文本超出其包含元素的范围，是显示还是会被裁剪掉，由text-overflow属性控制，其规定当文本溢出其包含元素时的样式。text-overflow:clip（修剪文本）|ellipsis（使用省略号代替被修剪的文本）|string（使用给定的字符串来代表被修剪的文本）;text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

CSS样式：white-space空白处理延时符当元素中间带有空白，可以通过white-space属性设置如何处理元素内的空白。语法如下：white-space:normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

CSS样式：word-wrap延时符word-wrap能设置或检索当前行超过指定容器的边界时是否断开转行，是一个指令代码。语法如下：word-wrap:normal（只在允许的断字点换行）|break-word（在长单词或URL地址内部进行换行）;鼠标外观的属性值和对应效果如表2-2-1所示。

CSS样式：单行文本溢出延时符单行文本溢出显示省略号，必须满足三个条件：1. /*1.先强制一行内显示文本*/2. white-space:nowrap;（默认normal自动换行）3. /*2.超出的部分隐藏*/4. overflow:hidden;5. /*3.文字用省略号替代超出的部分*/6. text-overflow:ellipsis;单行文本溢出隐藏视频讲解

CSS样式：伪类选择器：hover延时符CSS有三种基本的定位机制：普通文档流、浮动和绝对定位。font-family:字体。通过使用position属性，我们可以选择4种不同类型的定位，结合使用top、bottom、left和right属性进行位置的控制。这会影响元素框生成的方式。position属性值和含义如下表3-1-2所示：

CSS样式：@media：媒体查询延时符媒体查询是CSS3的新语法。使用媒体查询@media，可以针对不同的媒体类型定义不同的样式，也可以根据不同的屏幕尺寸设置不同的样式。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。目前针对不同的手机、平板等设备都可以用到媒体查询。语法如下：font-family:字体。@mediamediatypeand|not|only(