人民大2024Web前端技术-PPT模块四 任务3 登录注册页面实现.pptx

登录注册页面实现Web前端技术主讲老师：***延时符

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

任务描述延时符

任务描述网页不仅仅可以向用户展示内容，也可以与用户进行交互活动，比如用户注册登录、咨询问题、选择商品，提交订单等，而表单则是实现这些交互功能的一种标签，它提供多种方式让用户输入数据。本任务中我们将利用表单与相关标签来设计登录注册窗口，并用JavaScript控制登录注册窗口的显示与关闭。延时符

页面效果图延时符

学习目标延时符

学习目标掌握模拟弹出窗口的方法；掌握CSS样式display:none、display:block与z-index的方法和作用；掌握通过CSS样式transform居中放置的方法。掌握JavaScript获取选择器document.querySelector的方法。知识目标能够根据效果图完成弹出窗口的设计；能够根据效果图使用合理标签进行登录/注册页面结构搭建；能够根据需求灵活选择各类基础选择器进行样式添加；技能目标延时符培养严谨、精益求精的工作态度；培养良好的审美观念；培养团队合作的意识。素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符position:fixedz-indexhref=”javascript:;”document.querySelector()

CSS样式：position:fixed延时符CSS中的position属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position属性有5个可选值，分别对应5种不同的定位方式，前面的章节已经讲过static(静态定位默认值)、relative(相对定位)和absolute(绝对定位)，此处用到了新的属性——fixed(固定定位)，其作用是无论如何滚动浏览器窗口元素的位置都是固定不变的，可以使用top、right、bottom、left这4个属性来定义元素相对于浏览器窗口的位置。遮盖层和登录窗口层都使用了position:fixed;是为了防止页面滚动对它们造成影响。

CSS样式：z-index:9999延时符CSS中的z-index属性设置元素的堆叠顺序。当多个元素产生重叠时，由它来决定谁叠在上面，其值越大，越在上层。遮盖层设置z-index:9998;是让它在盖在当前页面所有元素的上面，而登录窗口层设置z-index:9999;是让登录窗口盖在遮盖层的上面，因此遮盖层实现了登录窗口和当面页面的隔离作用。position：fixed、z-index的使用方法视频讲解

CSS样式：toplefttransform完成居中功能延时符当前元素设置为top:50%;和left:50%;时，如图4-3-8所示，可以看到，子元素左上角的点与父元素的中心点重合，但子元素并未在父元素正中。因此通过CSS的transform属性将子元素产生位移，transform属性允许对元素进行旋转、缩放、移动或倾斜操作，其中可选值translate(x,y)可产生平面位移，代码为transform:translate(-50%,-50%);即将水平方向左移50%，即宽度的一半，同时将垂直方向上移50%，即高度的一半，这样子元素的中心点与父元素的中心点重合，实现了子元素居中的功能，如图4-3-9所示。图4-3-8top:50%;left:50%;的效果图4-3-9transform:translate(-50%,-50%);的效果

JavaScript：href=”javascript:;”延时符将“登录”超链接的href属性设置为“javascript:;”表示它是一个超链接，只是不跳转而已，它的目的是将在JS代码段里执行一段代码。

JavaScript：document.querySelector()延时符在前面的知识点讲过，获取元素可通过getElement(s)By方式，比如document.getElementById(id)，document.getElementsByTagName(‘div’)[0]，它们往往是JavaScript程序中开销最大的部分，因访问NodeList导致的问题很多。而document.querySelector()可避免使用NodeList对象通常会引起的大多数性能问题，因此它的访问效率相比而言要快得多。对使用者来说，也避免了针对不同选择符要使用不同getElement(s)By方式带来的麻烦。只需要在参数里用选择符即可。如document.querySelector(#close)、document.que