码迷,mamicode.com
首页 > 其他好文 > 详细

一个项目的404错误处理页面

时间:2017-09-09 17:19:39      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:pbr   css   idp   sas   nbsp   asp   smon   get   nfa   

可以从网站上404模板,下载后进行修改即可。

  一个项目难免会出现404页面,为了防止404错误暴露给用户,需要提前做好404页面。在404页面中给用户友好的提示,同时可以自动重定向到项目的主页。

 

web.xml配置404页面

    <!-- 404页面 -->
    <error-page>
        <error-code>404</error-code>
        <location>/404.jsp</location>
    </error-page>

 

 

 

一个404页面的模板:

技术分享

404.jsp  (页面中引用的图片要放到images文件夹下.页面要给处提示,同时能能将用户送回主页)

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>404</title>
<meta http-equiv="refresh" content="60;url=index.jsp">
<!-- content="600,即600秒后返回主页,可根据需要修改或者删除这段代码 -->
<link href="css/error.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<div id="container"><img class="png" src="images/404.png" /> <img class="png msg" src="images/404_msg.png" />
  <p><a href="index.jsp"><img class="png" src="images/404_to_index.png" /></a> </p>
</div>
<div id="cloud" class="png"></div>
<!-- 代码 结束 -->

 
</body>
</html>

 css/error.css

/*  搜集整理 www.198zone.com */
body, div {
    margin: 0;
    padding: 0;
}
body {
    background: url("../images/error_bg.jpg") repeat-x scroll 0 0 #67ACE4;
}
#container {
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
    width: 560px;
}
#container img {
    border: medium none;
    margin-bottom: 50px;
}
#container .error {
    height: 200px;
    position: relative;
}
#container .error img {
    bottom: -50px;
    position: absolute;
    right: -50px;
}
#container .msg {
    margin-bottom: 65px;
}
#cloud {
    background: url("../images/error_cloud.png") repeat-x scroll 0 0 transparent;
    bottom: 0;
    height: 170px;
    position: absolute;
    width: 100%;
}

 

 效果:

技术分享

 

一个项目的404错误处理页面

标签:pbr   css   idp   sas   nbsp   asp   smon   get   nfa   

原文地址:http://www.cnblogs.com/qlqwjy/p/7498600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!