前端注册页面小白级别

╰+攻爆jí腚メ 2024-04-06 14:53 75阅读 0赞

#### 前端注册页面小白级别 ####

*  1.注册页面的实现图
 *  2.代码实现

## 1.注册页面的实现图 ##

![在这里插入图片描述][b8cc5350009d40bd94ce27fe4ac601ca.png]

## 2.代码实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>注册页面</title>
        <style>
        body {
          
        background-image: url('../meitu/tiankon.jpg');
        background-size: 1960px;
        background-repeat: no-repeat;
        padding-top: 120px;
        padding-left: 200px;
    }
    
           .contain {
          
            width:  300px;
            height: 350px;
            border-width: 2px;
            background-color: hsl(350, 89%, 89%);
            float: none;
            margin: 0 auto;
            justify-content: center; 
            align-items: center;
            border-radius: 15px;
            
           }
           h2 {
          
            color: palevioletred;
                text-align: center;
                padding: 10px 0;
            }
            .left {
          
                color: rgb(84, 130, 84);
                float: left;
                
            }
            .row{
          
                align-items: center;
                height: 35px;
                display: flex;
                padding: 3px;
                justify-content: center; 
            }
            .signup {
          
    
                width: 200px;
                height: 30px;
                color: white;
                border-radius: 15px;
                background-color: rgb(116, 54, 110);
                border: none;
            }
            .edit{
          
                border: 1px solid #a6a6a69f;
                background-color: aliceblue;
                border-radius: 15px;/*椭圆款边*/
            }
           
        </style>
    </head>
    <body>
        <div class="out">
        <div class="contain">
      
        <h2> 注册的界面</h2><hr>
        <div class="row">
            <span class="left">用户名:</span>
            <input type="text" id="username" class="edit">
            <div class="error"></div>
        </div>
        <div class="row">
            <span class="left">密码:  </span>
            <input type="password"  id = "password" class="edit">
            <div class="error"></div>
        </div>
        <div class="row">
            <span class="left">邮箱:  </span>
            <input type="text" class="edit" id="email">
            <div class="error"></div>
        </div>
        <div class="row">
            <span class="left">姓名:  </span>
            <input type="text" class="edit" id="name">
            <div class="error"></div>
        </div>
        <div class="row">
            <span class="left">手机号:</span>
            <input type="text" id="phone" class="edit"  >
            <div class="error"></div>
        </div>
        
        <div class="row">
            <input type="button" value="注册" id="register" class="signup" >
        </div>
        </div>
        </div>
        <script src="index.js"></script>
    </body>
    </html>

[b8cc5350009d40bd94ce27fe4ac601ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0f9ab771b42b462381923a0f037eaeb9.png