自定义404页面设计-优快云博客

一个简单的404页面

找了一个页面自己稍微做了一些修改可以直接使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404-对不起！您访问的页面不存在</title>

    <style>
        body {
            background: #494949;
        }

        .head404 {
            width: 580px;
            height: 234px;
            margin: 50px auto 0 auto;
            background: url(https://www.dhresource.com/user/crm/img/head404.png) no-repeat;
        }

        .txtbg404 {
            width: 499px;
            height: 169px;
            margin: 10px auto 0 auto;
            background: url(https://www.dhresource.com/user/crm/img/txtbg404.png) no-repeat;
        }

        .txtbg404 .txtbox {
            width: 390px;
            position: relative;
            top: 30px;
            left: 60px;
            color: #eee;
            font-size: 13px;
        }

        .txtbg404 .txtbox p {
            margin: 5px 0;
            line-height: 18px;
        }

        .txtbg404 .txtbox .paddingbox {
            padding-top: 15px;
        }

        .txtbg404 .txtbox p a {
            color: #eee;
            text-decoration: none;
        }

        .txtbg404 .txtbox p a:hover {
            color: #FC9D1D;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="head404"></div>

    <div class="txtbg404">

        <div class="txtbox">

            <p>对不起，您请求的页面不存在、或已被删除、或暂时不可用</p>

            <p class="paddingbox">请点击以下链接继续浏览网页</p>

            <p>》<a style="cursor:pointer" id="backFlag">返回上一页面</a></p>

            <p>》<a href="https://seller.dhgate.com/">返回网站首页</a></p>

        </div>

    </div>
</body>

<script>
    var backFlag = document.getElementById('backFlag');
    backFlag.onclick = function(){
        history.back()
    }
</script>

</html>

在这里插入图片描述