案例-注册页面

案例-注册页面

成品

 HTML代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册页面</title>
        
        <style type="text/css">
            
            *{
                margin:0px;
                padding:0px;
                box-sizing:border-box;
            }
            
            body{
                background: url(img/图片.jpeg) no-repeat;
            }
            
            .rg_layout{
                width:900px;
                height:500px;
                border:8px solid #EEEEEE;
                background:white;
                /*让div水平居中*/
                margin: auto;
                margin-top: 15px;
            }
            
            .rg_left{
                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;
                
                width: 450px;
                
            }
            
            .rg_right{
                float:right;
                margin:15px;
            }
            
            .rg_right>p:first-child{
                font-size:15px;
            }
            
            .rg_right p a{
                color: #FF1493;
            }
            
            .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>
        
    </head>
    <body>
        <div class="rg_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
                
            </div>
            
            <div class="rg_center">
                <div class="rg_form">
                    <table>
                        <form action="#" method="get">
                            <tr>
                                <td class="td_left">用户名</td>
                                <td class="td_right"><input id="username" name="username" placeholder="请输入用户名"></td>
                            </tr>
                    
                            <tr>
                                <td class="td_left">密码</td>
                                <td class="td_right"><input id="password" type="password" name="password" placeholder="请输入密码"></td>
                            </tr>
                    
                            <tr>
                                <td class="td_left">Email</td>
                                <td class="td_right">
                                    <input id="email" type="email" name="email" placeholder="请输入Email" >
                                </td>
                            </tr>
                            
                            <tr>
                                <td class="td_left">姓名</td>
                                <td class="td_right">
                                    <input id="name" name="name" placeholder="请输入真实姓名" />
                                </td>
                            </tr>
                            
                            <tr>
                                <td class="td_left">手机号</td>
                                <td class="td_right">
                                    <input id=tel name="number" placeholder="请输入您的手机号" />
                                </td>
                            </tr>
                    
                            <tr>
                                <td class="td_left">性别:</td>
                                <td class="td_right">
                                    <input type="radio" name="gender" value="男">男
                                    <input type="radio" name="gender" value="女">女
                                </td>
                            </tr>
                    
                            <tr>
                                <td class="td_left">出生日期</td>
                                <td class="td_right">
                                    <input id="birthday" type="date" name="data">
                                </td>    
                            </tr>
                            
                            <tr>
                                <td class="td_left">验证码</td>
                                <td class="td_right">
                                    <input id="checkcode" name="verification " />
                                    <img id="img_check" src="img/QQ截图20220802162029.png" width="100px" align="right" />
                                </td>
                            </tr>
                            
                            <tr>
                                <td colspan="2" align="center">
                                <input type="submit" id="btn_sub" value="注册" align="center" />
                                </td>
                            </tr>
                        </form>
                    </table>
                </div>
            </div>
            
            <div class="rg_right">
                <p>已有账号？<a href="#">立即登录</p>
            </div>
        </div>
        
        
        
    </body>
</html>
复制代码

运行结果

posted @ 2022-11-16 17:20  想见玺1面  阅读(63)  评论(0)    收藏  举报