经常输入资源名称错误时，会出现界面找不到的情况，很不友好，编写一个404界面找不到时的显示界面-阿里云开发者社区

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

2022-05-12 111

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

查看相关知识

查看相关练习

要求：

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

实现步骤：

创建动态的 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>