本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS)，这个案例充分使用到了表单标签，这对于刚学习表单标签的朋友练习难度刚刚好，接下来我们来看看如何实现这个页面的效果吧。

这里是网页页面+图片素材，需要的自取噢：

链接：https://777nx.lanzouw.com/iXq6P2gfih5e
提取码：2024

案例图

image-20241127112248579

源代码

HTML代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千年之恋</title>
    <link rel="stylesheet" href="./千年之恋.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <img src="./images/logo.jpg" alt="">
    </div>

    <!-- 导航 -->
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">会员</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">注册</a></li>
        </ul>
    </div>

    <!-- 横幅 -->
    <div class="banner">
        <img src="./images/banner.jpg" alt="">
    </div>

    <!-- 主体 -->
    <div class="content">
        <h2 class="step">注册步骤：</h2>
        <form action="#" method="POST">
            <h3>您的账号信息：</h3>
            <table>
                <tr>
                    <td><label>注册方式：</label></td>
                    <td>
                        <label><input type="radio" name="mode" value="email"> E-mail注册</label>
                        <label><input type="radio" name="mode" value="phone"> 手机号码注册</label>
                    </td>
                </tr>
                <tr>
                    <td><label for="email">注册邮箱：</label></td>
                    <td><input type="text" id="email" name="email"></td>
                </tr>
                <tr>
                    <td><label for="phone">注册手机：</label></td>
                    <td><input type="text" id="phone" name="phone"></td>
                </tr>
                <tr>
                    <td><label for="password">登录密码：</label></td>
                    <td><input type="text" id="password" name="password"></td>
                </tr>
                <tr>
                    <td><label for="verify_password">验证密码：</label></td>
                    <td><input type="text" id="verify_password" name="verify_password"></td>
                </tr>
                <tr>
                    <td><label for="nickname">昵称：</label></td>
                    <td><input type="text" id="nickname" name="nickname"></td>
                </tr>
            </table>

            <h3>您的个人信息：</h3>
            <table>
                <tr>
                    <td><label>性别：</label></td>
                    <td>
                        <label><input type="radio" name="sex" value="male"> 男</label>
                        <label><input type="radio" name="sex" value="female"> 女</label>
                    </td>
                </tr>
                <tr>
                    <td><label for="education">学历：</label></td>
                    <td>
                        <select id="education" name="education">
                            <option value="" disabled selected>请选择</option>
                            <option value="1">中职/高中</option>
                            <option value="2">专科/本科</option>
                            <option value="3">硕士研究生</option>
                            <option value="4">博士研究生</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="city">所在城市：</label></td>
                    <td>
                        <select id="city" name="city">
                            <option value="" disabled selected>请选择</option>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                            <option value="3">广州</option>
                            <option value="4">深圳</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label>兴趣爱好：</label></td>
                    <td>
                        <label><input type="checkbox" name="hobby" value="1"> 足球</label>
                        <label><input type="checkbox" name="hobby" value="2"> 篮球</label>
                        <label><input type="checkbox" name="hobby" value="3"> 游泳</label>
                        <label><input type="checkbox" name="hobby" value="4"> 唱歌</label>
                        <label><input type="checkbox" name="hobby" value="5"> 跑步</label>
                        <label><input type="checkbox" name="hobby" value="6"> 瑜伽</label>
                        <label><input type="checkbox" name="hobby" value="7"> 其他</label>
                    </td>
                </tr>
                <tr>
                    <td><label for="introduction">自我介绍：</label></td>
                    <td>
                        <textarea id="introduction" name="introduction" cols="60" rows="8"
                            placeholder="评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button class="btn"></button>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <p>Copyright &copy; 2024 qingnianzhilian.com, ALL rights reserved.</p>
        <p>2024, 版权所有 千年之恋 萌ICP备20245025号</p>
    </div>
</body>

</html>

CSS代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 980px;
    margin: 0 auto;
    font-family: "微软雅黑";
    font-size: 14px;
}

ul {
    list-style: none;
}

a {
    color: white;
    text-decoration: none;
}

.header {
    padding: 20px 0 10px;
}

.nav {
    width: 100%;
    height: 48px;
    background-color: #fe668f;
}

.nav ul {
    display: flex;
    justify-content: space-around;
}

.nav ul li {
    flex: 1;
    text-align: center;
    line-height: 48px;
}

.nav ul li:hover {
    background-color: #fe9ab5;
}

.content {
    height: 934px;
    padding-left: 150px;
    background: url(./images/content_bg.jpg) no-repeat;
}

.content .step {
    height: 80px;
    font-size: 20px;
    line-height: 80px;
    color: #dd8787;
    background: url(./images/step.jpg) no-repeat;
    background-position: 120px;
}

.content h3 {
    width: 444px;
    height: 45px;
    font-size: 20px;
    color: #dd8787;
    line-height: 45px;
    border-bottom: 2px solid #dd8787;
}

.content td {
    height: 50px;
    color: #dd8787;
}

.content td:first-child {
    width: 120px;
    text-align: right;
}

.content td input[type="text"] {
    width: 320px;
    height: 28px;
    border: 1px solid #dd8787;
}

.content td input[type="radio"] {
    margin-left: 10px;
}

.content td input[type="checkbox"] {
    margin-left: 5px;
}

.content td select {
    width: 171px;
    border: 1px solid #dd8787;
    color: #aaa;
}

.content td textarea {
    width: 380px;
    border: 1px solid #dd8787;
    resize: none;
    color: #aaa;
    padding: 20px;
}

.btn {
    border: none;
    width: 409px;
    height: 76px;
    background: url(./images/btn.jpg) center center no-repeat;
}

.footer {
    width: 100%;
    height: 68px;
    color: #fff;
    background-color: #de668f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

如果感兴趣可以去练习一下，不过这些都是学校布置的前端实验课作业，也均是我自己编写的代码，非常初学，现在看这些代码也感觉非常好笑，不过自己毕竟是主学后端，所以前端能做出来这些页面也挺高兴的了。

接下来就是效果展示了，如果能做到下面图片的效果即可，不必太追求完美。

效果呈现

image-20241127111737317