案例1：网站注册（CSS)

最新推荐文章于 2024-10-02 15:35:50 发布

野生技术协会副会长

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量213

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weiyoo55/article/details/108401724

版权

案例1：网站注册（CSS)

分析：
在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
  <style>
      *{
         margin: 0px;
          padding: 0px;
          box-sizing: border-box;
      }
      body{
          background: url("img/register_bg3.jpg") no-repeat center;
          background-size: 100%;
          background-attachment: fixed;
      }
      .rg_layout{
          width: 1000px;
          height: 500px;
          border: 8px solid #EEEEEE;
          background-color: white;
          /*让div水平居中*/
          margin: auto;
          margin-top: 250px;
      }
      .rg_left{
          /*border: 1px solid red;*/
          float: left;
          margin: 15px;
      }
      .rg_left > p:first-child{
          color: #FFD026;
          font-size: 20px;
      }
      .rg_left > p:last-child{
          color: #A6A6A6;
          font-size: 20px;
      }
      .rg_center {
          /*border: 1px solid red;*/
          float: left;
          width: 550px;
      }
      .rg_right{
          /*border: 1px solid red;*/
          float: right;
          margin: 15px;
      }
      .rg_right > p:first-child{

          font-size: 15px;
      }
      .rg_right p a{
        color: pink;
      }
 .td_left{
    width: 100px;
     text-align: right;
     height: 45px;
 }
 .td_right{
    padding-left: 50px;
 }
 #username,#password,#Email,#name,#tel,#birthday,#checkcode{
     width: 251px;
     height: 32px;
     border: 1px solid #A6A6A6;
     /*设置边框圆角*/
     border-radius: 5px;
     padding-left: 10px;
 }
      #checkcode{
      width: 140px;
      }
       #img_check{
         height: 32px;
           /*垂直居中*/
         vertical-align: middle;
       }
      #btn_sub{
       width: 150px;
       height: 40px;
       background-color: #FFD026;
          border: 1px solid #FFD026;
       margin-left: 51px;
      }
  </style>

</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p class="p_reg">新用户注册 </p>
        <p>UESER REGISTER </p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
      <form action="#" method="post">
        <table>
          <tr>
          <td class="td_left"><lable for="username">用户名</lable></td>
              <td class="td_right">
              <input type="text" name="username" id="username" placeholder="请输入用户名：">
              </td>
          </tr>
            <tr>
                <td class="td_left"><lable for="password">密码</lable></td>
                <td class="td_right">
                    <input type="password" name="password" id="password" placeholder="请输入密码：">
                </td>
            </tr>
            <tr>
                <td class="td_left"><lable for="Email">Email</lable></td>
                <td class="td_right">
                    <input type="email" name="Email" id="Email" placeholder="请输入Email：">
                </td>
            </tr>
            <tr>
                <td class="td_left"><lable for="name">姓名</lable></td>
                <td class="td_right">
                    <input type="text" name="name" id="name" placeholder="请输入姓名：">
                </td>
            </tr>
            <tr>
                <td class="td_left"><lable for="tel">手机号</lable></td>
                <td class="td_right">
                    <input type="number" name="tel" id="tel" placeholder="请输入手机号：">
                </td>
            </tr>
            <tr>
                <td class="td_left"><lable >性别</lable></td>
                <td class="td_right">
                    <input type="radio" name="gender" value="male" checked>男
                    <input type="radio" name="gender" value="female">女
                </td>
            </tr>
            <tr>
                <td class="td_left"><lable for="birthday">出生日期</lable></td>
                <td class="td_right">
                    <input type="date" name="birthday" id="birthday">
                </td>
            </tr>
            <tr>
                <td class="td_left"><lable for="checkcode">验证码</lable></td>
                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码：">
                    <img id="img_check" src="img/verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
            </tr>
        </table>
      </form>
      </div>
    </div>
    <div class="rg_right">
        <p>
            已有账号?<a href="https://blog.csdn.net/weiyoo55">立即登录</a>
        </p>
    </div>
</div>
</body>
</html>