- 1、本文档共22页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
主页尾部实现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)背景位置固定。如果在一
您可能关注的文档
- 人民大2024Web前端技术-PPT模块四 任务2 主页榜单鼠标滑过功能实现.pptx
- 人民大2024Web前端技术-PPT模块二 任务3 头部导航栏目实现.pptx
- 人民大2024Web前端技术-PPT模块四 任务6 发布评论功能实现.pptx
- 人民大2024Web前端技术-PPT模块四 任务4 登录页面表单验证功能实现.pptx
- 人民大2024机械产品零部件三维建模实用教程(UG NX 12.0版) PPT课件项目09 经典机械零件建模之“箱体类零件”.ppt
- 人民大2024机械产品零部件三维建模实用教程(UG NX 12.0版) PPT课件项目06 经典机械零件建模之“盘盖类零件”.ppt
- 人民大2024Python程序设计基础 PPT课件1.2Python语言开发环境.pptx
- 人民大2024机械产品零部件三维建模实用教程(UG NX 12.0版) PPT课件项目10 零件装配.ppt
- 人民大2024机械产品零部件三维建模实用教程(UG NX 12.0版) PPT课件项目07 经典机械零件建模之“轴套类零件”.ppt
- 人民大2024Python程序设计基础 PPT课件1.3Python集成开发环境.pptx
- 2025年全国爱国卫生月活动总结(28篇).docx
- 2025年公交驾驶员年终总结(6篇).docx
- 2025年公司年度行政工作计划(31篇).docx
- 知到智慧树网课:C语言编程新思路(山东理工大学)章节测试满分答案.pdf
- 《毛泽东思想和中国特色社会主义理论体系概论》专题测试参考答案.docx
- 知到智慧树网课:C语言编程方法与思想(北京航空航天大学)章节测试满分答案.docx
- 知到智慧树网课:大学英语课程思政(哈工)章节测试满分答案.docx
- 2025年二级建造师法规章节精编习题库.pdf
- 2025年二级建造师法规章节精编习题库.doc
- 2025年北京市三类人员安全员c3证考试题库及答案.doc
最近下载
- 2025年浙江广厦建设职业技术大学单招职业适应性测试题库完整.docx VIP
- 15 《青春之光》(课件)统编版语文七年级下册.pptx VIP
- 2024电化学储能电站典型设计图.pdf(1).doc
- 计算机类单招复习题及答案.docx VIP
- 纪检业务知识培训课件.pptx
- 4122 使用权资产底稿编制-oo.xlsx
- 项目经理部生产区、生活区、办公区建设标准 .docx VIP
- 2025年浙江广厦建设职业技术大学单招职业适应性测试题库有答案.docx VIP
- 2019教科版五年级科学下册《绿豆苗的生长》教案教学设计.docx
- IPC-TM-650-CN中文 -2023——测试方法扫描版.pdf
文档评论(0)