Code Monkey home page Code Monkey logo

404pages's Introduction

GitHub GitHub repo size GitHub release GitHub last commit GitHub language count GitHub top language

404pages : HTTP Status 404 – Not Found

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页面eMdO76.jpg
    • 暗黑主题404页面eMwS9e.jpg
    • 飞机404页面eMw9cd.jpg
    • 哭脸404页面eMwFBt.jpg
    • 蓝色简约-纯文字404页面eMwinI.jpg
  2. 动态404页面:HTML+CSS动画+简单的js交互。(浏览器加载时,会比较耗内存、GPU。)

    • 纯css3海面404页面动画特效eMwVN8.gif
    • 腾讯公益-404页面eMwkHP.jpg
  3. 404小游戏:

    • 吾爱破解社区-《圈小猫》eMwEAf.jpg
    • 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.1利用IDE(因为后期考虑添加另外两种访问404的方法):导入(my)eclipse,调整相关环境,部署到Tomcat,访问index.html

2.2不利用IDE(只能查看404页面,不能实现让”状态码为404的请求“都转向我们自定义的404页面):直接用浏览器打开index.html

总结

有空我会持续改进,希望可以加关注: watchstar或者fork,同时也方便下次访问。

License

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

404pages's People

Contributors

yansheng836 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.