文章目录
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交互为依据)
静态404页面:HTML+简单CSS+简单的js交互。
- 透明简约404页面
- 暗黑主题404页面
- 飞机404页面
- 哭脸404页面
- 蓝色简约-纯文字404页面
动态404页面:HTML+CSS动画+简单的js交互。(浏览器加载时,会比较耗内存、GPU。)
- 纯css3海面404页面动画特效[外链图片转存失败(img-urc0CZ9y-1565535313715)(https://s2.ax1x.com/2019/07/27/eMwVN8.gif)]
- 腾讯公益-404页面
404小游戏:
- 吾爱破解社区-《圈小猫》
- 404小游戏2:google-酷跑(暂未添加)
补充内容:
- 应用js的三种方式。
- 使超链接失效的方法。
- 实现跳转到上一页的方法。
致谢:
i7素材网:部分404页面来自该网站。
吾爱破解社区:我当时想自定义404页面就是受《圈小猫》游戏的影响,我的项目中的此部分内容转载自:吾爱破解社区在github上的开源项目:phaser-catch-the-cat,游戏试玩地址:https://ganlvtech.github.io/phaser-catch-the-cat/。
该项目使用一个游戏引擎写的,有兴趣可到官网了解:https://phaser.io/。
声明
- 本项目仅用于学习交流使用,大部分网页源自网络,所有权归原作者所有,如涉及侵权,请联系我进行删除。