分析：
代码实现：
<!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>