登录和注册
登录和注册相比较，比注册简单多了，一般情况下，我们只需要用两个本文，一个用户名，一个密码。验证码可有可无，在后期的学习中，再讲验证码。而现在好多都玩的是，手机注册，发送短信验证码这些之类的，我们不管，因为我们现在学的是静态页面，记住是静态的。
假如我们的设计师(在上班的时候啊)，给出的登录和注册页面，背景啊，颜色啊，总之，除了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则是没有，还有其他的值，老师建议同学们多看看手册，老师这里只教常用的噢，全部的话，得同学们自己扩展
时间： 2024-08-29 10:37:14