tomcat和nginx自定义404错误页面

news2025/3/5 5:24:19

nginx

编辑nginx配置文件

vim /www/server/nginx/nginx.conf

server{
	listen 80;
	error_page 404  /404.html;
	location = /404.html{
	root    /home/liu/html/error-html;
	}
}

在家目录下创建一个html/error-html目录，用于存放错误页面
在error-html目录下创建404.html，里面写404代码

tomcat

配置web.xml

vim webapp/WEB-INF/web.xml

添加如下内容

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

在项目根目录下创建404.html文件

这里提供几个网上找的几个有意思的404页面源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>404,网页丢失啦</title>

<style>
body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

div {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.rail {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transform: rotateX(-30deg) rotateY(-30deg);
          transform: rotateX(-30deg) rotateY(-30deg);
}
.rail .stamp {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #141414;
  color: #fff;
  font-size: 7rem;
}
.rail .stamp:nth-child(1) {
  -webkit-animation: stampSlide 40000ms -2300ms linear infinite;
          animation: stampSlide 40000ms -2300ms linear infinite;
}
.rail .stamp:nth-child(2) {
  -webkit-animation: stampSlide 40000ms -4300ms linear infinite;
          animation: stampSlide 40000ms -4300ms linear infinite;
}
.rail .stamp:nth-child(3) {
  -webkit-animation: stampSlide 40000ms -6300ms linear infinite;
          animation: stampSlide 40000ms -6300ms linear infinite;
}
.rail .stamp:nth-child(4) {
  -webkit-animation: stampSlide 40000ms -8300ms linear infinite;
          animation: stampSlide 40000ms -8300ms linear infinite;
}
.rail .stamp:nth-child(5) {
  -webkit-animation: stampSlide 40000ms -10300ms linear infinite;
          animation: stampSlide 40000ms -10300ms linear infinite;
}
.rail .stamp:nth-child(6) {
  -webkit-animation: stampSlide 40000ms -12300ms linear infinite;
          animation: stampSlide 40000ms -12300ms linear infinite;
}
.rail .stamp:nth-child(7) {
  -webkit-animation: stampSlide 40000ms -14300ms linear infinite;
          animation: stampSlide 40000ms -14300ms linear infinite;
}
.rail .stamp:nth-child(8) {
  -webkit-animation: stampSlide 40000ms -16300ms linear infinite;
          animation: stampSlide 40000ms -16300ms linear infinite;
}
.rail .stamp:nth-child(9) {
  -webkit-animation: stampSlide 40000ms -18300ms linear infinite;
          animation: stampSlide 40000ms -18300ms linear infinite;
}
.rail .stamp:nth-child(10) {
  -webkit-animation: stampSlide 40000ms -20300ms linear infinite;
          animation: stampSlide 40000ms -20300ms linear infinite;
}
.rail .stamp:nth-child(11) {
  -webkit-animation: stampSlide 40000ms -22300ms linear infinite;
          animation: stampSlide 40000ms -22300ms linear infinite;
}
.rail .stamp:nth-child(12) {
  -webkit-animation: stampSlide 40000ms -24300ms linear infinite;
          animation: stampSlide 40000ms -24300ms linear infinite;
}
.rail .stamp:nth-child(13) {
  -webkit-animation: stampSlide 40000ms -26300ms linear infinite;
          animation: stampSlide 40000ms -26300ms linear infinite;
}
.rail .stamp:nth-child(14) {
  -webkit-animation: stampSlide 40000ms -28300ms linear infinite;
          animation: stampSlide 40000ms -28300ms linear infinite;
}
.rail .stamp:nth-child(15) {
  -webkit-animation: stampSlide 40000ms -30300ms linear infinite;
          animation: stampSlide 40000ms -30300ms linear infinite;
}
.rail .stamp:nth-child(16) {
  -webkit-animation: stampSlide 40000ms -32300ms linear infinite;
          animation: stampSlide 40000ms -32300ms linear infinite;
}
.rail .stamp:nth-child(17) {
  -webkit-animation: stampSlide 40000ms -34300ms linear infinite;
          animation: stampSlide 40000ms -34300ms linear infinite;
}
.rail .stamp:nth-child(18) {
  -webkit-animation: stampSlide 40000ms -36300ms linear infinite;
          animation: stampSlide 40000ms -36300ms linear infinite;
}
.rail .stamp:nth-child(19) {
  -webkit-animation: stampSlide 40000ms -38300ms linear infinite;
          animation: stampSlide 40000ms -38300ms linear infinite;
}
.rail .stamp:nth-child(20) {
  -webkit-animation: stampSlide 40000ms -40300ms linear infinite;
          animation: stampSlide 40000ms -40300ms linear infinite;
}

@-webkit-keyframes stampSlide {
  0% {
    -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  }
  100% {
    -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  }
}

@keyframes stampSlide {
  0% {
    -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  }
  100% {
    -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  }
}
.world {
  -webkit-transform: rotateX(-30deg) rotateY(-30deg);
          transform: rotateX(-30deg) rotateY(-30deg);
}
.world .forward {
  position: absolute;
  -webkit-animation: slide 2000ms linear infinite;
          animation: slide 2000ms linear infinite;
}
.world .box {
  width: 200px;
  height: 200px;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
          animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
}
.world .box .wall {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid #fafafa;
  box-sizing: border-box;
}
.world .box .wall::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 7rem;
}
.world .box .wall:nth-child(1) {
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
}
.world .box .wall:nth-child(2) {
  -webkit-transform: rotateX(180deg) translateZ(100px);
          transform: rotateX(180deg) translateZ(100px);
}
.world .box .wall:nth-child(3) {
  -webkit-transform: rotateX(90deg) translateZ(100px);
          transform: rotateX(90deg) translateZ(100px);
}
.world .box .wall:nth-child(3)::before {
  -webkit-transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
          transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
          animation: zeroFour 4000ms -2000ms linear infinite;
}
.world .box .wall:nth-child(4) {
  -webkit-transform: rotateX(-90deg) translateZ(100px);
          transform: rotateX(-90deg) translateZ(100px);
}
.world .box .wall:nth-child(4)::before {
  -webkit-transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
          transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
          animation: zeroFour 4000ms -2000ms linear infinite;
}
.world .box .wall:nth-child(5) {
  -webkit-transform: rotateY(90deg) translateZ(100px);
          transform: rotateY(90deg) translateZ(100px);
}
.world .box .wall:nth-child(5)::before {
  -webkit-transform: rotateX(180deg) translateZ(-1px);
          transform: rotateX(180deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms linear infinite;
          animation: zeroFour 4000ms linear infinite;
}
.world .box .wall:nth-child(6) {
  -webkit-transform: rotateY(-90deg) translateZ(100px);
          transform: rotateY(-90deg) translateZ(100px);
}
.world .box .wall:nth-child(6)::before {
  -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
          transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
  -webkit-animation: zeroFour 4000ms linear infinite;
          animation: zeroFour 4000ms linear infinite;
}

@-webkit-keyframes zeroFour {
  0% {
    content: '4';
  }
  100% {
    content: '0';
  }
}

@keyframes zeroFour {
  0% {
    content: '4';
  }
  100% {
    content: '0';
  }
}
@-webkit-keyframes roll {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  85% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  87% {
    -webkit-transform: rotateZ(88deg);
            transform: rotateZ(88deg);
  }
  90% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  100% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
}
@keyframes roll {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  85% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  87% {
    -webkit-transform: rotateZ(88deg);
            transform: rotateZ(88deg);
  }
  90% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  100% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
  }
}
</style>
</head>
<body>

<div class="rail">
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
  <div class="stamp four">4</div>
  <div class="stamp zero">0</div>
</div>
<div class="world">
  <div class="forward">
    <div class="box">
      <div class="wall"></div>
      <div class="wall"></div>
      <div class="wall"></div>
      <div class="wall"></div>
      <div class="wall"></div>
      <div class="wall"></div>
    </div>
  </div>
</div>

</body>
</html>

预览效果：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1329245.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

心有暖阳，笃定前行，2024考研加油

心有暖阳，笃定前行，2024考研加油

2024考研学子&#xff0c;所有的付出终有收获&#xff0c;阳光终将穿透阴霾&#xff0c;终将上岸。 当曙光破晓的时候&#xff0c;你可曾记得那些星月为伴&#xff0c;孤独为友&#xff0c;理想为灯来指引前行之路的日子&#xff0c;那些默默扎根的日子终将化作星星在未来闪闪发…
阅读更多...
第一部分 数理逻辑

第一部分 数理逻辑

目录 什么是命题 注意&#xff1a; 例1 下列句子中那些是命题&#xff1f; 联结词 例2 将下列命题符号化. 注意&#xff1a; 例4 设 p&#xff1a;天冷&#xff0c;q&#xff1a;小王穿羽绒服&#xff0c;将下列命题符号化 例5 求下列复合命题的真值 例如 真值表: 例&#xff1…
阅读更多...
我的应用我做主：扩展线程池

我的应用我做主：扩展线程池

自定义线程创建&#xff1a;ThreadFactory 线程池中的线程是从哪里来的呢&#xff1f; ThreadPoolExecutor(int corePoolSize,//指定了线程池种的线程数量 int maximumPoolSize,//指定了线程池中的最大线程数量。 long keepAliveTime,// 当线程池数量超过了corePoolSize&#x…
阅读更多...
MyBatis关联查询（二、一对多查询）

MyBatis关联查询（二、一对多查询）

MyBatis关联查询&#xff08;二、一对多查询&#xff09; 需求&#xff1a;查询所有用户信息及用户关联的账户信息。 分析&#xff1a;用户信息和他的账户信息为一对多关系&#xff0c;并且查询过程中如果用户没有账户信息&#xff0c;此时也要将用户信息查询出来&#xff0c…
阅读更多...
Python （十四）pandas（二）

Python （十四）pandas（二）

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…
阅读更多...
WPF组合控件TreeView+DataGrid之DataGrid封装-粉丝专栏

WPF组合控件TreeView+DataGrid之DataGrid封装-粉丝专栏

wpf的功能非常强大&#xff0c;很多控件都是原生的&#xff0c;但是要使用TreeViewDataGrid的组合&#xff0c;就需要我们自己去封装实现。 我们需要的效果如图所示&#xff1a; 这2个图都是第三方控件自带的&#xff0c;并且都是收费使用。 现在我们就用原生的控件进行封装一…
阅读更多...
rouyi-vue-pro+vue3+vite4+Element Plus项目中使用生成Vue2+Element UI标准模板

rouyi-vue-pro+vue3+vite4+Element Plus项目中使用生成Vue2+Element UI标准模板

运行一个pro-vue3的前端项目&#xff0c;以及后端服务 在基础设施-代码生成模块中选择某张数据库表导入&#xff0c;并编辑生成信息&#xff0c;前端类型&#xff1a;Vue2Element UI标准模板 在vue3项目中创建一个vue文件 <template> </template><script>…
阅读更多...
云轴科技ZStack 英特尔联合成立云系统解决方案创新中心

云轴科技ZStack 英特尔联合成立云系统解决方案创新中心

近日&#xff0c;云轴科技ZStack 与英特尔联合成立云系统解决方案创新中心&#xff0c;并完成揭牌仪式。双方将基于多年合作基础进一步加快研发下一代创新技术和解决方案&#xff0c;为客户和合作伙伴提供更高效、安全的云基础设施解决方案。 左三:云轴科技ZStack 联合创始人兼…
阅读更多...
4.3【共享源】克隆实战开发之截屏（一）

4.3【共享源】克隆实战开发之截屏（一）

一，Screen截屏介绍 Screen的截屏是指从源读取像素，然后复制到缓冲区。然后可以根据需要操纵缓冲区；它可以简单地写入文件，也可以在其他窗口或显示器中使用。 Screen API从源中读取像素，并将其复制到提供的缓冲区中以捕获截屏。缓冲区可以是pixmap或窗口缓冲区，但必须设…
阅读更多...
Pytorch常用的函数(五)np.meshgrid()和torch.meshgrid()函数解析

Pytorch常用的函数(五)np.meshgrid()和torch.meshgrid()函数解析

Pytorch常用的函数(五)np.meshgrid()和torch.meshgrid()函数解析 我们知道torch.meshgrid()函数的功能是生成网格&#xff0c;可以用于生成坐标&#xff1b; 在numpy中也有一样的函数np.meshgrid()&#xff0c;但是用法不太一样&#xff0c;我们直接上代码进行解释。 1、两者…
阅读更多...
如何进行USB丢弃攻击？

如何进行USB丢弃攻击？

USB丢弃攻击&#xff0c;类似于一场表演艺术&#xff0c;您需要构建一个引人入胜的故事&#xff0c;激发目标的好奇心&#xff0c;让他们忽略基本的安全意识&#xff0c;插入您精心准备的USB设备! 本文章仅限娱乐&#xff0c;请勿模仿或进行违法活动&#xff01; 一、选择放置…
阅读更多...
鸿蒙声势浩大，程序员能从中看出什么机遇？

鸿蒙声势浩大，程序员能从中看出什么机遇？

鸿蒙声势浩大&#xff0c;在最近的大厂商合作消息中我们能看到什么未来机遇&#xff1f;&#xff1f; 12 月 22 日消息&#xff0c;据华为开发者联盟服务消息&#xff0c;来自政务、金融、教育等行业的 8 家企业与华为签约并官宣启动鸿蒙原生应用开发。此前&#xff0c;美团、…
阅读更多...
python调用GPT API

python调用GPT API

每次让gpt给我生成一个调用api的程序时&#xff0c;他经常会调用以前的一些api的方法&#xff0c;导致我的程序运行错误&#xff0c;所以这期记录一下使用新的方法区调用api 参考网址 Migration Guide&#xff0c;这里简要地概括了一下新版本做了哪些更改 OpenAI Python API l…
阅读更多...
c++11特新：弱引用智能指针

c++11特新：弱引用智能指针

弱引用智能指针std::weak_ptr可以看做是shared_ptr的助手&#xff0c;它不管理shared_ptr内部的指针。std::weak_ptr没有重载操作符*和->&#xff0c;因为它不共享指针&#xff0c;不能操作资源&#xff0c;所以它的构造不会增加引用计数&#xff0c;析构也不会减少引用计数…
阅读更多...
Springboot是什么？Springboot详解！入门介绍

Springboot是什么？Springboot详解！入门介绍

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化&#xff0c;文章内容兼具广度、深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于…
阅读更多...
SpringBoot 多环境开发配置文件

SpringBoot 多环境开发配置文件

在开发过程中&#xff0c;往往开发环境和生产环境需要不同的配置。为了兼容两种运行环境&#xff0c;提高开发效率&#xff0c;可以使用多环境开发配置文件。 配置文件结构大概是这样&#xff1a; application.yml -主启动配置文件&#xff08;用于控制使用哪种环境配…
阅读更多...
【Proteus仿真】【Arduino单片机】蓝牙遥控小车

【Proteus仿真】【Arduino单片机】蓝牙遥控小车

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使LCD1602液晶&#xff0c;L298电机&#xff0c;直流电机&#xff0c;HC05/06蓝牙模块等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602…
阅读更多...
web前端html笔记2

web前端html笔记2

新增状态标签<meter><progress> <meter> 属性 值 描述 high 数值 规定高值 low 数值 规定低值 max 数值 规定最大值 min 数值 规定最小值 optimum 数值 规定最优值 value 数值 规定当前值 <body> <meter high"50" …
阅读更多...
hive命令启动出现classnotfound

hive命令启动出现classnotfound

环境&#xff1a;ambari集群三个节点node104、node105和node106&#xff0c;其中node105上有hiveserver2&#xff0c;并且三个节点均有HIVE CLIENT 注意&#xff1a;“./”指hive安装目录 其中装有hiveserver2的node105节点&#xff0c;由于某种需要向lib目录下上传了某些jar包…
阅读更多...
图数据库NebulaGraph学习

图数据库NebulaGraph学习

1.图空间(Space)操作 1.1创建图空间&#xff0c;指定vid_type为整形 CREATE SPACE play_space (partition_num 10, replica_factor 1, vid_type INT64) COMMENT "运动员库表空间"; 1.2创建图空间&#xff0c;指定vid_type为字符串 CREATE SPACE play_space (…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023