分享一个仿Windows10蓝屏的 404 页面

浩宇 帝一

发表文章数:84

热门标签

, ,

全部代码如下:

  1. <!--**
  2. * 仿 Windows 蓝屏 404 页面
  3. * 帝一博客 编写
  4. * 文章地址:https://www.diyigzs.com/333.html
  5. * 编写日期:2019-6-13
  6. **-->
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10. <meta charset="utf-8">
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13. <title>404 - 页面未找到</title>
  14. <style type="text/css">
  15. body {
  16. background-color: #0099CC;
  17. color: #FFFFFF;
  18. font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
  19. margin-left: 100px;
  20. }
  21. .face {
  22. font-size: 100px;
  23. }
  24. p{
  25. font-size: 24px;
  26. padding: 8px;
  27. line-height: 40px;
  28. }
  29. .tips {
  30. font-size: 16px
  31. }
  32. /*针对小屏幕的优化*/
  33. @media screen and (max-width: 600px) {
  34. body{
  35. margin: 0 10px;
  36. }
  37. p{
  38. font-size: 18px;
  39. line-height: 30px;
  40. }
  41. .tips {
  42. display: inline-block;
  43. padding-top: 10px;
  44. font-size: 14px;
  45. line-height: 20px;
  46. }
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <script>
  52. var i = 5; //这里是倒计时的秒数
  53. var intervalid;
  54. intervalid = setInterval("cutdown()", 1000);
  55. function cutdown() {
  56. if (i == 0) {
  57. window.location.href = "http://www.diyigzs.com"; //倒计时完成后跳转的地址
  58. clearInterval(intervalid);
  59. }
  60. document.getElementById("mes").innerHTML = i;
  61. i--;
  62. }
  63. window.onload = cutdown;
  64. </script>
  65. <span class="face">:(</span>
  66. <p>您访问的页面没有找到。<br>
  67. <span id="mes"></span> 秒后转至我的个人博客,您可以在那里试着找找您所需要的信息。<br>
  68. <span class="tips">如果您想了解更多信息,则可以稍后在线搜索此错误: 算了你还是别搜了……</span>
  69. </p>
  70. </body>
  71. </html>

分享一个仿Windows10蓝屏的 404 页面

未经允许不得转载:作者:帝一, 转载或复制请以 超链接形式 并注明出处 帝一天博
原文地址:《分享一个仿Windows10蓝屏的 404 页面》 发布于2020-02-17, 本文最后更新于2020年2月17日,已超过217天没有更新,如果文章内容失效,请反馈给我们,谢谢!

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

帝一天博
在此声明如有侵权,违规等请发我邮箱(admin@diyigzs.com)告知。本人会看到立即删除!! 温馨提示:最近少出门小心传染谢谢大家配合
隐藏
变装
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册