经常输入资源名称错误时,会出现界面找不到的情况,很不友好,编写一个404界面找不到时的显示界面

简介: 经常输入资源名称错误时,会出现界面找不到的情况,很不友好,编写一个404界面找不到时的显示界面

查看相关知识

查看相关练习



要求:


经常输入资源名称错误时,会出现界面找不到的情况,很不友好,编写一个404界面找不到时的显示界面


25.png


实现步骤:


创建动态的 Java Web 项 目


在 WebContent 目录内,创建 HTML5 文件“404.html”,编写界面代码


配置 Eclipse 的 Tomcat 服务器,并部署项目“Java_web_01”。启动 Tomcat 服务器


在浏览器地址栏输入界面访问URL,测试是否能正常访问


404.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页访问不了</title>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
    box-sizing: 0;
  }
  body{
    background-color: #ededef;
    font-family: "楷体";
  }
  #warp{
    padding: 200px 0px;
    display: flex;
    justify-content: center;
  }
  .left{
    padding: 150px;
    background: url(img/bg.jpg) no-repeat;
    background-size: 80% 80%;
    background-position: right;
  }
  .left_img{
    text-align: right;
    float: left;
    background: url(img/bg.jpg) no-repeat;
  }
  .right{
    line-height: 30px;
    margin: auto 50px;
  }
  .right h3{
  }
  .reason,.oper{
    margin-top: 20px;
  }
</style>
</head>
<body>
  <div id="warp">
    <div class="left">
      <div class="left_img"></div>
    </div>
    <div class="right">
      <h3 class="title">啊哦,你所访问的页面不存在,可能是炸了</h3>
      <div class="reason">
        <p>可能的原因:</p>
        <p>1、手抖打错了</p>
        <p>2、链接过了保质期</p>
      </div>
      <div class="oper">
        <p><a href="javascript:histor.go(-1)">返回上一级页面</a></p>
        <p><a href="#">回到网站首页</a></p>
      </div>
    </div>
  </div>
</body>
</html>



源代码:点击查看

相关文章
|
存储 前端开发 Java
一篇文章带你搞懂Controller、Service等各层的功能与作用
本文将深入探讨这些controller.service等层的作用与功能,帮助读者更好地理解它们在软件开发中的重要性和运作原理。
3904 0
|
数据采集 前端开发 数据挖掘
kettle开发-SQ索引优化
kettle开发-SQ索引优化
206 0
|
机器学习/深度学习 人工智能 监控
机器视觉:原理、应用与编程实践
机器视觉:原理、应用与编程实践
|
6月前
|
持续交付 云计算 数据安全/隐私保护
《解锁容器技术:软件开发云化的神奇密码》
容器技术是云计算的关键支撑,正深刻改变软件开发、部署与运维模式。作为操作系统级虚拟化技术,它将应用及其依赖打包成独立单元,相比传统虚拟机更轻量、启动更快、资源利用率更高。容器技术助力快速部署、敏捷开发,推动微服务架构落地,增强应用可移植性,降低资源成本,并促进持续集成与交付(CI/CD)。许多企业已通过容器技术实现高效业务扩展与创新,如电商企业在高并发场景下的自动扩缩容,金融科技公司借助容器灵活切换云资源。容器技术已成为软件开发云化的核心驱动力,为数字化转型提供强大支持。
102 12
《解锁容器技术:软件开发云化的神奇密码》
|
存储 关系型数据库 MySQL
Percona XtraBackup是否支持PostgreSQL数据库备份?
【5月更文挑战第13天】Percona XtraBackup是否支持PostgreSQL数据库备份?
254 1
|
12月前
|
C语言
C语言指针(2)
C语言指针(2)
57 1
|
机器学习/深度学习 存储 数据采集
数字化与数智化有什么区别?
数字化(Digitalization)是将信息转换为数字(即计算机可读)格式的过程。数智化(Digital and Intelligent Transformation)是数字智慧化与智慧数字化的融合。
596 1
|
程序员 项目管理
年薪百万,一夜归零!程序员,过了 35 岁,你还能做什么?
年薪百万,一夜归零!程序员,过了 35 岁,你还能做什么?
224 0
|
机器学习/深度学习 PyTorch TensorFlow
【机器学习】基于tensorflow实现你的第一个DNN网络
【机器学习】基于tensorflow实现你的第一个DNN网络
225 0
|
SQL 中间件 关系型数据库
OBCA认证考试
OBCA认证考试
622 0