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

最新推荐文章于 2022-11-24 21:42:54 发布

研究僧12138

最新推荐文章于 2022-11-24 21:42:54 发布

阅读量173

点赞数

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

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

版权

【Django】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文分享了一种在开发中处理错误时为用户提供良好视觉体验的方法，展示了一个详细的403错误页面设计。页面采用了CSS样式定义布局和动画效果，包括背景颜色、字体设置、响应式设计等，同时HTML代码中展示了如何组织结构以显示错误信息。通过这个设计，当服务器出现403禁止访问错误时，用户可以看到一个友好且具有设计感的提示页面。

摘要由CSDN通过智能技术生成

做个笔记。开发时处理出错，也要给用户一个良好的视觉体验。下面分享一个错误页面：
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>