一.settings配置
1.首先需要在settings中将DEBUG由原来的True改为False
DEBUG = False
2.需要设置
ALLOWED_OSTS = ["*"]
二.url设置
三.views中设置
def page_not_found(request,**kwargs):
return render_to_response('404.html')
上面就是配置404的全部过程
四.最后附一个404页面的模板。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>错误页面</title>
<link rel="stylesheet" type="text/css" href="/static/css/404.css"/>
</head> <body style="background:#0186a7;"> <!---404--->
<div class="error_new_bg pr">
<div class="error_new_content">
<div class="error_new pa">
<div class="fl error_new_left"><img src="/static/img/404.png"></div>
<div class="fl error_new_right">
<div class="error_detail">
<p class="error_p_title">哎呦~ 页面没有找到!</p>
<p class="error_p_con">※ 别急，工程师正在紧急处理,马上就好。</p>
<p class="error_p_con">※ 您可联系QQ:1119564976,通知二当家的开发人员!</p>
<p class="error_p_con">※ 感谢您对博客小屋的支持,请您耐心等待!</p>
</div> <p class="error_new_right_btn pr">
<a href="/index" class="type-2 type-3">
<i> 返回首页</i>
<i> 返回首页 </i>
<i> 返回首页 </i>
<i> 返回首页 </i>
</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
404.html
html, body {
margin: 0px;
height: 100%;
font-family: "微软雅黑";
}
i {
font-style: normal;
}
.pr {
position: relative;
}
.pa {
position: absolute;
}
.fl {
float: left;
}
.mb15 {
margin-bottom: 15px;
}
.error_new_bg {
height: 100%;
width: 100%;
}
.error_new_content {
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
background: url(/images/error.png) no-repeat center center;
min-width: 1000px;
}
.error_new {
top: 50%;
left: 50%;
margin: -185px 0 0 -500px;
height: 371px;
width: 1000px;
}
.error_new_left {
width: 56%;
text-align: right;
-webkit-animation: desc_link ease-in-out 1.5s infinite
}
@-webkit-keyframes desc_link {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-0 -transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(1em);
-ms-transform: translateY(1em);
-0 -transform: translateY(1em);
-moz-transform: translateY(1em);
transform: translateY(1em);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-0 -transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
}
.error_new_right {
width: 40%;
text-align: left;
margin-top: 7%;
margin-left: 4%;
vertical-align: middle
}
.error_new_right_btn {
width: 150px;
height: 46px;
background: #F96900;
display: inline-block;
color: #fff;
line-height: 46px;
border-radius: 3px;
text-align: center;
z-index: 10
}
.error_new_right_btn a {
color: #fff;
text-align: center;
font-size: 16px;
width: 150px;
height: 46px;
display: inline-block;
}
.error_detail {
margin: 0px;
height: auto;
}
.error_detail .error_p_title {
font-size: 28px;
color: #fff;
}
.error_detail .error_p_con {
font-size: 14px;
margin-top: 10px;
line-height: 20px;
color: #fff;
}
.type-2 {
background: #F96900;
text-indent:;
height: 46px;
width: 150px;
border-radius: 3px;
}
.type-3 {
background: #F96900;
text-indent:;
height: 46px;
width: 150px;
border-radius: 3px;
}
.type-2 i {
position: absolute;
width: 150px;
height: 46px;
line-height: 46px;
display: block;
top:;
opacity:;
left:;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
text-align: center;
color: #ffe8e8;
border-radius: 3px;
}
.type-2 i:nth-of-type(2), .type-2 i:nth-of-type(3) {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
clip: rect(0, 60px, 9999px, 0);
border-shadow: 4px;
}
.type-2 i:nth-of-type(3) {
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
clip: rect(0, 9999px, 9999px, 60px);
border-shadow: 4px;
}
.type-2:hover i:nth-of-type(2), .type-2:hover i:nth-of-type(3) {
-webkit-transform: rotateY(0);
transform: rotateY(0);
background: #fff;
color: #fff;
}
.type-2:hover i:first-of-type {
background: #fff;
}
.type-2 i:last-of-type {
opacity:;
background: #fff;
color: #ff464b;
-webkit-transition: none;
transition: none;
}
.type-3 i:last-of-type {
color: #F96900;
}
.type-2:hover i:last-of-type {
opacity:;
-webkit-transition: all 0.05s linear 0.3s;
transition: all 0.05s linear 0.3s;
}
404.css
最后是404.png
