前端之登录注册页面案例

一、效果图 

(1)登录界面

(2)注册界面 

 二、详细设计

(1)登录界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            background: #006666;
        }
        h1{
            color: #FFF;
            text-align: center;
        }
        .container{
            margin: 100px auto;
            width: 30%;
        }
        form{
            background: #FFF;
            height: 300px;
            width: 100%;
            border-radius: 10px;
            position: relative;
        }
        label{
            color: #000;
            font-weight: bold;
            font-size: 20px;
            margin-left: 40px;
        }
        input{
            text-align: left;
            margin: 10px;
        }
        .input{
            width: 80%;
            height: 35px;
            margin-left: 40px;
        }
        .checkbox{
            margin-left: 30px;
        }
        a{
            text-decoration: none;
            font-weight: bold;
        }
        .submit{
            display: inline-block;
            margin-top: 0;
            margin-left:145px;
            background: #000;
            border: none;
            color: #FFF;
            height: 35px;
            width: 100px;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
        }
        .left{
            margin: 20px;
        }
        .right{
            position: absolute;
            right: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>用户登录</h1>
        <form>
            <br>
            <label for="username">用户名</label><br>
            <input type="text" name="username" id="username" class="input" value="" placeholder="用户名admin"><br>
            <label for="pwd">密码</label><br>
            <input type="password" name="" id="pwd" class="input" value="" placeholder="密码admin">
            <div class="checkbox">
                <input type="checkbox" name="">
                <span>记住密码</span>
            </div>
            <button type="submit" class="submit" onclick="submits(this)">开始登录</button>
            <br>
            <a href="index.html" class="left">返回首页</a>
            <a href="register.html" class="right">注册账号</a>
        </form>
    </div>
    <script>
     function submits(btn){
        var userName = document.getElementById("username").value;
        var pwd = document.getElementById("pwd").value;
        console.log(userName)
        if (userName == "admin" && pwd == "admin") {
           alert("用户名和密码正确,但是连接服务器失败!")
        }
        else {
            alert("用户名或密码不正确!");
        }
    };
    </script>
</body>

</html>

(2)注册界面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册界面</title>
  <style>
    body{
      background: #159f9f;
    }
    .container{
      margin: 0 auto;
      width: 500px;
    }
    form{
      width: 450px;
      margin: 0 auto;
      background: #FFF;
      border-radius: 15px;
      position: relative;
    }
    h1{
      font-size: 28px;
      text-align: center;
      color: #FFF;
    }
    .p{
      color: red;
      margin-left: 33px;
      display: inline-block;//不占单独一行的块级元素
    }
    label{
      font-size: 18px;
      font-weight: bold;
    }
    .register{
      height: 35px;
      width: 300px;
    }
    .q{
      color:red;
      margin-left:17px;
      display:inline-block;
    }
    .checkbox{
      margin-left: 100px;
      display: inline-block;
      width: 15px;
      height: 15px;
    }
    .submit{
      border-radius: 7px;
      margin-left: 150px;
      height: 35px;
      width: 150px;
      background-color: #000;
      border: none;
      display: block;
      padding: 0;
      color: #FFF;
      font-weight: bold;
      cursor: pointer;
    }
    a{
      text-decoration: none;
      font-weight: bold;
    }
    .left,.right{
      position: absolute;
      bottom: 20px;
    }
    .left{
      left: 20px;
    }
    .right{
      right: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>新用户注册</h1>
    <form>
      <br>
      <span class="p">*</span>
      <label for="username">用户名</label>
      <input type="text" name="" id="username" placeholder="" class="register"><br><br>
      <span class="p">*</span>
      <label for="phonenumber">手机号</label>
      <input type="text" name="" id="phonenumber" class="register">
      <br><br>
      <span class="q">*</span>
      <label for="pwd">登录密码</label>
      <input type="password" name="" id="pwd" class="register"><br><br>
      <span class="q">*</span>
      <label for="c_pwd">确认密码</label>
      <input type="password" name="" id="c_pwd" class="register"><br><br>
      <span class="p">*</span>
      <label for="verify">验证码</label>
      <input type="text" id="verify" class="register" name=""><br><br>
      <input type="checkbox" class="checkbox" name="">
      <span style="font-size:15px">我已阅读并同意《用户注册协议》</span>
      <br><br>
      <input type="submit" name="" value="同意以上协议并注册" class="submit" onclick="register(this)"><br>
      <a href="index.html" class="left">返回首页</a>
      <a href="login.html" class="right">开始登录</a>
    </form>
  </div>
  <script>
    var checkbox=document.getElementsByClassName('checkbox');
    function register(btn){
      if(checkbox[0].checked==true){
        alert("注册成功!");
      }
      else{
        alert("请先阅读并同意《用户注册协议》!")
      }
    }
  </script>
</body>
</html>

三、部分效果

(1)登录界面

(2)注册界面

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值