经常输入资源名称错误时,会出现界面找不到的情况,很不友好,编写一个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>



源代码:点击查看

相关文章
|
小程序
小程序常见简单界面功能属性记录
小程序常见简单界面功能属性记录
156 0
|
小程序 JavaScript API
小程序点击复制功能制作
小程序点击复制功能制作
196 0
|
3月前
|
搜索推荐
7、自定义工作界面
这篇文章是关于如何自定义Photoshop工作界面的,但具体内容没有在摘要中提供,因此无法给出详细摘要。如果需要了解Photoshop工作界面的自定义方法,包括面板、菜单、快捷键等的个性化设置,建议直接访问博客以获取完整信息。
7、自定义工作界面
|
jenkins 持续交付
Jenkins 管理界面里提示“反向代理设置有误“的问题解决办法
Jenkins 管理界面里提示“反向代理设置有误“的问题解决办法
1741 0
Jenkins 管理界面里提示“反向代理设置有误“的问题解决办法
Qt-修改界面无效的可能情况
Qt修改界面无效的可能情况
493 0
|
前端开发 JavaScript 小程序
【‘极端’测试提的问题】输入栏填入表情图片需要进行异常处理
【‘极端’测试提的问题】输入栏填入表情图片需要进行异常处理
149 0
【‘极端’测试提的问题】输入栏填入表情图片需要进行异常处理
|
前端开发 Java 数据库
给角色分配菜单的功能后台代码的编写 | 学习笔记
快速学习给角色分配菜单的功能后台代码的编写
给角色分配菜单的功能后台代码的编写 | 学习笔记
|
Web App开发 移动开发 JavaScript
VS Code 自定义快捷输入
位置 ctrl+shift+p 搜索: snippets 输入类型: 比如 html、javascript 参数说明 prefix:使用代码段的快捷入口 body:需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.
2102 0