基于Html+CSS实现的渐变色背景简易登录注册页面。
Html + CSS实现的简易渐变色背景登录注册页面。
获取渐变色css代码的网站
1. login.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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: #c6ffdd;
background: -webkit-linear-gradient(to right,
#f7797d,
#fbd786,
#c6ffdd);
background: linear-gradient(to right,
#f7797d,
#fbd786,
#c6ffdd);
}
.log {
width: 300px;
height: 400px;
margin: 20vh auto 0 auto;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding-top: 50px;
padding-left: 40px;
}
.title {
color: #ffffff;
margin-bottom: 30px;
font-size: 30px;
width: 20%;
margin-left: 30%;
}
input {
width: 250px;
height: 25px;
margin-bottom: 20px;
outline: none;
border: 0;
padding: 6px;
font-size: 10px;
border-radius: 3px;
}
.tip {
color: #fff;
margin-bottom: 5px;
}
.btn-log {
width: 260px;
height: 40px;
background-color: #539CFE;
border: 0;
margin-top: 20px;
margin-bottom: 30px;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.btn-log:hover {
background-color: #94FFB2;
}
.to-reg {
font-size: 14px;
}
.to-reg>a {
text-decoration: none;
color: #4239c0;
}
.to-reg>a:hover {
color: #539CFE;
}
</style>
</head>
<body>
<div class="log">
<div class="title">登录</div>
<form action="#" method="post" name="logform">
<div class="tip">用户名</div>
<div>
<input class="username" type="text" name="username" placeholder="请输入用户名">
</div>
<div class="tip">密码</div>
<div>
<input class="password" type="password" name="password" placeholder="请输入密码">
</div>
<button class="btn-log" type="submit">登录</button>
</form>
<div class="to-reg">没有账号？<a href="register.html">立即注册</a></div>
</form>
</div>
</body>
</html>
|
效果：
2. register.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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: #a8ff78;
background: -webkit-linear-gradient(to right, #78ffd6, #a8ff78);
background: linear-gradient(to right, #78ffd6, #a8ff78);
}
.reg {
width: 300px;
height: 400px;
margin: 20vh auto 0 auto;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding-top: 50px;
padding-left: 40px;
}
.title {
color: #ffffff;
margin-bottom: 30px;
font-size: 30px;
width: 20%;
margin-left: 30%;
}
input {
width: 250px;
height: 25px;
margin-bottom: 20px;
outline: none;
border: 0;
padding: 6px;
font-size: 10px;
border-radius: 3px;
}
.tip {
color: #fff;
margin-bottom: 5px;
}
.btn-reg {
width: 260px;
height: 40px;
background-color: #539CFE;
border: 0;
margin-top: 20px;
margin-bottom: 30px;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.btn-reg:hover {
background-color: #F4B784;
}
.to-log {
font-size: 14px;
}
.to-log>a {
text-decoration: none;
color: #4239c0;
}
.to-log>a:hover {
color: #539CFE;
}
</style>
</head>
<body>
<div class="reg">
<div class="title">注册</div>
<form action="#" method="post" name="regform">
<div class="tip">用户名</div>
<div>
<input class="username" type="text" name="username" placeholder="请输入用户名">
</div>
<div class="tip">密码</div>
<div>
<input class="password" type="password" name="password" placeholder="请输入密码">
</div>
<button class="btn-reg" type="submit">注册</button>
</form>
<div class="to-log">已有账号？<a href="login.html">前往登录</a></div>
</form>
</div>
</body>
</html>
|
效果：
