静态注册页面

最新推荐文章于 2024-09-30 15:42:36 发布

魏似任

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量201

点赞数 2

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/Ericfighter/article/details/142345768

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

谈到登录注册页面，普通的小型项目一般是背景图片+表单

表单则是选择一片区域，圆角+阴影，要是比较好看，然后就是提示语加输入框，再全一点可以再加一个验证码，然后点击提交按钮向后端发送请求

以下是代码

简约版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .register {
            width: 800px;
            box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
            margin: auto;
            margin-top: 5%;
            display: flex;
            border-radius: 35px;
            background-color: #ffffff;
            height: 550px;
        }
        table {
            width: 100%;
           
        }
        tr .label{
            width: 50%;
            text-align: right;
        }
        tr .labelx{
            text-align: center;
        }
        label {
            color: red;
        }
        .input1 {
            width: 40%;
            height: 10%;
        }
        .input2 {
            width: 20%;
            height: 10%;
        }
    </style>
</head>
<body>
    <div class="register">
        <table>
            <tr>
                <td class="label"><label for="">*</label>用户名：</td>
                <td><input type="text" placeholder="用户名设置成功后不可修改" class="input1"></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>登录密码：</td>
                <td><input type="text" placeholder="6-20位字母、数字或符号" class="input1"></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>确认密码：</td>
                <td><input type="text" placeholder="再次输入你的登录密码" class="input1"></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>证件类型：</td>
                <td> <select name="" id="" class="input1">
                    <option value="居民身份证">居民身份证</option>
                    <option value="中国护照">中国护照</option>
                    <option value="外国护照">外国护照</option>
                </select></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>姓名：</td>
                <td><input type="text" placeholder="请输入姓名" class="input1"></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>证件号码：</td>
                <td><input type="text" placeholder="请输入您的证件号码" class="input1"></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>优惠（待）类型：</td>
                <td> <select name="" id="" class="input1">
                    <option value="成人">成人</option>
                    <option value="老人">老人</option>
                    <option value="小孩">小孩</option>
                </select></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>邮箱：</td>
                <td><input type="email" placeholder="请正确填写邮箱地址" class="input1"></td>
            </tr>

            <tr>
                <td class="label"><label for="">*</label>手机号码：</td>
                <td> <select name="" id="" class="input2">
                    <option value="+86 中国">+86 中国</option>
                    <option value="+86 美国">+86 美国</option>
                    <option value="+86 日本">+86 日本</option>
                    <input type="email" placeholder="手机号码" class="input2">
                </select></td>
            </tr>

            <tr>
                <td colspan="2" class="labelx"><input type="radio" name="read" value="yes">我已阅读并同意遵守</td>     
            </tr>

            <tr>
                <td colspan="2" class="labelx"> <input type="submit" value="下一步"></td>     
            </tr>
        </table>
    </div>
</body>
</html>

装饰版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="text.css" /> -->
  </head>
  <style>
    .all {
      width: 800px;
      box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
      margin: auto;
      margin-top: 5%;
      display: flex;
      border-radius: 35px;
      background-color: #ffffff;
      height: 550px;
    }
    .log {
      width: 50%;
      margin: auto;
    }
    .reg {
      width: 50%;
      height: 100%;
      margin: auto;
      background-color: #20b2aa;
      border-radius: 35px;
      color: #ffffff;
    }
    .reg_1 {
      text-align: center;
      margin: auto;
      margin-top: 50%;
    }
    .reg_1 h2 {
      font-weight: 700;
    }
    .reg_1 p {
      margin: 15px 0px 25px 0px;
    }
    .sig {
      width: 70px;
      height: 30px;
      border-radius: 12px;
      background-color: #20b2aa;
      border-color: #fff;
      color: #ffffff;
    }
    #tiao {
      padding: 0em 0;
    }
    .reg_1 a {
      color: #ffffff;
    }
    h3 {
      font-size: 3em;
      color: black;
      padding-bottom: 1em;
      margin: 0;
      text-align: center;
      font-family: "Marvel-Regular";
    }
    .input {
      margin: 10px 50px;
      width: 300px;
      height: 70px;
    }
    span {
      color: #999;
      font-size: 0.85em;
      padding-bottom: 0.2em;
      display: block;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .input-text {
      border: 1px solid #555;
      outline-color: #fd9f3e;
      width: 90%;
      font-size: 1em;
      padding: 0.5em;
      line-height: inherit;
    }
    .register-top-grid {
      color: black;
      padding-bottom: 1em;
      margin: 0;
      font-family: "Marvel-Regular";
      margin: 10px 0;
    }
    .text-center {
      text-align: center;
    }
    .tijiao {
      color: rgb(255, 253, 253);
      width: 80px;
      height: 35px;
      background-color: rgb(241, 52, 10);
      border: none;
    }
  </style>
  <body>
    <div class="all">
      <div class="log">
        <div class="register">
          <form>
            <div class="register-top-grid">
              <h3>用户登录</h3>
              <div class="input">
                <span>用户名 <label style="color: red">* </label></span>
                <input
                  type="text"
                  v-model="name"
                  placeholder="请输入用户名"
                  class="input-text"
                />
              </div>
              <div class="input">
                <span>密码 <label style="color: red">*</label></span>
                <input
                  type="password"
                  v-model="password"
                  placeholder="请输入密码"
                  class="input-text"
                />
              </div>
            </div>
            <div class="text-center">
              <input
                type="submit"
                value="提交"
                class="tijiao"
                @click="denglu"
              />
            </div>
          </form>
        </div>
      </div>
      <div class="reg">
        <div class="reg_1">
          <h2>没有账号？</h2>
          <p>立即注册加入我们吧，和我们一起开启旅程吧</p>
          <a href="/register.html">
            <button type="primary" class="sig">注册</button>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>