第十一篇 登录和注册

Posted 幸享龙枫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第十一篇 登录和注册相关的知识,希望对你有一定的参考价值。

登录和注册

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

以上是关于第十一篇 登录和注册的主要内容,如果未能解决你的问题,请参考以下文章

第十一篇 手写原理代码

第十一篇SpringSecurity基于JWT实现Token的处理

第十一篇SpringSecurity基于JWT实现Token的处理

vue.js项目实战运用篇之抖音视频APP-第十一节: 注册登录及验证码功能

vue.js项目实战运用篇之抖音视频APP-第十一节: 注册登录及验证码功能

混合编程jni 第十一篇之JNA详情