|
1
2
|
<!— font–awesome —>
<link href=“https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css” rel=“stylesheet” />
|
登录页一： demo
|
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
|
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<meta http–equiv=“X-UA-Compatible” content=“ie=edge” />
<title>Login</title>
<style>
* {
font-family: ‘montserrat’, sans-serif;
}
body {
margin: 0;
padding: 0;
background: #333;
}
.login-box {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100vh; /* vh 视口高度 viewport height 百分比单位*/
background-image: linear-gradient(
45deg,
#9fbaa8,
#31354c
); /*设置颜色渐变 方向(0deg垂直向上) 起点颜色 终点颜色*/
transition: 0.4s; /*过度效果 property duration timing-function delay 默认属性:all 0 ease 0*/
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*定义 2D 转换8 */
color: white;
text-align: center;
}
.login-form h1 {
font-weight: 400;
margin-top: 0;
}
.txtb {
display: block;
box-sizing: border-box;
width: 240px;
background: #ffffff28;
border: 1px solid white;
padding: 10px 20px;
color: white;
outline: none;
margin: 10px 0;
border-radius: 6px;
text-align: center;
}
.login-btn {
width: 240px;
background: #2c3e50;
border: 0;
color: white;
padding: 10px;
border-radius: 6px;
cursor: pointer;
}
.hide-login-btn {
color: #000;
position: absolute;
top: 40px;
right: 40px;
cursor: pointer;
font-size: 30px;
opacity: 0.7;
transform: rotate(45deg); /*定义 2D 转换8 */
}
.show-login-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
border: 2px solid;
padding: 10px;
cursor: pointer;
}
.showed {
left: 0;
}
</style>
</head>
<body>
<div class=“show-login-btn”>
-> Show Login Form
</div>
<div class=“login-box”>
<div class=“hide-login-btn”>
+
</div>
<form action=“index.html” method=“POST” class=“login-form”>
<h1>Welcome</h1>
<input class=“txtb” type=“text” name=“” placeholder=“Username” />
<input class=“txtb” type=“password” name=“” placeholder=“Password” />
<input class=“login-btn” type=“submit” name=“” value=“Login” disabled />
</form>
</div>
<script type=“text/javascript”>
function hasClass(element, clssname) {
return element.className.match(new RegExp(‘(\\s|^)’ + clssname + ‘(\\s|$)’))
}
function addClass(element, clssname) {
if (!this.hasClass(element, clssname)) element.className += ‘ ‘ + clssname
}
function removeClass(element, clssname) {
if (hasClass(element, clssname)) {
var reg = new RegExp(‘(\\s|^)’ + clssname + ‘(\\s|$)’)
element.className = element.className.replace(reg, ‘ ‘)
}
}
function toggleClass(element, clssname) {
if (hasClass(element, clssname)) {
removeClass(element, clssname)
} else {
addClass(element, clssname)
}
}
var loginBox = document.getElementsByClassName(‘login-box’)
var showBtn = document.getElementsByClassName(‘show-login-btn’)
var hideBtn = document.getElementsByClassName(‘hide-login-btn’)
showBtn[0].addEventListener(‘click’, function() {
toggleClass(loginBox[0], ‘showed’)
})
hideBtn[0].addEventListener(‘click’, function() {
toggleClass(loginBox[0], ‘showed’)
})
</script>
</body>
</html>
|
登录页二：demo
<!DOCTYPE html><html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<meta http–equiv=“X-UA-Compatible” content=“ie=edge” />
<title>登录页</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type=’text’],
.box input[type=’password’] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type=’text’]:focus,
.box input[type=’password’]:focus {
width: 280px;
border-color: #2ecc71;
}
.submit {
border: 0;
background: none;
margin: 20px auto;
margin-top: 0;
display: inline-block;
text-align: center;
border: 2px solid #3498db;
padding: 10px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
text-decoration: none;
font-size: 12px;
}
.submit:hover {
background: #2ecc71;
border-color: #2ecc71;
}
</style>
</head>
<body>
<div class=“box”>
<h1>Login</h1>
<input type=“text” placeholder=“Username” />
<input type=“password” placeholder=“Password” />
<a class=“submit” href=“https://github.com/yyeexin/bilibili-html-demo”>Login</a>
</div>
</body>
</html>
登录页三：demo
|
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
|
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<meta http–equiv=“X-UA-Compatible” content=“ie=edge” />
<title>Login</title>
<style>
body {
margin: 0;
padding: 0;
background: #fff;
}
.signup-form {
width: 300px;
padding: 20px;
text-align: center;
background: url(‘../images/bg.jpg’);
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.signup-form h1 {
margin-top: 100px;
font-family: ‘Permanent Marker’, cursive;
color: #fff;
font-size: 40px;
}
.signup-form input {
display: block;
width: 100%;
padding: 0 16px;
height: 44px;
text-align: center;
box-sizing: border-box;
outline: none;
border: none;
font-family: ‘montserrat’, sans-serif;
}
.txtb {
margin: 20px 0;
background: rgba(255, 255, 255, 0.5);
border-radius: 6px;
}
.signup-btn {
margin-top: 60px;
margin-bottom: 20px;
background: #487eb0;
color: #fff;
border-radius: 44px;
cursor: pointer;
transition: 0.8s;
}
.signup-btn:hover {
transform: scale(0.96);
}
.signup-form a {
text-decoration: none;
color: #fff;
font-family: ‘montserrat’, sans-serif;
font-size: 14px;
padding: 10px;
transition: 0.8s;
display: block;
}
.signup-form a:hover {
background: rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div>
<div class=“signup-form”>
<h1>Sign Up</h1>
<input type=“text” placeholder=“Full Name” class=“txtb” />
<input type=“email” placeholder=“Email” class=“txtb” />
<input type=“password” placeholder=“Password” class=“txtb” />
<input type=“submit” value=“Create Account” class=“signup-btn” />
<a href=“https://github.com/yyeexin/bilibili-html-demo”>Already Have One ?</a>
</div>
</div>
</body>
</html>
|
夜河资源网提供的所有内容仅供学习与交流。通过使用本站内容随之而来的风险以及法律责任与本站无关，所承担的法律责任由使用者承担。
一、如果您发现本站侵害了相关版权，请附上本站侵权链接和您的版权证明一并发送至邮箱：yehes#qq.com（#替换为@）我们将会在五天内处理并断开该文章下载地址。
二、本站所有资源来自互联网整理收集，全部内容采用撰写共用版权协议，要求署名、非商业用途和相同方式共享，如转载请也遵循撰写共用协议。
三、根据署名-非商业性使用-相同方式共享 (by-nc-sa) 许可协议规定，只要他人在以原作品为基础创作的新作品上适用同一类型的许可协议，并且在新作品发布的显著位置，注明原作者的姓名、来源及其采用的知识共享协议，与该作品在本网站的原发地址建立链接，他人就可基于非商业目的对原作品重新编排、修改、节选或者本人的作品为基础进行创作和发布。
四、基于原作品创作的所有新作品都要适用同一类型的许可协议，因此适用该项协议， 对任何以他人原作为基础创作的作品自然同样都不得商业性用途。
五、根据二〇〇二年一月一日《计算机软件保护条例》规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可不经软件著作权人许可，无需向其支付报酬！
六、鉴此，也望大家按此说明转载和分享资源！本站提供的所有信息、教程、软件版权归原公司所有，仅供日常使用，不得用于任何商业用途，下载试用后请24小时内删除，因下载本站资源造成的损失，全部由使用者本人承担！
一、如果您发现本站侵害了相关版权，请附上本站侵权链接和您的版权证明一并发送至邮箱：yehes#qq.com（#替换为@）我们将会在五天内处理并断开该文章下载地址。
二、本站所有资源来自互联网整理收集，全部内容采用撰写共用版权协议，要求署名、非商业用途和相同方式共享，如转载请也遵循撰写共用协议。
三、根据署名-非商业性使用-相同方式共享 (by-nc-sa) 许可协议规定，只要他人在以原作品为基础创作的新作品上适用同一类型的许可协议，并且在新作品发布的显著位置，注明原作者的姓名、来源及其采用的知识共享协议，与该作品在本网站的原发地址建立链接，他人就可基于非商业目的对原作品重新编排、修改、节选或者本人的作品为基础进行创作和发布。
四、基于原作品创作的所有新作品都要适用同一类型的许可协议，因此适用该项协议， 对任何以他人原作为基础创作的作品自然同样都不得商业性用途。
五、根据二〇〇二年一月一日《计算机软件保护条例》规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可不经软件著作权人许可，无需向其支付报酬！
六、鉴此，也望大家按此说明转载和分享资源！本站提供的所有信息、教程、软件版权归原公司所有，仅供日常使用，不得用于任何商业用途，下载试用后请24小时内删除，因下载本站资源造成的损失，全部由使用者本人承担！
