html+css的用户注册界面

注册界面样图

代码实现

html部分

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <link rel="stylesheet" href="register.css">
 6     <title>注册界面</title>
 7 </head>
 8 <body>
 9     <form action="" method="" onsubmit="">
10     <table border="26" align="center" width="50%">
11     <caption>用户注册</caption>
12     <tr>
13         <td align="right">
14             <sup><font color="red">*</font></sup>用户名：
15         </td>
16         <td><input type="text" name="username" id="username" class="input_class" onblur="checkUsername(this)" />
17         <span id="username_span">用户名由3-5个字符组成</span></td>
18 
19     </tr>
20     <tr>
21         <td align="right">
22             <sup><font color="red">*</font></sup>密码：
23         </td>
24         <td><input type="password" name="password" id="password" class="input_class" onblur="checkPassword(this)" />
25         <span id="password_span">请输入8-12位密码</span>
26         </td>
27     </tr>
28     <tr>
29         <td align="right">
30             <sup><font color="red">*</font></sup>Email：
31         </td>
32         <td><input type="text" name="Email" id="Email" class="input_class" onblur="checkEmail(this)" /><span id="Email_span" >格式示例：xxxxxxxx@163.com</span>
33         </td>    
34     </tr>
35     <tr>
36                     <td align="right">
37                         <sup><font color="red">*</font></sup>真实姓名：
38                     </td>
39                     <td><input type="text" name="realName" id="realName" class="input_class" onblur="checkName(this)" /><span id="realName_span">由2-5个中文组成</span></td>                    
40                 </tr>
41                 
42                 <tr>
43                     <td align="right">
44                         <sup><font color="red">*</font></sup>省份：
45                     </td>
46                     <td><select name="province" id="province" onblur="checkProvince(this)">
47                         <option value="--请选择--">--请选择--</option>
48                         <option value="四川">四川</option>
49                         <option value="上海">上海</option>
50                         <option value="北京">北京</option>
51                         <option value="广东">广东</option>
52                         <option value="广西">广西</option>
53                         <option value="海南">海南</option>
54                         <option value="湖南">湖南</option>
55                         <option value="湖北">湖北</option>
56                         <option value="云南">云南</option>
57                         <option value="贵州">贵州</option>
58                     </select><span id="province_span">请选择省份</span></td>                    
59                 </tr>
60                 <tr>
61                     <td align="center" colspan="2">  <!-- 合并两列 -->
62                         <input type="submit" class="aaa" value="注册" />
63                         <input type="reset" class="aaa" value="重置" />
64                     </td>
65                 </tr>
66                 
67 
68 
69     </table>
70 
71 
72 
73     </form>
74 </body>
75 </html>

css部分

 1 <span style="font-size:14px;">
 2 .input_class {  /*设置class属性名称为input_class的标签内容*/
 3     width:250px;
 4     height:16px;    
 5 }
 6  
 7 caption{        /*设置caption标签内容*/
 8     font-size:30px;
 9     color:red;
10     text-shadow: yellow 6px 0px 5px; 
11     font-stretch: wider;
12     font-weight: 900; 
13 }
14  
15 .aaa{          /*设置class属性名称为aaa的标签内容*/
16     font-size:16px;
17     font-weight: bold;
18 }
19  
20 </span>