效果如下：
背景图片、用户名及密码的图片如下：（背景图片来源于百度百科，用户名及密码的图片来源于阿里巴巴矢量图标库，若有侵权，请联系删除）
background.jpg
Username.png
Password.png
工程目录如下：
代码如下：
Login.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>鲜花礼品登录界面</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 html {
12 height: 100%;
13 100%;
14 overflow: hidden;
15 margin: 0;
16 padding: 0;
17 background: url(image/background.jpg) no-repeat 0px 0px;
18 background-repeat: no-repeat;
19 background-size: 100% 100%;
20 -moz-background-size: 100% 100%;
21 }
22
23 body {
24 display: flex;
25 align-items: center;
26 justify-content: center;
27 height: 100%;
28 }
29
30 #Login {
31 37%;
32 display: flex;
33 justify-content: center;
34 align-items: center;
35 height: 300px;
36 background-color: #FFEFDB;
37 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
38 border-radius: 5px;
39 }
40
41 input {
42 margin-left: 15px;
43 border-radius: 5px;
44 border-style: hidden;
45 height: 30px;
46 140px;
47 background-color: rgba(216, 191, 216, 0.5);
48 outline: none;
49 color: #f0edf3;
50 padding-left: 10px;
51 }
52
53 .button {
54 border-color: cornsilk;
55 background-color: rgba(100, 149, 237, .7);
56 color: aliceblue;
57 border-style: hidden;
58 border-radius: 5px;
59 100px;
60 height: 31px;
61 font-size: 16px;
62 }
63 </style>
64 </head>
65
66 <body background="background.jpg" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed;">
67 <div id="Login">
68 <form action="" id="form">
69
70 <h1 style="text-align: center;color: #F08080;font-family: 华文楷体">登录</h1>
71 <p>
72 <img src="image/Username.png" style="height: 30px">
73 <input id="ussernam" type="text">
74 </p>
75
76 <p>
77 <img src="image/Password.png" style="height: 30px">
78 <input id="password" type="password">
79 </p>
80
81 <div style="text-align: center;margin-top: 30px;">
82 <input type="submit" class="button" value="进入">
83 <a href="Register.html"><input type="button" class="button" value="注册"></a>
84 </div>
85
86 </form>
87 </div>
88 </body>
89 </html>
Register.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>鲜花礼品注册界面</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 html {
13 height: 100%;
14 100%;
15 overflow: hidden;
16 margin: 0;
17 padding: 0;
18 background: url(image/background.jpg) no-repeat 0px 0px;
19 background-repeat: no-repeat;
20 background-size: 100% 100%;
21 -moz-background-size: 100% 100%;
22 }
23
24 body {
25 display: flex;
26 align-items: center;
27 justify-content: center;
28 height: 100%;
29 }
30
31 #contain {
32 37%;
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 height: 300px;
37 background-color: #FFEFDB;
38 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
39 border-radius: 5px;
40 }
41
42 p,
43 .sexDiv {
44 margin-top: 10px;
45 margin-left: 20px;
46 color: #F08080;
47 }
48
49 .sexDiv>input,
50 .hobby>input {
51 30px;
52 height: 17px;
53 }
54
55 input,
56 select {
57 margin-left: 15px;
58 border-radius: 5px;
59 border-style: hidden;
60 height: 30px;
61 140px;
62 background-color: rgba(216, 191, 216, 0.5);
63 outline: none;
64 color: #F08080;
65 padding-left: 10px;
66 }
67
68 .button {
69 border-color: cornsilk;
70 background-color: rgba(100, 149, 237, .7);
71 color: aliceblue;
72 border-style: hidden;
73 border-radius: 5px;
74 100px;
75 height: 31px;
76 font-size: 16px;
77 }
78
79 .introduce>textarea {
80 background-color: rgba(216, 191, 216, 0.5);
81 border-style: hidden;
82 outline: none;
83 border-radius: 5px;
84 }
85
86 b {
87 margin-left: 50px;
88 color: #FFEB3B;
89 font-size: 10px;
90 font-weight: initial;
91 }
92 </style>
93 </head>
94
95 <body>
96 <div id="contain">
97 <form action="">
98 <h1 style="text-align: center;color: #F08080;font-family: 华文楷体">注册</h1>
99 <p>用户名:<input id="username" type="text" autofocus required></p>
100
101 <p>密码:<input id="password" type="password" required></p>
102
103 <p>确认密码:<input id="surePassword" type="password" required></p>
104
105 <p>
106 用户类型:
107 <select name="type" id="userType">
108 <option value="0">请选择</option>
109 <option value="1">游客</option>
110 <option value="2">普通用户</option>
111 <option value="3">管理员</option>
112 </select>
113 </p>
114 <p style="text-align: center;">
115 <input type="submit" class="button" value="提交">
116 <input type="reset" class="button" value="重置">
117 </p>
118 </form>
119 </div>
120 </body>
121 </html>
参考博客：https://blog.csdn.net/qq_44204058/article/details/108678174