注冊界面樣圖
代碼實現
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>