第十一篇 登录和注册

登录和注册

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

posted on 2017-09-25 09:21  幸享龙枫  阅读(560)  评论(0)  编辑  收藏  举报

导航