程序猿个性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>
效果
解压密码: detechn或detechn.com
免责声明
本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。
本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。
本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。