原型效果如图：
实际浏览器效果：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注册页面</title> </head> <body> <h3>青春不常在，抓紧谈恋爱</h3> <table width="600" border="1"> <!-- 第一行 --> <tr> <td>性别:</td> <td> <input type="radio" name="sex" id="nan"><label for="nan">男</label> <input type="radio" name="sex" id="nv"><label for="nv">女</label> </td> </tr> <!-- 第2行 --> <tr> <td>生日</td> <td> <select name="" id=""> <option value="">请选择年份</option> <option value="">1997</option> <option value="">1998</option> <option value="">1999</option> </select> </td> <td> <select name="" id=""> <option value="">请选择月份</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </td> <td> <select name="" id=""> <option value="">请选择日期</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </td> </tr> <!-- 第3行 --> <tr> <td>所在地區</td> <td> <input type="text" value="杭州"> </td> </tr> <!-- 第4行 --> <tr> <td>婚姻狀況</td> <td> <input type="radio" name="marry" id="weihun"> <label for="weihun">未婚</label> <input type="radio" name="marry" id="weihun" checked="checked"><label for="weihun">已婚</label> </td> </tr> <!-- 第5行 --> <tr> <td>学历</td> <td> <input type="text" value="本科"> </td> </tr> <!-- 第6行 --> <tr> <td>喜歡的內型</td> <td> <input type="checkbox" name="love">漂亮 <input type="checkbox" name="love">戴眼鏡 <input type="checkbox" name="love">文靜 <input type="checkbox" name="love" checked="checked">都喜歡 </td> </tr> <!-- 第7行 --> <tr> <td>个人介紹</td> <td> <textarea >个人簡介</textarea> </td> </tr> <!-- 第8行 --> <tr> <td></td> <td> <input type="submit" value="免费注册"> </td> </tr> <tr> <td></td> <td> <input type="checkbox" checked="checked"> 我同意註冊條款 </td> </tr> <tr> <td></td> <td> <a href="#">我已註冊，立即登錄</a> </td> </tr> <!-- 第9行 --> <tr> <td></td> <td> <h5>我承若</h5> <ul> <li>年满18周岁</li> <li>报着严肃态度</li> <li>寻找另一半</li> </ul> </td> </tr> </table> </body> </html>