參考： 韓順平 輕鬆搞定網頁設計
登陸首頁效果圖
在這裏，將整個界面先劃成3*3表格，
A00 A01 A02
A10 A11A12
A20A21A22
其中只有A11非空。而且，A11是一個3*2的表格，設爲B
B00B01
B10B11
B20B21
其中除了B11非空，其他也是空的。而B11纔是真正登陸主頁面所處的位置，也把它劃分爲表格，設爲4*2的表格C
C00C01 ---> 用戶名 文本框
C10C11 ---> 密碼框 文本框
C20C21 ---> 提交查詢 重置
C30C31 ---> 找回密碼 註冊新用戶
具體的login.html 如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<table width = "100%" >
<tr height = "150px"><td> </td><td> </td><td> </td></tr>
<tr><td width = "350px"> </td><td><table width = "321px" height = "246px" background = "0.jpg">
<tr height = "60px"><td> </td><td> </td> </tr>
<tr><td width = "100px"> </td><td><form action = "main.html" method = "post">
<table height = "100%">
<tr><td>用戶名</td><td><input type = "text" name ="username"></td></tr>
<tr><td>密碼框</td><td><input type = "password" name ="pwd"></td></tr>
<tr><td colspan = "2"><input type = "submit" name ="進入郵箱"><input type = "reset" name ="重新填寫"></td></tr>
<tr><td colspan = "2"><a href = "#">找回密碼</a><a href = "#">註冊新用戶</a></td></tr>
</table>
</form>
</td></tr>
<tr><td> </td><td> </td> </tr>
</table></td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>
</body>
</html>
一點提交，就跳到main.html。main.html 內容以後會根據項目需要自行填充。