1. 程式人生 > >HTML+CSS專案課2:利用table和表單製作“網易郵箱註冊頁面”

HTML+CSS專案課2:利用table和表單製作“網易郵箱註冊頁面”

知識點: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">&nbsp;</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">&nbsp;</td>
                                    <td><input type="checkbox" name="ty" />	我已閱讀並接受<a href="#">"服務條款"</a>和<a href="#">"隱私權保護和個人資訊利用政策"</a></td>
                                </tr>
                            	<tr>
                                	<td>&nbsp;</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>