HTML个⼈⽹页的实现
效果如下：(背景图来源于百度百科，若有侵权，请联系删除)
代码如下：
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" > 43<h1 >个⼈⽹页</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="www.baidu">百度</a></td>
51</tr>
52<tr>
53<td><a href="www.bilibili/">哔哩哔哩</a></td>
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" > 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" >注册</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。