程序猿个性404界面

本文阅读 1 分钟
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>404 Not Found</title>
  6. <meta name="HandheldFriendly" content="True" />
  7. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <meta name="theme-color" content="#e74c3c">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  12. <style>
  13. html,body {
  14. height: 100%;
  15. margin: 0;
  16. padding: 0;
  17. }
  18. /*html,body高度设置100%,floater高度设置50%,content置于floater下面,实现content垂直居中*/
  19. body {
  20. background-color: #FFFFCC;
  21. }
  22. .floater {
  23. float: left;
  24. height: 50%;
  25. margin-bottom: -120px;
  26. }
  27. .content {
  28. min-width: 445px;
  29. width: 445px;
  30. height: 240px;
  31. margin: 0 auto;
  32. margin-top: 0px;
  33. clear: both;
  34. position: relative;
  35. }
  36. a,a:hover {
  37. text-decoration: none;
  38. }
  39. /*
  40. Solarized Color Schemes originally by Ethan Schoonover
  41. http://ethanschoonover.com/solarized
  42. Ported for PrismJS by Hector Matos
  43. Website: https://krakendev.io
  44. Twitter Handle: https://twitter.com/allonsykraken)
  45. */
  46. /*
  47. SOLARIZED HEX
  48. --------- -------
  49. base03 #002b36
  50. base02 #073642
  51. base01 #586e75
  52. base00 #657b83
  53. base0 #839496
  54. base1 #93a1a1
  55. base2 #eee8d5
  56. base3 #fdf6e3
  57. yellow #b58900
  58. orange #cb4b16
  59. red #dc322f
  60. magenta #d33682
  61. violet #6c71c4
  62. blue #268bd2
  63. cyan #2aa198
  64. green #859900
  65. */
  66. .code {
  67. color: #657b83;
  68. /* base00 */
  69. font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  70. text-align: left;
  71. white-space: normal;
  72. word-spacing: normal;
  73. word-break: normal;
  74. word-wrap: normal;
  75. line-height: 1.5;
  76. -moz-tab-size: 4;
  77. -o-tab-size: 4;
  78. tab-size: 4;
  79. -webkit-hyphens: none;
  80. -moz-hyphens: none;
  81. -ms-hyphens: none;
  82. hyphens: none;
  83. }
  84. .code::-moz-selection,
  85. .code ::-moz-selection {
  86. background: #073642;
  87. /* base02 */
  88. }
  89. .code::selection,
  90. .code ::selection {
  91. background: #073642;
  92. /* base02 */
  93. }
  94. /* Code blocks */
  95. .pre {
  96. padding: 1em;
  97. margin: .5em 0;
  98. overflow: auto;
  99. border-radius: 0.3em;
  100. }
  101. /* Solarized Green */
  102. .keyword {
  103. color: #859900;
  104. }
  105. .commentary {
  106. color: #66CC66;
  107. }
  108. .line{
  109. overflow: hidden;
  110. text-overflow: ellipsis;
  111. white-space: nowrap;
  112. }
  113. .line-number {
  114. display: inline-block;
  115. width: 40px;
  116. margin-left: 5px;
  117. }
  118. .line-rn{
  119. display: inline-block;
  120. padding-left: 5px;
  121. font-size: 10px;
  122. color: #b4bfb0;
  123. }
  124. /* Solarized Cyan */
  125. .number,
  126. .string {
  127. color: #2aa198;
  128. }
  129. /* Solarized Blue */
  130. .title,.name {
  131. color: #268bd2;
  132. }
  133. a,a:visited,.link {
  134. color: #cb4b16;
  135. }
  136. /* Solarized Red */
  137. .built_in {
  138. color: #dc322f;
  139. }
  140. @media only screen and (max-width: 500px) {
  141. .content {
  142. width: 90%
  143. }
  144. }
  145. .animation::after {
  146. content: '';
  147. cursor: text;
  148. display: inline-block;
  149. width: 10px;
  150. height: 4px;
  151. line-height: 16px;
  152. background-color: black;
  153. animation: blink 1.5s infinite steps(1, start);
  154. }
  155. @keyframes blink {
  156. 0% {
  157. opacity: 0;
  158. }
  159. 50% {
  160. opacity: 1;
  161. }
  162. 100% {
  163. opacity: 0;
  164. }
  165. </style>
  166. </head>
  167. <body>
  168. <div class="floater"></div>
  169. <div class="content code" id = "contentDiv">
  170. <div class="line">
  171. <span class="line-number">...</span>
  172. </div>
  173. <div class="line">
  174. <span class="line-number">11</span>
  175. <span class="commentary">//404:资源未找到</span>
  176. <span class="line-rn">↴</span>
  177. </div>
  178. <div class="line">
  179. <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>
  180. </div>
  181. <div class="line">
  182. <span class="line-number">13</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span> (req.status == <span class="number">404</span>) {<span class="line-rn">↴</span>
  183. </div>
  184. <div class="line">
  185. <span class="line-number">14</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="built_in">console</span>.error(<span class="string">"Page not found"</span>);<span class="line-rn">↴</span>
  186. </div>
  187. <div class="line" id="href-line">
  188. <span class="line-number">15</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>
  189. </div>
  190. <div class="line">
  191. <span class="line-number">16</span>&nbsp;&nbsp;&nbsp;&nbsp;}<span class="line-rn">↴</span>
  192. </div>
  193. <div class="line">
  194. <span class="line-number">17</span>}<span class="line-rn">↴</span>
  195. </div>
  196. <div class="line">
  197. <span class="line-number">18</span><a href="https://cdn.detechn.com/" ><span class="animation"></span></a>
  198. </div>
  199. <div class="line">
  200. <span class="line-number">...</span>
  201. </div>
  202. </div>
  203. <script>
  204. window.onload = function (){
  205. console.group("HTTP Status 404");
  206. console.log("Page not found");
  207. console.groupEnd();
  208. };
  209. </script>
  210. </body>
  211. </html>

效果
图片描述

解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

canvas绘制中国国旗
« 上一篇 10-17
这个剪辑真的不错
下一篇 » 10-23

发表评论