【css+html注册页面】-CSDN博客

本文链接：https://blog.csdn.net/qq_53076698/article/details/131056778

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<!--    最外边的-->
<div class="rg_layout">
  <!--    最左边的-->
  <div class="rg_left">
    <p >🍔新用户注册🍔</p>
    <p>JING KE CI KINGQIN</p>
  </div>


  <!--中间的-->
  <div class="rg_center">
    <div class="rg_from">
      <form action="/user/register" method="post">
        <table >
          <tr>
            <td class="td_left"><label for="username">用户名：</label> </td>
            <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入昵称"></td>
          </tr>
          <tr>
            <td class="td_left"><label for="password">密码：</label> </td>
            <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
          </tr>
          <tr>
            <td class="td_left"><label for="email">Email：</label> </td>
            <td class="td_right"><input type="email" name="email" id="email"></td>
          </tr>
          <tr>
            <td class="td_left"><label for="name">姓名：</label> </td>
            <td class="td_right"><input type="text" name="name" id="name"></td>
          </tr>
          <tr>
            <td class="td_left"><label for="phone">手机号：</label> </td>
            <td class="td_right"><input type="text" name="phone" id="phone"></td>
          </tr>
          <tr>
            <td class="td_left"><label>性别：</label> </td>
            <td class="td_right">
              <input type="radio" name="gender" checked >女
              <input type="radio" name="gender" >男
            </td>
          </tr>
          <tr>
            <td class="td_left"><label>出生日期：</label> </td>
            <td class="td_right"><input type="date" name="abirthday" ></td>
          </tr>
          <tr>
            <td class="td_left"><label for="checkcod">验证码：</label> </td>
            <td class="td_right"><input type="text" name="checkcod" id="checkcod">
              <img id="img_check" src="./image/yanzhengma.png"height="25" width="80">
            </td>
          </tr>
          <tr>
            <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册" ></td>
          </tr>
        </table>
      </form>

    </div>

  </div>


  <!--最右边的-->
  <div class="rg_right">
    <P>已有账号？<a href="https://blog.csdn.net/qq_53076698/article/details/129294361?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168597094716800215029834%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168597094716800215029834&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-129294361-null-null.268^v1^koosearch&utm_term=mysql&spm=1018.2226.3001.4450">立即登录</a></P>
  </div>

</div>
</body>
</html>

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;}
body{
    background: url("../image/c.png" )  no-repeat ;
    background-size: 100%;
}
.rg_layout{
    width: 800px;
    height: 500px;
    border: 5px solid #EEEEEE;
    background-color: #FBFBEF;
    margin-left: 300px;
    margin-top: 50px;
}
.rg_left{
    /*border: 1px red solid;*/
    float: left;
    margin: 15px;
}
.rg_center{
    /*border: 1px red solid;*/
    float: left;
    margin-left: 60px;
    margin-top: 40px;

}
.rg_right{
    /*border: 1px red solid;*/
    float: right;
    margin: 10px;
}

.rg_left > p:first-child{
    color: #FFD026;
    font-size: 18px;

}
.rg_left >p:last-child{
    color: #A6A6A6;
    font-size: 16px;
}
.rg_right >p:first-child{
    font-size: 10px;
}
.rg_right p a {
    color: pink;
}

.td_left{
    width: 100px;
    height: 40px;
    text-align: right;
}
.td_right{
    padding-left: 10px;
}
#username,#password,#email,#name,#phone,#abirthday,#checkcod   {
    width: 180px;
    height: 25px;
    border: 1px solid #A6A6A6 ;
    border-radius: 5px;
    padding-left: 10px;
}
#checkcod{
    width: 90px;
}
#img_check{
    vertical-align: middle;
}
#btn_sub{
    width: 100px;
    height: 25px;
    background-color: #FFD026;
    border: solid #FFD026 1px;
    margin-left: 40px;
    margin-top: 20px;
}