HTML+CSS專案課2：利用table和表單製作“網易郵箱註冊頁面”
阿新 • • 發佈：2018-11-11
知識點：html文件基本結構、table標籤佈局、表單標籤的使用、img標籤、a標籤、p標籤等常見標籤的使用。
製作網頁效果：
網頁製作思路：
1、將整個網頁分成4部分：3個表格+底部段落文字（3個表格設定同樣的寬度，水平居中，邊框為0等屬性）
2、表格1：一個1行2列的表格，左邊單元格放logo圖，右邊單元格放“幫助”
3、表格2：一個1行1列的表格，單元格里放圖片
4、表格3：一個1行1列的表格，在該單元格中建立一個表單，然後在表單中建立一個8行1列的表格。
5、使用p標籤，製作底部版權文字
製作建議：先在草稿紙上畫好表格，設定好內容分配，然後再寫HTML文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>網易郵箱註冊-王迪</title> </head> <body> <table width="962px" border="0" align="center" cellpadding="0" cellspacing="0"><!--建立一個1行2列的表格，用來放logo--> <tr> <td><img src="images/logo.gif" /></td> <td align="right">幫助</td> </tr> </table><!--表格1結束--> <br /> <table width="962px" border="0" align="center" cellpadding="0" cellspacing="0"><!--建立一個1行1列的表格，用來放歡迎圖片--> <tr> <td><img src="images/title.jpg" /></td> </tr> </table><!--表格2結束--> <table width="962px" border="1px" align="center" cellpadding="40px" cellspacing="0"><!--建立一個1行1列的表格，用來放表單資訊--> <tr> <td> <form name="form1" action="" method="post"> <table width="100%" border="0" cellspacing="0" cellpadding="8"><!--在表單中建立一個8行1列的表格--> <tr> <td bgcolor="#CCCCCC">建立您的賬號</td> </tr><!--第一行結束--> <tr><!--第二行開始--> <td> <table width="100%" border="0" cellspacing="0" cellpadding="8"><!--在第二行的單元格中，建立一個3行2列的表格--> <tr> <td align="right" width="200px">使用者名稱：</td> <td><input type="text" name="userName" /></td> </tr> <tr> <td align="right">密碼：</td> <td><input type="password" name="userPwd" /></td> </tr> <tr> <td align="right">再次輸入密碼：</td> <td><input type="password" name="rePwd" /></td> </tr> </table> </td> </tr><!--第二行結束--> <tr> <td bgcolor="#CCCCCC">安全資訊設定（以下資訊非常重要，請謹慎填寫）</td> </tr><!--第三行結束--> <tr><!--第四行開始--> <td> <table width="100%" border="0" cellspacing="0" cellpadding="8"><!--在第四行的單元格里，建立一個5行2列的表格，用來存放賬號資訊--> <tr> <td align="right" width="200px">密碼保護問題：</td> <td> <select> <option>請選擇密碼提示問題</option> <option>我的出生地是</option> <option>我的母校是</option> </select> </td> </tr> <tr> <td align="right">密碼保護問題答案：</td> <td><input type="text" name="anser"/></td> </tr> <tr> <td align="right">性別：</td> <td><input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女</td> </tr> <tr> <td align="right">出生日期：</td> <td> <select name="year"> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> </select>年 <select name="month"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>月 <select name="data"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select>日 </td> </tr> <tr> <td align="right">手機號碼：</td> <td><input type="text" name="phone" /></td> </tr> </table> </td> </tr><!--第四行結束--> <tr> <td bgcolor="#CCCCCC">註冊驗證</td> </tr><!--第五行結束--> <tr> <td><!--在第六行的單元格中，插入一個2行2列的表格--> <table width="100%" border="0" cellspacing="0" cellpadding="8"> <tr> <td align="right" width="200px"> </td> <td><img src="images/verycode.gif" /><a href="#">看不清楚，換一張</a></td> </tr> <tr> <td align="right">請輸入上面的字元：</td> <td><input type="text" name="yzm" /></td> </tr> </table> </td> </tr><!--第六行結束--> <tr> <td bgcolor="#CCCCCC">服務條款</td> </tr><!--第七行結束--> <tr> <td><!--在第八行的單元格里，建立一個2行2列的表格--> <table width="100%" border="0" cellspacing="0" cellpadding="8"> <tr> <td align="right" width="200px"> </td> <td><input type="checkbox" name="ty" /> 我已閱讀並接受<a href="#">"服務條款"</a>和<a href="#">"隱私權保護和個人資訊利用政策"</a></td> </tr> <tr> <td> </td> <td><input type="image" src="images/button.gif" /></td> </tr> </table> </td> </tr><!--第八行結束--> </table> </form> </td> </tr> </table><!--表格3結束--> <center><p>關於網易 郵箱官方部落格 財富郵 精美賀卡 舉報違法資訊 客戶服務<br /> 隱私政策 | 網易公司版權所有 © 1997-2011</p></center> </body> </html>