-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
211 lines (176 loc) · 5.18 KB
/
404.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淺川 / 荒原</title>
<style>
*::selection{
background-color: rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 70px;
letter-spacing: 10px;
}
h2{
font-size: 40px;
letter-spacing: 2px;
}
p {
font-size: 20px;
letter-spacing: 2px;
line-height: 40px;
}
body {margin:0;}
@media screen and (max-width: 600px){
h1 {
font-size: 40px;
letter-spacing: 7px;
}
p {
font-size: 15px;
letter-spacing: 2px;
line-height: 25px;
}
h2{
font-size: 25px;
}
}
.containment {
margin: 100px;
margin-left: 10%;
margin-right: 10%;
}
@media screen and (max-width: 1000px) {
.origin-story img {
width: 280px;
height: 295px;
}
}
</style>
</head>
<body>
<div class="bar">
<link rel="stylesheet" type="text/css" href="./CSS/head.css">
<ul class="topbar">
<li><strong><a href="#">主页</a></strong></li>
<li><a href="./creations.html">作品集</a></li>
<li><a href="https://blog.shirori-net.work/">部落格</a></li>
<li><a href="./opensource.html">开源协议</a></li>
</ul>
</div>
<div class="background">
<span class="d d1"></span>
<span class="d d2"></span>
<span class="words">404<br>Not Found</span>
</div>
<div class="Notifiction containment">
<h1>孤島上的荒原</h1>
<p>在数据库中似乎没有找到你请求的内容，不过...</p>
</div>
<div class="whatIs containment">
<h2>什么是404 Not Found</h2>
<p>404是<strong>HTML状态码</strong>中的一部分，在服务器无法根据
<br>客户端的请求找到资源（网页）时，服务器会返回 404 代码。
<br>404页面是网站必备的一个页面，承载着用户体验与SEO优化的重任。</p>
</div>
<div class="origin-story containment">
<h2>404页面的由来</h2>
<p>据说在第三次科技革命之前，互联网的形态就是一个大型的中央数据库，
<br>这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的，
<br>如果在数据库中没有找到请求者所需要的文件，
<br>或者由于请求者写错了文件编号，用户就会得到一个返回信息：
<br>Room 404 : file not found。后来互联网兴起后，
<br>人们也就习惯了用404作为服务器未找到文件的错误代码了。
<br>当然实际考证传说中的room 404是不存在的。</p>
<img src="./Res/404.jpg" alt="404 Image" style="border-radius: 15px;"
>
</div>
<style>
body {
background-color: #EBDFE5;
color: rgb(84, 70, 63);
}
.background {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.background span.d {
width: 30000px;
height: 30000px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -0%) rotate(-45deg);
transform-origin: 50% 0%;
display: inline-block;
background: rgba(84, 70, 63, .0295);
}
@keyframes rotate {
from {
transform: translate(-50%, -0%) rotate(-45deg);
}
to {
transform: translate(-50%, -0%) rotate(315deg);
}
}
@keyframes rotate_reverse {
from {
transform: translate(-50%, -0%) rotate(-30deg);
}
to {
transform: translate(-50%, -0%) rotate(330deg);
}
}
@keyframes noticeword {
0% {
opacity: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0;
}
}
.background span.words {
position: fixed;
bottom: 0;
right: 0;
text-align: right;
margin-right: 4%;
margin-bottom: 2%;
font-size: 200px;
line-height: normal;
color: rgb(84, 70, 63);
animation: noticeword ease-in-out 5s infinite;
}
.background span.d1 {
transform: translate(-50%, -0%) rotate(-45deg);
animation: rotate linear 60s infinite;
}
.background span.d2 {
transform: translate(-50%, -0%) rotate(-30deg);
animation: rotate_reverse linear 75s infinite;
}
@media screen and (max-width:1200px){
.background span.words {
position: fixed;
bottom: 0;
right: 0;
text-align: right;
margin-right: 4%;
margin-bottom: 2%;
font-size: 60px;
line-height: normal;
color: rgb(84, 70, 63);
animation: noticeword ease-in-out 5s infinite;
}
}
</style>
</body>
</html>