效果如下:(背景图来源于百度百科,若有侵权,请联系删除)
代码如下:
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 width: 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 width: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>