邹彬老师

电子商务专业课程教师

关于404页面的制作,这是一个zblog模板(简单界面)

作者:linsan 发布:2021/10/12 分类:seo搜索引擎优化 阅读: 次 0条评论

 有一节课是404页面的设置,我们学生没有网站去实际操作,刚好邹彬老师有一个网站,可以上传他们的文件到网站空间,所以就找来一个模板让大家去修改,感谢无私奉献的网友提供的模板代码。

这里老师有看到来自老蒋博客的ZBLOG PHP自定义通用404错误页面的模板,这里整理过来,后面有需要的时候我也会使用,如果我们有需要的也可以参考。

  <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8"/>

        <meta http-equiv="Cache-Control" content="no-transform"/>

        <meta http-equiv="Content-Language" content="&#123;&#36;language&#125;" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <title>对不起,页面未找到</title>

        <style type='text/css'>

        body{font:12px/1.5 'Microsoft Yahei',Simsun;font-size:14px;line-height:1.42857143;color:#333;background:#f5f5f5}

        .wrapper-page{width:420px;margin:7.5% auto;text-align:center}

        .page-ex h1{font-size:98px;line-height:150px;font-weight:700;color:#252932;margin:10px 0;text-shadow:rgba(61,61,61,.3) 1px 1px,rgba(61,61,61,.2) 2px 2px,rgba(61,61,61,.3) 3px 3px}

        .page-ex h2{font-size:30px;color:#505458;line-height:35px;margin:10px 0}

        .page-ex p{font-size:14px;color:#505458;margin:0 0 10px}

        input[type=text]{float:left;width:71%;position:relative;font-size:14px;color:rgba(0,0,0,.6);margin-left:-1px;margin-bottom:0;padding:12px 17px;line-height:1.3333333;background-color:#fafafa;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border:1px solid #eee;box-shadow:none;outline:0;z-index:2}

        input[type=submit]{width:20%;font-size:16px;font-weight:700;color:#fff;line-height:32px;padding:10px 16px;line-height:1.3333333;border-radius:6px;padding-right:15px;border:2px solid #BDBDBD;background:#BDBDBD;outline:0;cursor:pointer;background-color:#1e88e5;border:1px solid #1e88e5;border-radius:2px;letter-spacing:.2px;opacity:.93;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}

        .page-back{background-color:#7e57c2;color:#FFF;letter-spacing:.2px;opacity:.93;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;border:1px solid transparent;border-radius:4px;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}

        .page-back:hover,input[type=submit]:hover{opacity:1;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)}

        @media only screen and (max-width:767px){.wrapper-page{width:90%}

        }

        @media only screen and (max-width:480px){.wrapper-page{width:90%}

        input[type=text]{width:61%}

        }

        </style>

    </head>

    <body>

    <div class="wrapper-page">

        <div class="page-ex">

            <h1>404!</h1>

            <h2>对不起,页面未找到</h2><br>

            <p>找不到内容?尝试下我们的搜索吧!</p>

            <form name="search" method="post" action="&#123;&#36;host&#125;zb_system/cmd.php?act=search">

        <input type="text" name="q" size="11"> 

        <input type="submit" value="搜索">

    </form>

            <br>

            <a class="page-back" href="&#123;&#36;host&#125;">返回首页</a>

        </div>

    </div>

    </body>

    </html>


邹彬老师就拿来用了一下,因为网站不支持404页面,所以也没有做,只是把代码做成一个网页,只是一个演示作用,感谢老蒋的代码分享。

老师生成的页面网址是:http://www.zoubin520.com/404.html

脚本版权参考地址:https://www.fengyan.cc/1222.html

本文章由 linsan 发布,如有侵权,请联系删除! 标签:404   网页设计  
  • 360 集团唯一授权消费信贷服务,极速放款,额度最高20 万,安全可信赖
  • « 上一篇下一篇 »

    您可能还会对这些文章感兴趣!

    关于404页面的制作,这是一个zblog模板(简单界面):目前有0条评论

    发表留言:

    快捷回复: Ctrl+Enter