代码:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
body{
background: #FEFECC;
}
.registerBox{
width: 630px;
font: 14px arial,宋体,sans-serif,"Microsoft YaHei",tahoma;
border: ridge 1px;
}
.registerBox .odd{
background: #CCCCCC;
}
.registerBox .even{
background: #FEFECC;
}
.registerBox td{
height: 33px;
border-top: ridge 1px;
border-bottom: ridge 1px;
}
.registerBox .title{
width: 80px;
}
.registerBox .textBox{
width: 98px;
height: 14px;
border: solid 1px #AAAAB2;
}
.registerBox .year{
width: 58px;
}
.registerBox .btn{
text-align: center;
}
.registerBox .authImg{
width: 48px;
height: 23px;
background: #gray;
vertical-align: middle;
}
</style>
</head>
<body>
<form action="post">
<table class="registerBox" cellpadding="0" cellspacing="0">
<tr class="odd">
<td class="title">用户名:</td>
<td>
<input class="textBox" type="text" />
<span class="hint">请使用英文和数字,并以数字开头</span>
</td>
</tr>
<tr class="even">
<td class="title">密码:</td>
<td>
<input class="textBox" type="password" />
<span class="hint">请使用5~12位</span>
</td>
</tr>
<tr class="odd">
<td class="title">确认密码:</td>
<td>
<input class="textBox" type="password" />
<span class="hint">重新输入一次密码</span>
</td>
</tr>
<tr class="even">
<td class="title">生日:</td>
<td>
<input class="year" type="text" /> 年
<select>
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
</select> 月
<select>
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>
</select> 日
</td>
</tr>
<tr class="odd">
<td class="title">证件号码:</td>
<td>
<input class="textBox" type="text" />
<span class="hint">请正确填写,此号码为我们给您提供服务的身份凭证,且不能修改</span>
</td>
</tr>
<tr class="even">
<td class="title">提示问题:</td>
<td>
<select>
<option>我最爱的人的名字</option>
<option>我父亲的生日</option>
<option>我的母校</option>
</select>
<span class="hint">请选择你的提示问题</span>
</td>
</tr>
<tr class="odd">
<td class="title">提示答案:</td>
<td>
<input class="textBox" type="text" />
<span class="hint">请使用4~9个中文字或8~18位英文和数字</span>
</td>
</tr>
<tr class="even">
<td class="title">验证码:</td>
<td>
<input class="textBox" type="text" />
<span class="hint">请输入右边的附加码</span>
<img src="" class="authImg"/>
</td>
</tr>
<tr class="odd">
<td class="btn" colspan="2">
<input type="button" value="提交" />
<input type="button" value="重置" />
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
</script>
</html>
效果:
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/38dbb6fd5266d0165afe229d962bd40734fa359b?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)