请选择 进入手机版 | 继续访问电脑版

登录  | 立即注册

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

查看: 927|回复: 0

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

[复制链接]

444

主题

509

帖子

2051

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2051

荣誉管理论坛元老

发表于 2021-6-30 23:34:29 来自手机 | 显示全部楼层 |阅读模式 来自:
  1. <!DOCTYPE html>& Y' @! ^. y8 y+ Z. u# _
  2. <html lang="en">
    0 B- V/ m" P9 c2 C
  3.         <head>
    & F# C; a/ P: Z
  4.                 <meta charset="UTF-8">
    : k/ G: I2 V  |$ d  P& }8 }
  5.                 <title>抱歉!您访问的页面不存在</title>' X7 q6 l1 r6 \9 Q% A
  6.                 <meta name="viewport" content="width=device-width, initial-scale=1">
    8 ^+ P' l2 ], R% ]9 x
  7.                 <style type="text/css">
    $ f& E7 k/ y8 J$ F
  8.                         @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");
    2 l  N" o' ], X7 e# S) n7 l3 U1 U

  9.   j' Z4 M& _  f) B4 P1 {% g
  10.                         * {
    * A) r, N8 Z1 v1 H- \' {) Q, v
  11.                                 margin: 0;4 E9 L! u! Y  A0 ~6 c
  12.                                 padding: 0;
    2 h% p6 ^0 I/ o; R5 ?' C% }
  13.                                 border: 0;/ O  X* i% d1 |6 J7 R
  14.                                 font-size: 100%;
    8 U: A9 e8 F, D8 V! G3 i
  15.                                 font: inherit;/ ]3 J# l' p, b+ _
  16.                                 vertical-align: baseline;5 G8 L/ F4 I% z. z
  17.                                 box-sizing: border-box;  }/ K, \* A; e6 E
  18.                                 color: inherit;7 _0 ~" K4 f; p" E) ~- b; n+ w
  19.                                 -webkit-user-select:none;
    : g2 B7 C6 w4 p+ i  O
  20.                                -moz-user-select:none;( {6 s; M; V: q% N
  21.                                 -ms-user-select:none;
    ) R# w$ p/ Z  p* a1 }
  22.                                 user-select:none;9 B. u0 d/ Y4 h: L+ P1 ~7 J
  23.                         }
    ' E4 Y/ C# W1 F6 x2 T2 N1 \
  24. 0 F! x7 M8 w$ m  \8 r" k
  25.                         body {
    , w7 i! u" m( [5 N0 V
  26.                                 background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);; J1 J0 Q* v- t3 q# n8 [( R
  27.                                 height: 100vh;
    $ T. {1 q( v8 ?7 p$ G& n2 s4 U0 y
  28.                         }% [; s# T! W# P0 ^

  29. # m6 B& A: z) |1 Z
  30.                         h1 {1 p5 O& F! h! B/ D
  31.                                 font-size: 45vw;. z* `1 H- e) l8 p: }$ P
  32.                                 text-align: center;
    $ Y* e% g" h! E7 w+ D
  33.                                 position: fixed;, T4 z5 v0 s( N. e8 Y) n
  34.                                 width: 100vw;1 M* A$ ^  ~/ _* m3 z  F* W
  35.                                 z-index: 1;
    2 C5 z0 x! r$ _- E9 B. d" M
  36.                                 color: #ffffff26;
    : e" o  P7 k; L! a6 @. P
  37.                                 text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
    9 {' F: r4 f& n5 T0 m
  38.                                 top: 50%;, }) S# O9 D, r' ^2 p
  39.                                 -webkit-transform: translateY(-50%);( n/ e0 B- k" K+ o: d5 v
  40.                                 transform: translateY(-50%);
    2 P/ [* Q3 x3 F
  41.                                 font-family: "Montserrat", monospace;
    5 k  p$ }) Z' n# u3 p/ u
  42.                         }
    1 V/ A+ h. i7 D2 `' d! }5 \

  43. " ^. ]2 I9 `- F8 H7 F, R
  44.                         #a{
    9 b+ p2 G6 }7 q: b! P( J6 J6 c# g
  45.                                 background: rgba(0, 0, 0, 0);
    ( Z4 V4 p8 v) X# H+ p3 v+ R( P8 K
  46.                                 width: 70vw;
    1 \( l0 h0 b$ _, g
  47.                                 position: relative;# d& E1 \- J: o
  48.                                 top: 50%;
    - D% u( Z9 u+ Q9 R6 L5 O
  49.                                 -webkit-transform: translateY(-50%);& A) S/ P6 k8 v! y( B9 k
  50.                                 transform: translateY(-50%);
    6 q0 G$ q: |3 Q1 f2 d$ Z0 G
  51.                                 margin: 0 auto;7 ^+ z0 W* k+ |. B9 B
  52.                                 padding: 30px 30px 10px;; |) D' V" S7 ]5 c1 d3 M/ }
  53.                                 box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);1 _2 l  l3 f8 o" L% O8 f# ~
  54.                                 z-index: 3;
    . O; w5 G; a, y' q! I% B0 d
  55.                         }
    " q2 @% s$ m5 v( h9 c3 x. r

  56. ! x4 `2 q# R; B0 q
  57.                         P {/ r: H( r. m1 w& h" J7 d
  58.                                 font-family: "Share Tech Mono", monospace;
    ) e8 q, a: }! W/ N- T# x3 D) \
  59.                                 color: #f5f5f5;
    5 d% x; v; |' ^) L1 d; B" o$ v( I
  60.                                 margin: 0 0 20px;# i+ t9 W. ~" P1 r6 S
  61.                                 font-size: 17px;
    5 b4 z# _5 k! R7 C) p) V5 z
  62.                                 line-height: 1.2;7 ]: Q( s  b$ t" b, R  X3 ^
  63.                         }
    $ c5 Y9 N/ X8 w8 z

  64. ! D( Y6 u# C- V+ G
  65.                         span {
    ' Q+ E1 L, W4 J7 f5 c
  66.                                 color: #f0c674;/ [2 H% T( A# k+ Q5 f7 r
  67.                         }. I/ E" F1 W' Z) m' C
  68. 7 ^& H( A! s+ P
  69.                         i {
    1 Y' U: w9 ]4 b9 c) ~8 e
  70.                                 color: #8abeb7;
    # s, A& O0 o! d+ Z3 h
  71.                         }
    ' \  M' B; F, u! _" Y) x

  72. & ?, F; ]/ s: G# m4 a) h
  73.                         div a {) D2 l) L' Y# I$ C
  74.                                 text-decoration: none;
    8 U6 n  u* o$ n% ^0 k9 p+ r& J
  75.                         }  s7 S9 M9 }! J# E8 R
  76. 5 G6 j" k- g5 A+ g$ Y4 `: _
  77.                         b {
    $ l/ d( _: K0 G/ ^
  78.                                 color: #81a2be;% k. d% c. P8 R& m1 U4 m
  79.                         }6 ]- Y0 n" n* X4 D' J

  80. ' o4 f  s% R  N2 M
  81.                         a.avatar {
    4 w+ `% I. y( F& p
  82.                                 position: fixed;; J* W: f, v! o0 S
  83.                                 bottom: 15px;8 ^+ a0 P: z( a- A
  84.                                 right: -100px;
    $ Q6 n' b7 b/ H: C! x" y& G  ]( |
  85.                                 -webkit-animation: slide 0.5s 4.5s forwards;
    $ d4 ?" u7 P" |- T/ r4 S
  86.                                 animation: slide 0.5s 4.5s forwards;  h; Q# V8 q  O- e% V
  87.                                 display: block;; o0 f( ?. {/ w- `1 P3 P8 P% O
  88.                                 z-index: 43 u0 N& x! l8 O2 ~
  89.                         }
    & G: }: v8 d0 r: K3 ]9 b0 a

  90. * j9 ^) @; E5 ?) J& k3 x
  91.                        
    ) q* ~- I& T9 Y% o
  92. ; _1 x. \9 M9 c5 V0 ^4 C
  93.                         @-webkit-keyframes slide {/ g- {, z; e5 U0 M4 F
  94.                                 from {% p: i) b3 M8 d+ x
  95.                                         right: -100px;: [' T( h) Q# ~& u
  96.                                         -webkit-transform: rotate(360deg);
    / g$ a5 w2 X6 i) G
  97.                                         transform: rotate(360deg);
    0 y5 K6 C7 C& z. q, Y
  98.                                         opacity: 0;' ~  X3 o% f  K$ f, Y
  99.                                 }
    + R7 ?1 z+ v1 ~+ A4 w2 r
  100. + s8 P3 j& T  Z; D2 R
  101.                                 to {
    - _+ E: w9 O5 U
  102.                                         right: 15px;
    5 D- y0 v4 x2 w' b
  103.                                         -webkit-transform: rotate(0deg);  h6 \6 ]% ~2 f
  104.                                         transform: rotate(0deg);
    ' A8 _, T( l. C7 O# N7 l
  105.                                         opacity: 1;
    / J# p" A" r. b
  106.                                 }
    : J! A. F* V  _  b
  107.                         }
    4 e) [" X) \2 r5 U1 Z' H7 S7 M2 [% |

  108. * B) x6 ~* S/ C* t. f$ Y9 Z
  109.                         @keyframes slide {8 ?8 w( \: G. _$ v
  110.                                 from {
      |9 w, u2 z5 Y' K
  111.                                         right: -100px;2 o* l" Y5 a  K' H( p1 @* \
  112.                                         -webkit-transform: rotate(360deg);
    $ \7 G0 [- s' J' R2 C' J% O
  113.                                         transform: rotate(360deg);& A- V5 X4 j  R: h
  114.                                         opacity: 0;
    9 O8 }2 z: M3 N9 I" Z+ O
  115.                                 }" i% M4 v" B/ e7 R

  116. + d! M; `8 O4 U0 V
  117.                                 to {
    + k5 W: ]9 A. r0 R
  118.                                         right: 15px;
    ( S$ U; p  J% N7 Y3 j
  119.                                         -webkit-transform: rotate(0deg);
    9 D& p& a0 B! ^% K3 p0 l6 Z
  120.                                         transform: rotate(0deg);3 k/ m2 t; ]; f- U$ I) ?) J
  121.                                         opacity: 1;' f* f) K5 v; Q% v
  122.                                 }* a  Q0 d8 j1 B: R6 v* C' x7 y0 S
  123.                         }
    & T6 F- K9 n5 |7 A0 o# o' p2 _
  124.                        
    : G! \4 M9 K4 Z) d5 G' K
  125.                         @media (max-width: 576px) {
    / r9 C! T+ ^9 `5 j# r
  126.                                 div {
    : R+ _- e. H0 c" O5 U
  127.                                         width: 90vw;
    9 i! L6 h4 F! E7 r1 L% J
  128.                                 }
    / d$ a$ e9 T. ?; o7 S
  129.                         }
      b4 f9 `& f  f$ y
  130.                 </style>
    , Z# ?4 T1 R5 l( H, t* \1 {3 u! A9 g
  131. ' C; A. s* M- z4 H7 c
  132.         </head>' i* x1 P3 n$ u$ ^
  133.         <body>6 Q- y" t1 F+ Q. i* C& n8 d
  134.         <audio id="vd" src="http://music.163.com/song/media/outer/url?id=522041157.mp3" autoplay="autoplay">8 {8 ~  V0 y+ J3 u1 w" s
  135. </audio>2 }2 u4 K* v) \  a- r
  136.         <h1>404</h1>
    4 [1 C9 ]+ e# _- [1 }& g! P
  137.                 <div id="a">: ~" w; Z; [7 y# \0 U3 @1 L
  138.                         <p>> <span>错误代码</span>: "<i>404 Not Found</i>"</p>
    2 W1 @, f! j5 p* Y3 `7 @9 D
  139.                         <p>> <span>错误描述</span>: "<i>你访问的页面不存在</i>"</p>
    ) z( T, e2 F* J
  140.                         <p>> <span>错误可能由以下原因引起</span>: [<b>HTTP 404 错误意味着链接指向的网页不存在,即原始网页的URL失效,这种情况经常会发生,很难避免,比如说:网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等,导致原来的URL地址无法访问;当Web服务器接到类似请求时,会返回一个404状态码,告诉浏览器要请求的资源并不存在。</b>...]</p>. A# s, n9 F4 ?+ l
  141.                      <p>> <span>404 Not Found 的由来</span> : [<b>据说在第三次科技革命之前,互联网的形态就是一个大型的中央数据库,这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的,如果在数据库中没有找到请求者所需要的文件,或者由于请求者写错了文件编号,用户就会得到一个返回信息:room 404 : file not found。后来互联网兴起后,人们也就习惯了用404作为服务器未找到文件的错误代码了。当然实际考证传说中的room 404是不存在的。</b>]</p>8 S# Z& p, ^3 s4 L
  142.                      <p>> <span>很抱歉给您带来不便 :-)</span></p>) k- c; u/ L; U* }' r
  143.                      <p>><span>318SEC提供</span><i>318SEC</i></p>
    ' A6 D: J& u& [* `7 {* e
  144.                 </div>
    : i( v, P1 ]6 Q1 a4 a

  145. . N8 k* U6 y% R( C0 a# P* C
  146.                 <script type="text/javascript">* ]( S0 `) h  f" o  f
  147.                         var str = document.getElementsByTagName('div')[0].innerHTML.toString();7 J3 M8 c$ U1 G- P2 f) P6 }- Y
  148.                         var i = 0;, k2 N. I+ j2 {
  149.                         document.getElementsByTagName('div')[0].innerHTML = "";% m- {. r! q. _! H: L& P7 j% g

  150. 4 s2 ?# B1 `' E) r6 {4 L5 F8 x
  151.                         setTimeout(function() {- L8 D9 Y% Y$ [
  152.                                 var se = setInterval(function() {
    $ B, R% a+ p" e# I* b: B0 N7 P
  153.                                         i++;9 v0 X5 u7 {7 ?$ m" @( w2 G' [
  154.                                         document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "_";2 m/ _+ P/ P% u5 N; v: h! C
  155.                                         if (i == str.length) {
    * n% ]. p( Z1 ]2 m7 e+ Z
  156.                                                 clearInterval(se);
    4 A' Q9 A" J: P
  157.                                                 document.getElementsByTagName('div')[0].innerHTML = str;
    ( B) s% q, q& Q( U
  158.                                         }% c  h; O( o& E8 O# d+ Y" w
  159.                                 }, 60);- ^  i0 ^; k9 C8 E/ N/ x; t+ o. o
  160.                         }, 0);' y6 @8 p5 v0 L: ~$ O' u2 w2 w
  161.                         function toggleSound() {  S+ U! ^$ x! B6 b( X, U  P
  162.             var music = document.getElementById("vd");//获取ID  
    . [+ [* Y) w+ E6 q
  163.                 console.log(music);7 [/ o9 H+ Q  F+ b$ z4 k
  164.                 console.log(music.paused);
    # B7 p* N3 d1 _( Q
  165.             if (music.paused) { //判读是否播放  
      P# r& Z5 t' ~3 |
  166.                 music.paused=false;; W0 @2 G$ _/ }& x3 }; s1 B; j
  167.                 music.play(); //没有就播放
    + y* A8 A; r; g3 O& y  k
  168.                     }         4 M  ^. x0 b! X" o: c9 w3 }% [3 k6 x3 D
  169.         }5 J( \* ]$ v0 e! X5 R9 d5 S5 k
  170. : J# H  U1 R* P% O4 l! m1 U# s
  171. setInterval("toggleSound()",1);' a+ O4 y0 W/ A8 I, m
  172.                 </script>4 v" v+ S7 ^; W5 W
  173. / K$ k' F0 g5 Q; `1 n$ S0 o) U: l: m
  174.         </body>6 l  J8 q) Z. L/ w3 S
  175. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-29 07:21 , Processed in 0.052696 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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