Web前端技术 课件 模块二 任务2 主页尾部实现

主页尾部实现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>标签定义。无序列表的基本语法格式如下:<ul><li>列表项1</li><li>列表项2</li><li>列表项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)背景位置固定。如果在一个带垂直滚动条的页面中，想将背景图固定住，不随着滚动条滚动，可以使用background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。background-attachment后期可以制作视差滚动的效果。background-attachment:scroll（背景图像是随对象内容滚动）|fixed（背景图像固定）；(5)背景复合写法。为了简化背景属性的代码，我们可以将以上这些属性合并简写在同一个属性background中。从而节约代码量.当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置。语法如下：background:transparenturl(image.jpg)repeat-yfixedtop;(6)背景半透明效果。CSS3为我们提供了背景颜色半透明的效果。例如background:rgba(0,0,0,0.3);最后一个参数是alpha透明度，取值范围在0-1之间，我们习惯把0.3的0省略掉，写为background:rgba(0,0,0,.3);CSS样式：cursor鼠标外观延时符cursor用于设置鼠标的外观，设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。语法如下：li{cursor:pointer;}鼠标外观的属性值和对应效果如表2-2-1所示。CSS样式：文本颜色和列表样式延时符color属性用于定义文本的颜色。其取值方式和background-color一样，也有三种，分别是预定义颜色值、十六进制和RGB代码。list-style属性用于设置列表的样式。无序列表ul和有序列表ol默认在每个列表项前会有项目符号或编号，可以通过list-style:none去掉默认样式。这也是开发页面时常用的方法。CSS样式：伪类选择器：hover延时符伪类选择器由多种用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号（:）开头，比如:hover、:first-child。因为伪类选择器很多，比如有链接伪类、结构伪类等，这里先介绍常用的链接伪类选择器。font-family:字体。为了确保生效，请按照LVHA的循顺序声明:link－:visited－:hover－:active。链接伪类选择器有四种，具体如表2-2-2所示。背景及伪类使用视频讲解任务实施延时符结构分析样式分析设置页面样式页面结构结构分析延时符页面尾部首先嵌套一个<div>版心，用于设置内容居中。版心中包括链接分类、版权文字2个部分组成，链接分类被放在<ul>标签中，每一个部分使用一个<li>标签，每个<li>标签中使用<p>标签设置背景图片，文字放在<span>标签中。版权文字区域放在<div>标签中，每一行单独放在一个<p>标签中，所有的文字和|使用<span>标签。样式分析12ul.classify使用flex布局，内