文章目录

• 404pages : HTTP Status 404 – Not Found
• • 介绍：
  • 404页面分类：
  • 补充内容：
  • 致谢：
  • 声明

404pages : HTTP Status 404 – Not Found

介绍：

注：项目已上传到github：https://github.com/yansheng836/404pages，测试网址：https://yansheng836.github.io/404pages/。

​ 1. 该项目收集了几个404的页面模板，可用于替换原生的404页面。我这里只是进行整理，部分来自网络，部分来自其他项目。

​ 2. 自定义一个404页面好像并不难，难的是如何让”状态码为404的请求“都转向我们自定义的404页面，关于这个问题可参考我转发的一篇博客：三种思路实现自定义404页面，我这里用的是第三种:利用web容器提供的error-page标签，在web.xml中添加标签即可实现，如下所示：

<error-page>
    <error-code>404</error-code>
    <location>/resource/view/404.html</location>
</error-page>

​ 3. 我已将每个404页面独立开来，并将他们整理到一个个二级文件夹。这样如果有需要，直接复制对应文件夹即可；当然你也可以进行修改，对其进行个性化设置，可参考：修改建议。

404页面分类：

具体效果到 github pages 查看，下面是简单介绍。

（注：该分类主要是以页面是否有大量js交互为依据）

1. 静态404页面：HTML+简单CSS+简单的js交互。

   • 透明简约404页面
   • 暗黑主题404页面
   • 飞机404页面
   • 哭脸404页面
   • 蓝色简约-纯文字404页面

2. 动态404页面：HTML+CSS动画+简单的js交互。（浏览器加载时，会比较耗内存、GPU。）

   • 纯css3海面404页面动画特效[外链图片转存失败(img-urc0CZ9y-1565535313715)(https://s2.ax1x.com/2019/07/27/eMwVN8.gif)]
   • 腾讯公益-404页面

3. 404小游戏：

   • 吾爱破解社区-《圈小猫》
   • 404小游戏2：google-酷跑（暂未添加）

补充内容：

1. 应用js的三种方式。
2. 使超链接失效的方法。
3. 实现跳转到上一页的方法。

致谢：

1. i7素材网：部分404页面来自该网站。

2. 吾爱破解社区：我当时想自定义404页面就是受《圈小猫》游戏的影响，我的项目中的此部分内容转载自：吾爱破解社区在github上的开源项目：phaser-catch-the-cat，游戏试玩地址：https://ganlvtech.github.io/phaser-catch-the-cat/。

   该项目使用一个游戏引擎写的，有兴趣可到官网了解：https://phaser.io/。

声明

• 本项目仅用于学习交流使用，大部分网页源自网络，所有权归原作者所有，如涉及侵权，请联系我进行删除。