注册页面详细开发

矫情吗；* 2022-02-05 07:59 128阅读 0赞

# 注册页面详细开发过程\# #

一：开发前的准备工作  
案例效果图：![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70]  
分析页面：![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 1]

二：开发过程  
1.打开IDEA,新建HTML页面  
（1）在body里面定义最外层的那个div,最外层div里面有三个div,在div- left和div-right里面定义相应的

标签。

![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 2]

（2）编辑表单信息

![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 3]

2.添加CSS样式

（1）设置背景图片—要设置整个页面的背景图片就应该在body里面设置样式。图片不重复而且居中显示的，最后面两行代码就是让背景图片铺满屏幕

`
    <style>
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
            background-size:100% 100%;
            background-attachment: fixed;
        }
    </style>
    
    `

（2）设置最外层div的样式  
`.rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; }`  
![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 4]

（3）让三个div,处在同一行。也就是说让左边、中间的div向左浮动，右边的div向右边浮动。例如，下面的左div向左浮动，其他两个相似

`
          .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
    
    `

（4）让页面上的p标签中字体挨近一些，所以需要设置一个通配符\*，进行样式的设置

`
         *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
         }
    
    `

![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 5]  
![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 6]

（5）对左边的div中的p标签进行设置：

`
        .rg_left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }
    
        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;
    
        }
    
    
    `

（6）对右边的div中的p标签进行设置：

`
       .rg_right > p:first-child{
            font-size: 15px;
    
        }
        .rg_right p a {
            color:pink;
        }
    `

设置上面的样式以后，基本的效果如下：

![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 7]

（7）对form进行设置

1）对文本框的左边和右边进行设置

`
    
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px ;
        }
    
    
    
    `

2）让文本框里面显示设置的默认值

`
    
            #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
    
    
    
    `

3）对验证码进行单独的设置，设置验证码的大小，垂直居中

`
       #checkcode{
            width: 110px;
        }
    
        #img_check{
            height: 32px;
            vertical-align: middle;
        }
    
    
    
     `

4）设置注册按钮

`
         #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
         }
    
    `

最终效果图如下：

![Image 1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 8]

最终源码：

`
    
     <!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_bg.png") no-repeat center;
            padding-top: 25px;
            background-size:100% 100%;
            background-attachment: fixed;
        }
    
    
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
        }
    
        .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{
            float: left;
            /* border: 1px solid red;*/
    
        }
    
        .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: 110px;
        }
    
        #img_check{
            height: 32px;
            vertical-align: middle;
        }
    
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }
    </style>

新用户注册

USER REGISTER

<div class="rg_center">
        <div rg_form>
            <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" placeholder="请输入邮箱"></td>
                </tr>
    
                <tr>
                    <td class="td_left"><label for="name">姓名</label></td>
                    <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                </tr>
    
                <tr>
                    <td class="td_left"><label for="tel">手机号</label></td>
                    <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                </tr>
    
                <tr>
                    <td class="td_left"><label>性别</label></td>
                    <td class="td_right">
                        <input type="radio" name="gender" value="male"> 男
                        <input type="radio" name="gender" value="female"> 女
                    </td>
                </tr>
    
                <tr>
                    <td class="td_left"><label for="birthday">出生日期</label></td>
                    <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                </tr>
    
                <tr>
                    <td class="td_left"><label for="checkcode" >验证码</label></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" id="btn_sub" value="注册"></td>
                </tr>
            </table>
        </div>
    
    </div>
    
    <div class="rg_right">
        <p>已有账号<a href="#">立即登录</a></p>
    
    </div>
    
    </div>
    
    </body>
    </html>
    
     `

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70]: /images/20220205/af2e61fd705d47f1949b8a9db12da084.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 1]: /images/20220205/de7b52df776e41b2b3789f51e35a00dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 2]: /images/20220205/5536c716f6894a5186ee2accbaa2c14c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 3]: /images/20220205/ea866309fcbb4f6b8be46b380fac5647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 4]: /images/20220205/4acbde7b5b7448fbb65ddad76a8146de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 5]: /images/20220205/6a15361ed5564b28a6828843a3e11a25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 6]: /images/20220205/bc721097dfcc46358e267064961a8ba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 7]: /images/20220205/b96adc25a52e495e9a3da06519e4e122.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 8]: /images/20220205/703d9b21ac734fa99429c6ae8f9d391c.png