404pages : HTTP Status 404 – Not Found

介绍

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

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

<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页面动画特效
   • 腾讯公益-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/ 。

声明

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

我的环境

MyEclipse10.7, JDK1.8, Tomcat7.0

构建(使用)

1. 克隆项目到本地：git clone https://github.com/yansheng836/404pages.git
2. 利用IDE（因为后期考虑添加另外两种访问404的方法）：导入(My)Eclipse，调整相关环境，部署到Tomcat，访问index.html。
3. 不利用IDE（只能查看404页面，不能实现让”状态码为404的请求“都转向我们自定义的404页面）：直接用浏览器打开index.html。

总结

有空我会持续改进，希望可以加关注： watch 、 star或者fork，同时也方便下次访问。

License

This software is licensed under the MIT License. View the license.

Star History