404.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>404</title>
  7. <style>
  8. body {
  9. padding: 0;
  10. margin: 0;
  11. }
  12. .container {
  13. background: #00a2ff;
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. width: 100%;
  18. height: 100vh;
  19. overflow: hidden;
  20. }
  21. .container-title {
  22. width: 800px;
  23. height: 450px;
  24. left: 50%;
  25. top: 50%;
  26. text-align: center;
  27. justify-content: center;
  28. align-items: center;
  29. flex-direction: column;
  30. display: flex;
  31. -webkit-transform: translate(-50%, -50%);
  32. transform: translate(-50%, -50%);
  33. position: absolute;
  34. color: white;
  35. line-height: 1;
  36. font-weight: 700;
  37. }
  38. .title > * {
  39. display: inline-block;
  40. font-size: 200px;
  41. }
  42. .number {
  43. text-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
  44. padding: 50px;
  45. }
  46. .tip {
  47. font-size: 25px;
  48. margin-top: 1.5em;
  49. text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div class="container">
  55. <div class="container-title">
  56. <div class="title">
  57. <div class="number">4</div>
  58. <div class="number">0</div>
  59. <div class="number">4</div>
  60. </div>
  61. <div class="tip">找不到当前网页。</div>
  62. </div>
  63. </div>
  64. </body>
  65. </html>