Django笔记：分享一个错误页面

最新推荐文章于 2023-05-10 11:52:32 发布

研究僧12138

最新推荐文章于 2023-05-10 11:52:32 发布

阅读量134

点赞数

分类专栏： # 【Django】文章标签： html5 css3 前端 django

本文链接：https://blog.csdn.net/qq_43727392/article/details/124265891

版权

【Django】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做个笔记。开发时处理出错，也要给用户一个良好的视觉体验。下面分享一个错误页面：
error.css

html,body {
    height: 100%;
}

body {
    color: #444;
            font: 12px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background: #f2f2f2 url("../img/blueprint.png") repeat 0 0;
}

div.da-wrapper {
    width: 100%;
    height: auto;
    min-height: 100%;
    position: relative;
    min-width: 320px
}

div.da-wrapper .da-container {
    width: 96%;
    margin: auto
}

div.da-content {
    clear: both;
    padding-bottom: 58px
}

@media only screen and (max-width:480px) {
    div.da-content {
        margin-top: auto
    }
}

div.da-error-wrapper {
    width: 320px;
    padding: 30px 0;
    margin: auto;
    position: relative
}

div.da-error-wrapper .da-error-heading {
    color: #e15656;
    text-align: center;
    font-size: 24px;
    font-family: Georgia, "Times New Roman", Times, serif
}

@-webkit-keyframes error-swing {
    0% {
        -webkit-transform: rotate(1deg)
    }

    100% {
        -webkit-transform: rotate(-2deg)
    }
}

@-moz-keyframes error-swing {
    0% {
        -moz-transform: rotate(1deg)
    }

    100% {
        -moz-transform: rotate(-2deg)
    }
}

@keyframes error-swing {
    0% {
        transform: rotate(1deg)
    }

    100% {
        transform: rotate(-2deg)
    }
}

div.da-error-wrapper .da-error-code {
    width: 285px;
    height: 170px;
    padding: 127px 16px 0 16px;
    position: relative;
    margin: auto;
    margin-bottom: 20px;
    z-index: 5;
    line-height: 1;
    font-size: 32px;
    text-align: center;
    background: url("img/error-hanger.png") no-repeat center center;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    transform-origin: center top;
    -webkit-animation: error-swing infinite 2s ease-in-out alternate;
    -moz-animation: error-swing infinite 2s ease-in-out alternate;
    animation: error-swing infinite 2s ease-in-out alternate
}

div.da-error-wrapper .da-error-code .tip {
    padding-top: 2px;
    color: #e15656;
}

div.da-error-wrapper .da-error-code .tip2 {
    padding-top: 15px;
}

div.da-error-wrapper .da-error-code .tip3 {
    padding-top: 20px;
    font-size: 16px;
    color: #e15656;
}

div.da-error-wrapper .da-error-pin {
    width: 38px;
    height: 38px;
    display: block;
    margin: auto;
    margin-bottom: -27px;
    z-index: 10;
    position: relative;
    background: url("img/error-pin.png") no-repeat center center
}

p {
    margin: 0;
    padding: 0;
}

error.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>出错啦</title>
     <link rel="stylesheet" href="/static/css/error.css" type="text/css"/>
</head>
<body>
    <div class="da-wrapper">
        <div class="da-content">
            <div class="da-container clearfix">
                <div class="da-error-wrapper">
                    <div class="da-error-pin"></div>
                    <div class="da-error-code">
                        <p class="tip">STATUS:403</p>
                        <p class="tip2">服务器开小差了</p>
                        <p class="tip3">You don't have permission to access the URL on this server.</p>
                    </div>
                    <h1 class="da-error-heading">Sorry, 请稍后再试 !!!</h1>
                </div>
            </div>
        </div>
    </div>
</body>
</html>