收集的几个自定义的404页面的模板_404页面模板-程序员宅基地

技术标签: 404页面  GitHub  404  


404pages : HTTP Status 404 – Not Found

404pages

介绍:

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

    • 纯css3海面404页面动画特效[外链图片转存失败(img-urc0CZ9y-1565535313715)(https://s2.ax1x.com/2019/07/27/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/。

声明

  • 本项目仅用于学习交流使用,大部分网页源自网络,所有权归原作者所有,如涉及侵权,请联系我进行删除。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41287260/article/details/99241532

智能推荐

河北农业大学C语言题目,河北农业大学2010-2011学年现科C语言考试试题及答案.doc...-程序员宅基地

文章浏览阅读240次。河北农业大学2010-2011学年现科C语言考试试题及答案河北农业大学课程考试试卷2010—2011学年第2学期 2010 级 独立学院 专业 卷别:A考试科目: C语言程序设计 考核方式: 闭卷考试姓 名: 学号: 专业班级:(注:考生务必将答案写在答题纸上,写在本试卷上无效)本试卷共( 3 )页选择题(共30分,每题1..._河北农业大学c语言程序设计答案

2743:字符串判等_字符串判等 查看提交统计提问 总时间限制: 1000ms 内存限制: 65536kb 描述-程序员宅基地

文章浏览阅读1.2k次。2743:字符串判等查看提交统计提示提问总时间限制: 1000ms 内存限制: 65536kB描述字符串的相关比较 strcmp strlen 最后为了容易比较 在字符串后加上 '\0' 代表字符串的结束判断两个由大小写字母和空格组成的字符串在忽略大小写,且忽略空格后是否相等。输入两行,每行包含一个字符串。输出若两个字符串_字符串判等 查看提交统计提问 总时间限制: 1000ms 内存限制: 65536kb 描述

iOS11 打开相册上移问题解决方法_ios wkwebview打开相册 照片上移-程序员宅基地

文章浏览阅读1k次。原因是app设置了:if (@available(iOS 11, *)) { UIScrollView.appearance.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever; }解决方案 :在弹出系统相册前添加 if (@available(iOS 11, *)) { UIScr..._ios wkwebview打开相册 照片上移

pyecharts 标准线_数据可视化之pyecharts-程序员宅基地

文章浏览阅读1.8k次。EChartsECharts是什么?下面是来自官方的介绍:ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数..._pyecharts添加鼠标绘制工具线

计算机网络应用层课后习题练习(二)_6-40用asn.1基本编码规则对以下4个数组(sequence-of)进行编码。假定每一个数字占-程序员宅基地

文章浏览阅读8.2k次,点赞8次,收藏30次。计算机网络应用层课后习题练习(一)计算机网络应用层课后习题练习(二)应用层知识点概览课后习题练习(二)应用层知识点概览课后习题练习(二)6-17在浏览 器中应当有几个可选解释程序。试给出一些可选解释程序的名称。HTML解释器,java解释器HTML解释器必备,有某些java小程序需要用到java解释器6-18 - 一个万维网网点有1000万个页面,平均每个页面有10个超链。读取- -..._6-40用asn.1基本编码规则对以下4个数组(sequence-of)进行编码。假定每一个数字占

Android通讯录查询篇--ContactsContract.Data开篇_kotlin 通讯录 查询-程序员宅基地

文章浏览阅读2.8k次。正在学习Android,想先找个简单点的东西练习一下,先想到的是通讯录,不过关于手机通讯录方面的资料在我现有的书和视频上都很少看到。没办法只有自己看SDK Docs了。  不管怎么说还是先赞Google的Android Docs,确实很全面,只要你想找就一定能找到你要的东西。不过我感觉想把里面的各个类的关系联系起来还是有点困难,特别是像英文水平过于一般的我,看的那叫个累呀。  好了,还是来说一下正题吧。Android刚开始在通讯录方面好像是提供的Contact_kotlin 通讯录 查询

随便推点

流瞬ElectroMagneticWorks(EMWorks).EMS.2017.SP1.4.for.SW2011-2018.Win64三维电磁场仿真软件 EMS帮助设计人员计算的电、磁、机械和-程序员宅基地

文章浏览阅读3.2k次。流瞬ElectroMagneticWorks(EMWorks).EMS.2017.SP1.4.for.SW2011-2018.Win64三维电磁场仿真软件 EMS帮助设计人员计算的电、磁、机械和热参数包括力、转矩、磁通密度、磁场、电场、电流、流、涡流、电感、电容、电阻、磁链、损耗、饱和,感应电压,力密度,功率损耗,温度、温度梯度、热通量和更。EMS是一种基于强大的有限元方法的三维电磁场仿真_emworks

Mat::isContinuous()接口_mat n_iscontinuous-程序员宅基地

文章浏览阅读537次。这里的continue的意思是在内存上continue,正常情况下,头一行的末尾在内存里和下一行的开头是相连的,但是有时候我们做了一些操作,选取了Mat 的一部分,例如选了一个ROI 这时候就不满足上面说的相连了。那么这时候continuous就被判定为假。..._mat n_iscontinuous

android 8.0系统原生锁屏流程分析_android timeout锁屏流程 源码-程序员宅基地

文章浏览阅读2.1k次。android 8.0,9.0系统锁屏流程分析_android timeout锁屏流程 源码

中标麒麟OS连接win10上的SMB共享_中标麒麟访问windows共享-程序员宅基地

文章浏览阅读1.2w次。使用中标麒麟文件共享Samba功能,主要用的是开始菜单里的连接到服务器,或者文件浏览器里的访问服务器功能!!!文件共享实施手册(仅供参考)中标麒麟系列OS访问windows上的共享文件夹(SMB)1.开启win上的Samba共享服务(控制面板-程序-启用或关闭windows功能,如图1)2.设置文件夹共享2.1(右击文件夹-属性-共享,添加访问的用户名,没有可以新建,新建的时候跳过邮箱登陆即可,如图2。选择Everyone要配置好相应的权限及设置图5相关选项)2.2点击高级共享选项,设置._中标麒麟访问windows共享

React Native与原生模块、组件之间的关系浅析(二)_reactnative 安卓constantstoexport-程序员宅基地

文章浏览阅读502次。那么书接上回,今天主要是继续探究React Native与原生模块的架构方式。原生模块原生模块可以访问activity、运行环境、GPS、存储空间等。原生模块就是能够在JavaScript层调用的API。因为对原生模块的全部请求都要异步执行。如果原生方法需要为JavaScript层的调用返回数据,该操作将通过promise或者回调函数来完成。React Native为这两种方式都提供了..._reactnative 安卓constantstoexport

不同类型的设备对font-weight的支持情况_安卓能识别的字体粗细font-weight: bold;-程序员宅基地

文章浏览阅读1.6k次,点赞2次,收藏4次。安卓系统:ios系统:可以看出:对于汉字 => 安卓和ios的区分是一样的,只有normal和bold。但是注意一点,ios的加粗是从600往后开始算的,安卓的是从700开始算的。所以我们日常要是给文字加粗,正常就是写font-weight:bold/700;对于字母和数字 => 安卓是有对于不同数值的粗细区分的,但是ios没有,跟汉字一样只有normal和bold。另外,lighter只针对安卓有效果,相当于是100/200的粗细效果。normal统一都是400,bold是700_安卓能识别的字体粗细font-weight: bold;