• 一个简洁的404


    效果如图:

    代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>404__欢哥网</title>

    <style type="text/css">

    body,div,h3,h4,li,ol{margin:0;padding:0}

    body{font:14px/1.5 'Microsoft YaHei','微软雅黑',Helvetica,Sans-serif;min-1200px;background:#f0f1f3;}

    :focus{outline:0}

    h3,h4,strong{font-weight:700}

    a{color:#428bca;text-decoration:none}

    a:hover{text-decoration:underline}

    .error-page{background:#f0f1f3;padding:80px 0 180px}

    .error-page-container{position:relative;z-index:1}

    .error-page-main{position:relative;background:#f9f9f9;margin:0 auto;617px;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:50px 50px 70px}

    .error-page-main:before{content:'';display:block;background:url(img/errorPageBorder.png?1427783409637);height:7px;position:absolute;top:-7px;100%;left:0}

    .error-page-main h3{font-size:24px;font-weight:400;border-bottom:1px solid #d0d0d0}

    .error-page-main h3 strong{font-size:54px;font-weight:400;margin-right:20px}

    .error-page-main h4{font-size:20px;font-weight:400;color:#333}

    .error-page-actions{font-size:0;z-index:100}

    .error-page-actions div{font-size:14px;display:inline-block;padding:30px 0 0 10px;50%;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#838383}

    .error-page-actions ol{list-style:decimal;padding-left:20px}

    .error-page-actions li{line-height:2.5em}

    .error-page-actions:before{content:'';display:block;position:absolute;z-index:-1;bottom:17px;left:50px;200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(-4deg);-webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);-o-transform:rotate(-4deg);transform:rotate(-4deg)}

    .error-page-actions:after{content:'';display:block;position:absolute;z-index:-1;bottom:17px;right:50px;200px;height:10px;-moz-box-shadow:4px 5px 31px 11px #999;-webkit-box-shadow:4px 5px 31px 11px #999;box-shadow:4px 5px 31px 11px #999;-moz-transform:rotate(4deg);-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);-o-transform:rotate(4deg);transform:rotate(4deg)}

    </style>

    </head>

    <body>

    <div class="error-page">

        <div class="error-page-container">

            <div class="error-page-main">

                <h3>

                    <strong>404</strong>很抱歉,您要访问的页面不存在!

                </h3>

                <div class="error-page-actions">

                    <div>

                        <h4>可能原因:</h4>

                        <ol>

                            <li>网络信号差不稳定</li>

                            <li>找不到请求的页面</li>

                            <li>输入的网址不正确</li>

                        </ol>

                    </div>

                    <div>

                        <h4>可以尝试:</h4>

                        <ol>

                            <li><a href="/">返回首页</a></li>

                            <li><a href="/">留言反馈</a></li>

                           

                        </ol>

                    </div>

                </div>

            </div>

        </div>

    </div>

    </body>

    </html>

  • 相关阅读:
    【图像处理】【SEED-VPM】7.ubuntu10.04下 TFTP,NFS 安装指南
    【图像处理】【SEED-VPM】6.文件目录结构
    【DIY】【外壳】木板 & 亚克力 加工
    【图像处理】【SEED-VPM】5.uImage的烧写 & NFS烧写文件系统
    【PCB】【AD使用】Altium Designer 的entry sheet ,offsheet和port作用
    【PCB】【项目记录】AWG任意波形产生器
    【图像处理】【SEED-VPM】4.串口调试信息
    【图像处理】【SEED-VPM】3.外设信息
    【图像处理】【SEED-VPM】2.接口
    【图像处理】【SEED-VPM】1.注意点
  • 原文地址:https://www.cnblogs.com/HGNET/p/11447913.html
Copyright © 2020-2023  润新知