效果如下:(背景图来源于百度百科,若有侵权,请联系删除)

代码如下:
first.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>个人网页</title>
6
7 <style>
8 .biaoge{
9 position: absolute;
10 bottom: 265px;
11 100%;
12 height: 100px;
13 text-align:center;
14 }
15 </style>
16
17 <!-- a:link,定义正常链接的样式;
18 a:visited,定义已访问过链接的样式;
19 a:hover,定义鼠标悬浮在链接上时的样式;
20 a:active,定义鼠标点击链接时的样式。 -->
21 <style>
22 a:link {
23 color:#FFFFFF;
24 font-size: 28px;
25 text-decoration:none;
26 }
27 a:visited {
28 color:#FFFFFF;
29 text-decoration:none;
30 }
31 a:hover {
32 color:#000000;
33 text-decoration:none;
34 }
35 a:active {
36 color:#FFAEB9;
37 text-decoration:none;
38 }
39 </style>
40
41 </head>
42 <body background="background.jpg" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;">
43 <h1 style="text-align:center;padding-top: 100px">个人网页</h1>
44 <div class="biaoge">
45 <table align="center">
46 <tr>
47 <td><a href="../实验一/Submit_Form.html">提交注册</a></td>
48 </tr>
49 <tr>
50 <td><a href="http://www.baidu.com">百度</a></td>
51 </tr>
52 <tr>
53 <td><a href="https://www.bilibili.com/">哔哩哔哩</a></td>
54 </tr>
55 </table>
56 </div>
57 </body>
58 </html>
Submit_Form.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>表单提交</title>
6 </head>
7 <body background="background.jpg" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;">
8 <style type="text/css">
9 .mytable{
10 500px;
11 height:500px;
12 margin:0 auto;
13 }
14 </style>
15 <table border="1px" class="mytable" width="500px" height="300px" cellpadding="0px" cellspacing="0px" align="center">
16 <!-- 10行3列 -->
17 <tr>
18 <td colspan='3' align="center" style="color:red;">注册</td>
19 </tr>
20 <tr>
21 <td width="33.3%" align="center">用户名</td>
22 <td colspan="2"><input type="text" name="name" id="name" ></td>
23 </tr>
24 <tr>
25 <td width="33.3%" align="center">头像</td>
26 <td colspan="2"><input type="file"></td>
27 </tr>
28 <tr>
29 <td width="33.3%" align="center">密码</td>
30 <td colspan="2"><input type="password" name="password" id="password"></td>
31 </tr>
32 <tr>
33 <td width="33.3%" align="center">性别</td>
34 <td colspan='2'>
35 <input type="radio" name="sex" value="男" checked="checked">男
36 <input type="radio" name="sex" value="女">女
37 </td>
38 </tr>
39 <tr>
40 <td width="33.3%" align="center">生日</td>
41 <td colspan='2'>
42 <select name="birth" id="birth">
43 <option value="1">1月</option>
44 <option value="2">2月</option>
45 <option value="3">3月</option>
46 <option value="4">4月</option>
47 <option value="5">5月</option>
48 <option value="6">6月</option>
49 <option value="7">7月</option>
50 <option value="8">8月</option>
51 <option value="9">9月</option>
52 <option value="10">10月</option>
53 <option value="11">11月</option>
54 <option value="12">12月</option>
55 </select>
56 </td>
57 </tr>
58 <tr>
59 <td width="33.3%" align="center">出生日期</td>
60 <td colspan="2"><input type="text" name="birth" id="birth"></td>
61 </tr>
62 <tr>
63 <td width="33.3%" align="center">电话</td>
64 <td colspan="2"><input type="text" name="phone" id="phone" ></td>
65 </tr>
66 <tr>
67 <td width="33.3%" align="center">邮箱</td>
68 <td colspan="2"><input type="text" name="email" id="email" ></td>
69 </tr>
70 <tr>
71 <td colspan='3' align="center">
72 <a href="../实验一/first.html">
73 <input type="button" value="提交" />
74 </a>
75 <input type="reset" value="重置" />
76 </td>
77 </tr>
78 </table>
79 </body>
80 </html>
