程序猿个性404界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 Not Found</title>
<meta name="HandheldFriendly" content="True" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#e74c3c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
html,body {
height: 100%;
margin: 0;
padding: 0;
}
/*html，body高度设置100%,floater高度设置50%，content置于floater下面，实现content垂直居中*/
body {
background-color: #FFFFCC;
}
.floater {
float: left;
height: 50%;
margin-bottom: -120px;
}
.content {
min-width: 445px;
width: 445px;
height: 240px;
margin: 0 auto;
margin-top: 0px;
clear: both;
position: relative;
}
a,a:hover {
text-decoration: none;
}
/*
Solarized Color Schemes originally by Ethan Schoonover
http://ethanschoonover.com/solarized
Ported for PrismJS by Hector Matos
Website: https://krakendev.io
Twitter Handle: https://twitter.com/allonsykraken)
*/
/*
SOLARIZED HEX
--------- -------
base03 #002b36
base02 #073642
base01 #586e75
base00 #657b83
base0 #839496
base1 #93a1a1
base2 #eee8d5
base3 #fdf6e3
yellow #b58900
orange #cb4b16
red #dc322f
magenta #d33682
violet #6c71c4
blue #268bd2
cyan #2aa198
green #859900
*/
.code {
color: #657b83;
/* base00 */
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: normal;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.code::-moz-selection,
.code ::-moz-selection {
background: #073642;
/* base02 */
}
.code::selection,
.code ::selection {
background: #073642;
/* base02 */
}
/* Code blocks */
.pre {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
/* Solarized Green */
.keyword {
color: #859900;
}
.commentary {
color: #66CC66;
}
.line{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-number {
display: inline-block;
width: 40px;
margin-left: 5px;
}
.line-rn{
display: inline-block;
padding-left: 5px;
font-size: 10px;
color: #b4bfb0;
}
/* Solarized Cyan */
.number,
.string {
color: #2aa198;
}
/* Solarized Blue */
.title,.name {
color: #268bd2;
}
a,a:visited,.link {
color: #cb4b16;
}
/* Solarized Red */
.built_in {
color: #dc322f;
}
@media only screen and (max-width: 500px) {
.content {
width: 90%
}
}
.animation::after {
content: '';
cursor: text;
display: inline-block;
width: 10px;
height: 4px;
line-height: 16px;
background-color: black;
animation: blink 1.5s infinite steps(1, start);
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
</style>
</head>
<body>
<div class="floater"></div>
<div class="content code" id = "contentDiv">
<div class="line">
<span class="line-number">...</span>
</div>
<div class="line">
<span class="line-number">11</span>
<span class="commentary">//404:资源未找到</span>
<span class="line-rn">↴</span>
</div>
<div class="line">
<span class="line-number">12</span><span class="function"><span class="keyword">function</span> <span class="title">errorHandler</span>(<span class="params">req</span>)</span> {<span class="line-rn">↴</span>
</div>
<div class="line">
<span class="line-number">13</span> <span class="keyword">if</span> (req.status == <span class="number">404</span>) {<span class="line-rn">↴</span>
</div>
<div class="line">
<span class="line-number">14</span> <span class="built_in">console</span>.error(<span class="string">"Page not found"</span>);<span class="line-rn">↴</span>
</div>
<div class="line" id="href-line">
<span class="line-number">15</span> <span class="built_in">window</span>.location.href = <span class="link">"<a href="https://cdn.detechn.com/" title="回到首页">/Home</a>"</span>;<span class="line-rn">↴</span>
</div>
<div class="line">
<span class="line-number">16</span> }<span class="line-rn">↴</span>
</div>
<div class="line">
<span class="line-number">17</span>}<span class="line-rn">↴</span>
</div>
<div class="line">
<span class="line-number">18</span><a href="https://cdn.detechn.com/" ><span class="animation"></span></a>
</div>
<div class="line">
<span class="line-number">...</span>
</div>
</div>
<script>
window.onload = function (){
console.group("HTTP Status 404");
console.log("Page not found");
console.groupEnd();
};
</script>
</body>
</html>效果