一.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>
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: 0; height: 46px; width: 150px; border-radius: 3px; } .type-3 { background: #F96900; text-indent: 0; height: 46px; width: 150px; border-radius: 3px; } .type-2 i { position: absolute; width: 150px; height: 46px; line-height: 46px; display: block; top: 0; opacity: 1; left: 0; 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: 0; 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: 1; -webkit-transition: all 0.05s linear 0.3s; transition: all 0.05s linear 0.3s; }
最后是404.png
