最終效果
![]()
實現代碼
<!DOCTYPE html>
<html>
<head>
<title>註冊頁</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
font-size: 15px;
}
.red {
margin: 0 auto;
width: 650px;
color: #D22;
}
.blue {
font-weight: bold;
color: #22F;
background-color: #DCE2EE;
}
table {
margin: 0 auto;
width: 650px;
border: 1px solid #DCE2EE;
}
table tr td {
padding: 4px;
}
.left {
width: 120px;
text-align: right;
}
.center {
width: 162px;
}
.right {
padding: 10px;
width: 300px;
background-color: #F2F2F2;
}
input {
width: 160px;
height: 22px;
margin: 2px;
border: 1px solid #999;
outline: none;
background-color: #F5F5F5;
}
a {
color: #22F;
}
.normal {
font-weight: normal;
}
hr {
border: 1px solid #DCE2EE;
}
.tocenter {
text-align: center;
}
.submit {
width: 100px;
height: 32px;
background-color: #2C3;
color: #FFF;
font-weight: bold;
border: 0;
}
</style>
</head>
<body>
<form>
<div class="red">請注意：帶有“*”的項目必須填寫。</div>
<table>
<tr>
<td class="blue" colspan="3">請填寫您的用戶名：</td>
</tr>
<tr>
<td class="left"><span class="red">*</span>用戶名：</td>
<td class="center"><input type="text" name="username" placeholder="請輸入用戶名"><br /><a href="#">查看是否被佔用</a></td>
<td class="right">6~18位，由字母、數字或下劃線組成，只能以數字或字母開頭，例如：ge_165</td>
</tr>
<tr>
<td class="blue" colspan="3">請填寫安全設置：<span class="normal">（安全設置用於驗證賬號和找回密碼）</span></td>
</tr>
<tr>
<td colspan="3"><div class="red">以下信息對您賬號的安全極爲重要，請您務必認真填寫。</div></td>
</tr>
<tr>
<td class="left"><span class="red">*</span>登錄密碼：<br /><span class="red">*</span>確認密碼：</td>
<td class="center"><input type="password" name="pwd"><br /><input type="password" name="pwd2"><br /></td>
<td class="right">6~16位，由字母、數字或特殊字符組成，區分字母大小寫</td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
<tr>
<td class="left"><span class="red">*</span>密碼提示問題：<br /><span class="red">*</span>密碼提示答案：</td>
<td class="center"><input type="text" name="question"><br /><input type="text" name="ans"><br /></td>
<td class="right">忘記密碼時，用於找回密碼，例如，問題是“我的女朋友是誰？”，答案爲“Mark”。問題長度不大於36個字符，一個漢字佔兩個字符。答案長度不大於36個字符，區分大小寫。</td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
<tr>
<td class="left"><span class="red">*</span>手機號碼：<br /><span class="red">*</span>郵箱地址：</td>
<td class="center"><input type="text" name="code"><br /><input type="text" name="code2"><br /></td>
<td class="right">忘記密碼時，可以通過手機號碼或郵箱找回密碼</td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
<tr>
<td class="tocenter" colspan="3">
<input class="submit" type="submit" name="submit" title="註冊" value="註冊">
</td>
</tr>
</table>
</form>
</body>
</html>
