设为首页收藏本站
开启辅助访问 切换到窄版

登录  | 立即注册

游客您好！登录后享受更多精彩

星空社区»论坛 › 编程教程 › 其他语言教程 › 【HTML】404页面源码
返回列表
+ 发新帖
查看: 952|回复: 0

[js,sql,html教程] 【HTML】404页面源码

[复制链接]
wangy

444

主题

509

帖子

2051

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2051

荣誉管理论坛元老
发表于 2021-6-30 23:34:29 来自手机 | 显示全部楼层 |阅读模式 来自:
  1. <!DOCTYPE html>$ |! x% k# H; e+ n5 ~1 k( g
  2. <html lang="en">
    % x- K0 p7 j+ U; x5 E1 j
  3.         <head>
    4 S# F- j) }0 {# a, V2 U' W
  4.                 <meta charset="UTF-8">- k1 G* c- @% h- U0 c5 T$ ^0 \4 \
  5.                 <title>抱歉！您访问的页面不存在</title>( ^4 g0 t9 |7 v( ]- ^1 Q
  6.                 <meta name="viewport" content="width=device-width, initial-scale=1">
    4 p0 g$ q# F, c# L6 D
  7.                 <style type="text/css"># E" }. `: _9 N( d& k
  8.                         @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");6 F: j. J5 B1 @
  9. 5 F! K, {0 ]4 y) u4 D1 F
  10.                         * {& R& N$ u8 m5 y+ n' q  R1 }
  11.                                 margin: 0;& d% B: z  w* P7 u3 h
  12.                                 padding: 0;
    1 i, S) C7 ?4 p% L0 `( a) G
  13.                                 border: 0;
    ( }/ ]1 P& R- G  l; ]5 P/ [
  14.                                 font-size: 100%;" E% _0 ?9 N* Y+ n* l
  15.                                 font: inherit;
    3 u$ `8 U) ~' M2 s# h' Z
  16.                                 vertical-align: baseline;8 Q9 K% o/ U8 i; r
  17.                                 box-sizing: border-box;$ }4 }5 W. m' Z: L' b
  18.                                 color: inherit;; j9 N: D, }2 j( [: Z
  19.                                 -webkit-user-select:none;
    9 }$ c  D5 q6 c& G# u* ?
  20.                                -moz-user-select:none;1 c& O  N2 T5 ?- h' g4 I
  21.                                 -ms-user-select:none;
    2 E+ V$ m* e+ V! o. H' G! W  |) \
  22.                                 user-select:none;( Y# P2 S3 h* W* Y
  23.                         }
    & t& o# m3 ]7 [; t, h

  24. + d4 |. @* V2 ~  ~# Q
  25.                         body {( W% f% d8 J+ V/ w6 E) F- f
  26.                                 background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
    4 o$ _$ j* J. \2 ~) T
  27.                                 height: 100vh;% }3 A. l: ~9 ?7 ?$ r! R. ^# r( S
  28.                         }
    $ `; G% e$ W& i  u/ `% t( g8 g' A
  29. 7 v. i+ J7 [% ~+ _8 Z2 m6 ~, N# H
  30.                         h1 {7 J$ v6 R, i2 W) Y5 j* M
  31.                                 font-size: 45vw;
    3 v$ x( Y6 F9 a& I+ s" {' t
  32.                                 text-align: center;
    ' y8 a7 q1 ~6 o1 N- K  \
  33.                                 position: fixed;
    & s" w: c5 s5 _9 b7 `
  34.                                 width: 100vw;( e6 r- K% c' X# `8 F! m
  35.                                 z-index: 1;
    " G# f4 r1 k/ b; S
  36.                                 color: #ffffff26;
    2 k& O7 z7 }! N% v  A6 U
  37.                                 text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);) u4 Q9 J/ n5 r9 U: R# y9 t: r+ k
  38.                                 top: 50%;0 W" [6 }4 R6 b' O" a' @
  39.                                 -webkit-transform: translateY(-50%);$ A7 Q1 Z7 m+ ]( Q9 c. K$ l  {2 d' Q
  40.                                 transform: translateY(-50%);
    9 a: S; J5 y  K  b8 |
  41.                                 font-family: "Montserrat", monospace;
    2 J8 U/ z1 p1 K1 F" M1 |
  42.                         }
    ) i! J! r) b% U: S

  43. 3 D7 Q1 b# H  J! Y+ x/ k" y/ [' i
  44.                         #a{7 x' _* v% N% B3 E3 P
  45.                                 background: rgba(0, 0, 0, 0);9 ^1 W! C8 {) p, ~0 h9 f9 a* o
  46.                                 width: 70vw;
    ) j8 |. @4 j+ F8 {7 s
  47.                                 position: relative;& O. \8 u  C( Q
  48.                                 top: 50%;2 [" S9 r/ b' Z$ z
  49.                                 -webkit-transform: translateY(-50%);
    / ?- Z1 p: l1 R5 G4 v0 x
  50.                                 transform: translateY(-50%);2 i! K0 a% H: @/ p: A7 E1 x
  51.                                 margin: 0 auto;
    " ?3 v( F8 t; B( H6 B% p
  52.                                 padding: 30px 30px 10px;( Y  k# U" l0 K& N6 m
  53.                                 box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
    ( u; y" k4 s: Z* V9 `, t# l
  54.                                 z-index: 3;. |0 x' o  H+ Z+ ~" z  \3 _
  55.                         }
    ! o7 @# U+ O: u
  56. 1 s' A, c5 V; G3 d& h8 [
  57.                         P {
    8 s; P: t# q0 X
  58.                                 font-family: "Share Tech Mono", monospace;1 E/ [6 T% ~1 r% c% o2 r. D+ y" }
  59.                                 color: #f5f5f5;) e0 @3 h* g& E1 Z# @8 U
  60.                                 margin: 0 0 20px;
    7 N$ Q; Y1 z" D' e0 U' T- F
  61.                                 font-size: 17px;
    9 m2 Q6 a  Y- h  H5 ^
  62.                                 line-height: 1.2;, F# {* b8 _! n  y" J6 S
  63.                         }" u) T0 D# }1 t0 N, |

  64. 5 ?1 [% n3 C1 _
  65.                         span {) d$ N; n5 b2 n) |/ r
  66.                                 color: #f0c674;5 R- t( s: H! S# D; d! q
  67.                         }
    1 Z% D* p+ ~! C/ S2 Y
  68. ! A6 N* j8 W  s  K% P
  69.                         i {' D1 a$ n8 j! T7 j0 c5 Y4 p+ V! Y
  70.                                 color: #8abeb7;. ]2 z7 t4 w6 p/ u
  71.                         }* l. _1 @# y+ A1 p) v9 K
  72. 2 E) M1 ?: ?6 [6 P# D$ c1 \( F
  73.                         div a {
    / K: ]* v5 c9 X3 u" B
  74.                                 text-decoration: none;
    / t, Q( L5 i  v, x
  75.                         }3 Z3 j. u- a, t

  76. : a# ?% V1 T& s' Z
  77.                         b {
    + f0 @2 k$ e7 a, w
  78.                                 color: #81a2be;' F5 \( @0 e$ U  s& s5 p/ l2 A* t
  79.                         }
    9 Y% u5 T. _& y+ N4 N5 g

  80. 8 G7 H2 q* J7 {! n* y
  81.                         a.avatar {
    : f5 l1 c4 D( s! I  U! b
  82.                                 position: fixed;
    0 }+ W9 I7 F& [+ |) R
  83.                                 bottom: 15px;6 \+ z  P6 m7 w7 y
  84.                                 right: -100px;
    # A3 _* i1 s1 w% E
  85.                                 -webkit-animation: slide 0.5s 4.5s forwards;
    , |6 s( S( D9 D# Z$ X
  86.                                 animation: slide 0.5s 4.5s forwards;$ B; o3 [8 a" C* T8 J
  87.                                 display: block;2 E& j; i* }1 J/ l, O( A
  88.                                 z-index: 4
    + e" \, c1 k; o  e
  89.                         }
    3 t6 Z' m; i5 n

  90. ( ?" A8 a& Z% ^* P9 t4 _: ^
  91.                        
    ( |1 n, L7 }! H0 N9 E; ?
  92. & |4 j; }4 B6 f# c! C0 a
  93.                         @-webkit-keyframes slide {) Z0 Q* Y3 L) g0 F( {
  94.                                 from {# P$ @" k7 o5 z6 D  b: ]- u
  95.                                         right: -100px;
    ; ?% _( C2 l0 i5 Y' v
  96.                                         -webkit-transform: rotate(360deg);4 X% m3 G! X9 L# g' F; u1 ~- ?
  97.                                         transform: rotate(360deg);
    - `6 K9 N3 S1 Y
  98.                                         opacity: 0;" d) c, h8 b# t* }  m$ t
  99.                                 }
    % \/ ~7 \& G# @5 l+ d; N

  100. % P: i* v$ N' i$ ?
  101.                                 to {. e9 J( b/ p7 `
  102.                                         right: 15px;4 @) A/ V. h7 {: I9 b$ u; l$ s* f5 D
  103.                                         -webkit-transform: rotate(0deg);+ k: ]7 t6 ?5 l8 ]  Q1 O
  104.                                         transform: rotate(0deg);
      Q4 k; h& H; ~* `- ~. {
  105.                                         opacity: 1;$ }. S' M$ x0 G+ g
  106.                                 }; e" ^$ A9 ]2 v) C  w' o
  107.                         }
    + ]" r& ^3 |7 M' N; [2 N- W
  108. 6 P, x7 M$ m9 c( f
  109.                         @keyframes slide {
    & J% L$ ~' x4 k9 M
  110.                                 from {
    8 F1 k# P* g$ j6 u
  111.                                         right: -100px;
    # ]- `( L+ q" f6 L* [
  112.                                         -webkit-transform: rotate(360deg);
    + N$ n3 @! l4 Q+ {2 X' `3 X. u
  113.                                         transform: rotate(360deg);
    - V  y* [) g; @2 M9 n+ a5 _
  114.                                         opacity: 0;
    + f* N, M) M; S3 T7 O! ]9 G/ l
  115.                                 }- R. O& b) U3 {6 R$ m3 @. _

  116. 5 _# S/ M4 o: G
  117.                                 to {
    0 y% i; n2 p0 R4 R: I5 K
  118.                                         right: 15px;2 u0 Z4 s8 r9 e) [" t4 W, _: ?  I
  119.                                         -webkit-transform: rotate(0deg);3 h) H6 ?7 _; G4 e- L3 z% e7 A, K
  120.                                         transform: rotate(0deg);, c/ m. z# w' d7 o0 K: J
  121.                                         opacity: 1;
    ; ~7 N, K- N5 J
  122.                                 }; c* {: v5 k* E  n3 t4 f
  123.                         }
    ) K, M+ N6 y: w
  124.                         7 m0 _5 q6 {) p! C$ ]7 {+ r3 A
  125.                         @media (max-width: 576px) {: A+ m1 i8 t9 V% i
  126.                                 div {
    5 z3 B' z: `  E% _3 y
  127.                                         width: 90vw;4 m, O- ]3 w; B8 q, J8 f
  128.                                 }
    9 C: a+ a4 p4 [' O; K$ f% f
  129.                         }% ]6 n% m  w1 V( v( u8 J
  130.                 </style>, C  P! L1 ]9 X# ]& t& B

  131. " l) |1 B* x6 P0 }* ]/ i% |& m
  132.         </head>2 j* T: R( s2 y) @' R* c0 n
  133.         <body>' ~4 v1 i6 B6 X) F; p" W0 A
  134.         <audio id="vd" src="http://music.163.com/song/media/outer/url?id=522041157.mp3" autoplay="autoplay">
    " H! n5 e4 I. e, w/ H. B3 n& O
  135. </audio>
    % Y* n1 [; C3 J
  136.         <h1>404</h1>3 X( t) y0 q$ i( Z8 [, _+ u
  137.                 <div id="a">
    1 W+ g! s5 ?- Q3 H, ?
  138.                         <p>> <span>错误代码</span>: "<i>404 Not Found</i>"</p>
    2 u3 H7 Q1 v! X2 v" T* @
  139.                         <p>> <span>错误描述</span>: "<i>你访问的页面不存在</i>"</p>4 v0 n  r+ \! S' s, G
  140.                         <p>> <span>错误可能由以下原因引起</span>: [<b>HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生，很难避免，比如说：网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等，导致原来的URL地址无法访问；当Web服务器接到类似请求时，会返回一个404状态码，告诉浏览器要请求的资源并不存在。</b>...]</p>
    ! `4 P; c! i: F5 K4 v0 E
  141.                      <p>> <span>404 Not Found 的由来</span> : [<b>据说在第三次科技革命之前，互联网的形态就是一个大型的中央数据库，这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的，如果在数据库中没有找到请求者所需要的文件，或者由于请求者写错了文件编号，用户就会得到一个返回信息：room 404 : file not found。后来互联网兴起后，人们也就习惯了用404作为服务器未找到文件的错误代码了。当然实际考证传说中的room 404是不存在的。</b>]</p># q4 w1 A* d3 {5 p- x' o( p; r2 D! W4 K& q
  142.                      <p>> <span>很抱歉给您带来不便 :-)</span></p>9 E; s3 f3 ?% k* L* L* h
  143.                      <p>><span>318SEC提供</span><i>318SEC</i></p>
    $ x$ S& o) l2 Q7 A, N. C  u, Q/ v
  144.                 </div>
    / X/ w) h7 C! t
  145. . w) Y, i. _6 t% P% E( Q
  146.                 <script type="text/javascript">
    " l. v) {$ m8 `' b
  147.                         var str = document.getElementsByTagName('div')[0].innerHTML.toString();! S0 z' v1 _0 b; v
  148.                         var i = 0;; D4 s% N, s0 r  r2 x" ]
  149.                         document.getElementsByTagName('div')[0].innerHTML = "";9 ~, A. m9 g! y6 y4 U

  150. 1 ~1 [" Z% \. z, X6 N% ]
  151.                         setTimeout(function() {. J8 z& S3 D% q" n  D, x2 K
  152.                                 var se = setInterval(function() {$ @# d* `8 r9 ^  V2 C
  153.                                         i++;( d( n! J9 T; M# G) D5 Y
  154.                                         document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "_";2 \. G% y. C5 U' E
  155.                                         if (i == str.length) {! z) `9 B" U: K/ e1 Z
  156.                                                 clearInterval(se);
    % C" L6 y9 \! o9 {1 z' f! o3 M
  157.                                                 document.getElementsByTagName('div')[0].innerHTML = str;% `5 r& n5 V4 q- s6 x- D8 u
  158.                                         }. x) h; N" {3 v4 d
  159.                                 }, 60);
    - k* ^- n7 V7 ?6 e3 |/ M% o9 G
  160.                         }, 0);
    : B* g* U- u1 n
  161.                         function toggleSound() {" g! D' B. N5 N$ v' d# W* F
  162.             var music = document.getElementById("vd");//获取ID  $ t$ O8 r+ D# u& e1 j' A1 Q
  163.                 console.log(music);, r6 X- M4 x- l- _( v
  164.                 console.log(music.paused);% c% c# ^1 v( b3 d4 @4 j
  165.             if (music.paused) { //判读是否播放  - J0 ~$ a8 Q% x5 N, u# `: r
  166.                 music.paused=false;
    5 n4 Y" k) {  i4 B; z
  167.                 music.play(); //没有就播放 . Q4 @  X( i1 [& ?7 t
  168.                     }         
      Z5 l; m" ?+ L3 v( `! ]6 h
  169.         }
    1 q" o) ^- c2 ?% |
  170. 0 j" I4 W4 G  _4 V
  171. setInterval("toggleSound()",1);
    " y  k$ v' a; I& T& ^' ]: L" H* }
  172.                 </script>
    ) _4 l2 S* V5 N( J

  173. 8 ]* V- H8 t) t) k1 \0 `  d
  174.         </body>" E$ Z4 i. I5 V( v/ d# L
  175. </html>
复制代码
回复

使用道具 举报

返回列表
+ 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|星空社区 |网站地图

GMT+8, 2024-4-29 03:46 , Processed in 0.055774 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表