登录和注册
登录和注册相比较，比注册简单多了，一般情况下，我们只需要用两个本文，一个用户名，一个密码。验证码可有可无，在后期的学习中，再讲验证码。而现在好多都玩的是，手机注册，发送短信验证码这些之类的，我们不管，因为我们现在学的是静态页面，记住是静态的。
假如我们的设计师(在上班的时候啊)，给出的登录和注册页面，背景啊，颜色啊，总之，除了form表单里面，其他的都完全一样的话，我们就做出一个，另一个就可以copy，然后改一小部分，比如啊，老师上篇写的注册，那老师就直接copy吧，节省时间。
其实，这节课很简单，就是讲一下注册和登录的一点点区别，两个页面的相互跳转(一个a标签ok)
<!DOCTYPE html> <html> <head lang="en"> <!--支持中文字符集--> <meta charset="UTF-8"> <!--标题--> <title>登录</title> <!--使用内联样式--> <style> #div1{ /*给出宽度、边框、居中*/ width: 1440px; border: 1px solid #dedede; margin: auto; /*设置一个相对定位，是为了下面的图片做绝对定位*/ position: relative; } form{ /*让表单里的所有子元素都距离左侧20px*/ margin:0 0 0 20px; } h1{ /*为了统一格式，它也距离左侧20px*/ margin: 0 0 0 20px; } #img1{ /*设置图片的宽度，绝对定位和 层次为负数，让其他元素压在它上面*/ width: 540px; position: absolute; z-index: -1; right: 0; top: 0; } .zz{ /*演示一下 class类选择器 这里颜色表红色，字体变成18px*/ color:red; font-size: 18px; } </style> </head> <body> <!--最外层套一个div做最高级父亲(管理)--> <div id="div1"> <!--h1元素，放置一个标题一样，让别人更加清楚--> <h1>用户登录</h1> <!--提交数据，需要用到form表单，action代表传到哪里去，method是类型 get或者post--> <form action="#" method="post"> <!--用p标签做跨行效果--> <p> <!--用户名，input text 文本--> <span style="letter-spacing: 0.5em;">用户</span>名：<input placeholder="请输入用户名" type="text"/> <!--placeholder 是input里面的属性，效果很明显，就是没有数据的时候出现提示，输入数据提示就会消失--> </p> <p> <!--密码，password 密码格式--> <span style="letter-spacing: 2em;">密</span>码：<input placeholder="请输入密码" type="password"/> </p> <p> <!--表单提交按钮 submit 获取表单数据提交--> <input type="submit" value="登录"/> </p> <!--添加一个a标签跳转页面--> <a href="rig.html">没有账号，去注册</a> </form> <!--这里我们给一张图片，玩一下--> <img id="img1" src="../img/39416b2dfdfec6beaa4361a9fbc86a93d8ad2cbb.jpg" alt="火影忍者的图片"/> <!--下面老师用一个 ol标签来说明一些过程--> <ol> <!--这里给出class类选择器，大家就能知道它的意思了，它可以多个一起用一个class，而id只能一个用--> <li class="zz">我们在下方添加一个a标签，做跳转链接<br/> 注意，老师给的链接，是同级目录下的，若不是同级目录，则需要去其他目录寻找</li> <li>我们去rig注册页面也添加一个a标签：照搬上面的超链接，将其 href里的值改掉<br/> 将“没有账号，去注册”改成“已有账号，去登录”</li> <li class="zz">我们就实现了一个最简单的两个页面之间的跳转<br/> </ol> </div> </body> </html>
老师最后再强调一遍，我们现在只做的是静态。课程相对会比较慢的，考虑到一些入门同学，老师会多演示一些例，让各位同学更加清楚怎么做，不会太迷。
附加：a标签都自带下划线，想要取消，比如用内嵌：
<a style="text-decoration: none" href="rig.html">没有账号，去注册</a>
text-decoration是文本修饰，none则是没有，还有其他的值，老师建议同学们多看看手册，老师这里只教常用的噢，全部的话，得同学们自己扩展