HTML_案例(注册案例CSS版)

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>会员注册</title>
     <style>
         /*使用通配符设置margin设置文字行于行之间的宽度*/
         *{
             margin: 5px;
         }
         /*设置全页背景*/
         body{
             background: url("./img/register_bg.png") no-repeat center;
             line-height: 1;
         }

         /*绘制登录框*/
         .beijing{
             border: 5px solid #EEEEEE;
             width: 1000px;
             height: 700px;
             margin: auto;
             background: white;
         }

         /*设置左上字体*/
         .d1{
             color: #FFD266;
         }
         .d2{
             color: #ABA9A7;
         }

         /*设置浮动调格式*/
         .zuo{
             float: left;
         }
         .zhong{
             float: left;
         }
         .you{
             float: right;
         }

         /*设置右边字体*/
         #p1{
             font-size: 10px;
         }
         #p2{
             color: red;
             font-size: 10px;
         }

         /*设置中间格式*/
         /*设置文字右对齐颜色灰色*/
         .td_left{
             width: 100px;
             height: 45px;
             text-align: right;
             color: #ABA9A7;
         }

         /*设置文本框长度*/
         .td_right{
             padding-left: 50px;
             box-sizing: border-box;
         }
         #username,#password,#email,#name,#tel,#birthday,#checkcode{
             width: 251px;
             height: 32px;
             border: 1px solid #ABA9A7;
             /*设置边框圆角*/
             border-radius: 10px;
         }
         #checkcode{
             width: 100px;
         }

         /*设置按钮*/
         #td_sub{
             width: 100px;
             height: 30px;
             background: #FFD266;
         }

     </style>
 </head>
 <body>
 <div class="beijing">
     <div class="zuo">
         <p class="d1">新用户注册</p>
         <p class="d2">USER REGISTER</p>
     </div>

     <div class="zhong">
         <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 src="img/verify_code.jpg">
                 </td>
             </tr>

             <tr>
                 <td colspan="2" align="center"><input id="td_sub" type="submit" value="注册"></td>
             </tr>
         </table>
     </div>

     <div class="you">
         <p id="p1">已有账号？<a id="p2" href="#">立即登录</a></p>
     </div>
 </div>
 </table>
 </body>
 </html>