人民大2024Web前端技术-PPT模块二 任务2 主页尾部实现.pptx

主页尾部实现Web前端技术主讲老师：姜文秀延时符

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

任务描述延时符

任务描述制作网页时一般会重视头部和主体部分，但是页面尾部也是一个不可忽视的部分，在页尾可以增加联系方式、友情链接、服务、社交网站等，增加网站的宣传渠道，还可以提供企业的联系的方式，建立用户对网站的信任感等。本任务依然采用flex布局方式，使用div、ul、span和p标签，完成“奕品堂音乐”网站主页尾部。延时符

页面效果图延时符

学习目标延时符

学习目标掌握标签ul/li和p的使用方法；掌握CSS中background、color、cursor、list-style的设置方法；掌握CSS样式的三大特性和：hover等伪类的使用方法。知识目标能灵活使用背景添加鼠标经过时变化效果；能够根据需求灵活选择基础选择器或复合选择器进行样式添加；能够根据CSS样式的三大特性合理的使用选择器设置样式。技能目标延时符培养尊重规则，尊重法律的意识；培养能够初步搜集、处理、运用社会信息的方法和技能；培养探索精神。素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符p标签ul标签CSS三大特性background背景属性文本对齐鼠标外观文本颜色列表样式伪类选择器

HTML标签：p标签延时符网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，p标签用于定义段落，它可以将整个网页分为若干个段落。文本在一个段落中会根据浏览器窗口的大小自动换行。段落和段落之间保有空隙。

页面中经常使用列表来布局的，比如新闻标题、导航栏、友情链接、商品罗列等都可以使用列表实现。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。这里先介绍使用较多的无序列表标签ul。HTML标签：列表标签延时符ul标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用li标签定义。无序列表的基本语法格式如下:ulli列表项1/lili列表项2/lili列表项3/li.../ul无序列表的各个列表项之间没有顺序级别之分，是并列的。ul/ul中只能嵌套li/li，直接在ul/ul标签中输入其他标签或者文字的做法是不被允许的。li与/li之间相当于一个容器，可以容纳所有元素。列表的使用视频讲解

CSS样式：CSS的三大特性延时符CSS有三个特别重要的特性，分别是层叠性、继承性和优先级。(1) 层叠性。相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突问题。层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。(2) 继承性。CSS具有继承性，子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式，例如text-，font-，line-这些元素开头的可以继承，以及color属性。(3) 优先级。当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性。选择器不同，则根据选择器权重执行。不同选择器的权重可以认为是以下值，通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式表为1000,!important无穷大。

CSS样式：background背景属性延时符通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。背景图片。background-image属性描述了元素的背景图像。background-image:none（无背景图，默认值）|url(使用绝对或相对地址指定背景图像)（2）背景平铺。默认情况下，背景图片会将整个区域填满，如果图片较小，会平铺填满整个区域，如果不需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。background-repeat:repeat（背景图像在纵向和横向平铺，默认值）|no-repeat（背景图像不平铺）|repeat-x（背景图像在横向平铺）|repeat-y（背景图像在纵向平铺）；（3）背景图片位置。当背景图片小于区域大小，并在不平铺的情况下，可以利用background-position属性改变背景图片在区域中的位置。background-position:x（x坐标）y（y坐标）;

CSS样式：background背景属性延时符(4)背景位置固定。如果在一