注册界面样图
代码实现
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>