zbb20170301_好看的404和500页面

Posted 2020-09-02 Daryll

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zbb20170301_好看的404和500页面相关的知识，希望对你有一定的参考价值。

HTTP_404.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP ‘HTTP_404.jsp‘ starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="${pageContext.request.contextPath }/static/css/bootstrap.min.css">
<script
    src="${pageContext.request.contextPath }/static/js/jquery-1.11.2.min.js"></script>
<script
    src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script>
<link href="${pageContext.request.contextPath }/static/css/error.css" rel="stylesheet" type="text/css" />
</head>

<body class="page-404-full-page">

    <div class="row-fluid">

        <div class="span12 page-404">

            <div class="number">404</div>

            <div class="details">

                <h3>Opps, You‘re lost.</h3>

                <p>

                    We can not find the page you‘re looking for.<br />

                    <a href="./">Return home</a> 

                </p>


            </div>

        </div>

    </div>
  </body>


</html>

HTTP_500.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP ‘HTTP_500.jsp‘ starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="${pageContext.request.contextPath }/static/css/bootstrap.min.css">
<script
    src="${pageContext.request.contextPath }/static/js/jquery-1.11.2.min.js"></script>
<script
    src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script>
<link href="${pageContext.request.contextPath }/static/css/error.css" rel="stylesheet" type="text/css" />

</head>

<body>
<body class="page-500-full-page">

    <div class="row-fluid">

        <div class="span12 page-500">

            <div class=" number">500</div>

            <div class=" details">

                <h3>Opps, Something went wrong.</h3>

                <p>

                    We are fixing it!<br /> Please come back in a while.<br /> <a
                        href="./">Return home</a>

                </p>

            </div>

        </div>

    </div>
</body>
</html>

error.css

/***
Error Pages
***/

/* 404 page option #1 */

.page-404 {
  text-align: center;
}

.page-404 .number {
  display: inline-block;
  letter-spacing: -10px;
  margin-top: 0px;
  line-height: 128px;
  font-size: 158px;
  font-weight: 300;
  color: #7bbbd6;
  text-align: right;
}

.page-404 .details {
  margin-left: 40px;
  display: inline-block;
  padding-top: 0px;
  text-align: left;
}

/* 500 page option #1 */
.page-500 {
  text-align: center;
}

.page-500 .number {  
  display: inline-block;
  letter-spacing: -10px;
  line-height: 128px;
  font-size: 158px;
  font-weight: 300;
  color: #ec8c8c;
  text-align: right;
}

.page-500 .details {
  margin-left: 40px;
  display: inline-block;
  text-align: left;
}

/* 404 page option #2*/
.page-404-full-page {
  padding: 20px;
  background-color: #fafafa !important;
}

.page-404-full-page .details input {
  background-color: #ffffff;
}

.page-404-full-page .page-404 {
  margin-top: 100px;
}

/* 500 page option #2*/
.page-500-full-page {
  padding: 20px;
  background-color: #fafafa !important;
}

.page-500-full-page .details input {
  background-color: #ffffff;
}

.page-500-full-page .page-500 {
  margin-top: 100px;
}

/* 404 page option #3*/

.page-404-3 {
  background: #000 !important ;
} 

.page-404-3 .page-inner img {
  right: 0;
  bottom: 0;
  z-index: -1;
  position: absolute;
}

.page-404-3 .error-404 {
  color: #fff;
  text-align: left;
  padding: 70px 20px 0;
}

.page-404-3 h1 {
  color: #fff;
  font-size: 130px;
  line-height: 160px;
}

.page-404-3 h2 {
  color: #fff;
  font-size: 30px;
  margin-bottom: 30px;
}

.page-404-3 p {
  color: #fff;
  font-size: 16px;
}


@media (max-width: 480px) { 

  .page-404 .number,
  .page-500 .number,
  .page-404 .details,
  .page-500 .details {
    text-align: center;
    margin-left: 0px;
  }

  .page-404-full-page .page-404 {
    margin-top: 30px;
  }

  .page-404-3 .error-404 {
    text-align: left;
    padding-top: 10px;
  }

  .page-404-3 .page-inner img {
    right: 0;
    bottom: 0;
    z-index: -1;
    position: fixed;
  }

}

以上是关于zbb20170301_好看的404和500页面的主要内容，如果未能解决你的问题，请参考以下文章

Spring MVC配置404或500等错误页面

Django_404_403_500页面处理

如何使用静态文件在开发服务器上测试自定义 404 和 500 页面？

ASP.NET自定义404和500错误页面

检查页面500和404的测试用例

应用程序缓存和 404/500 页面