当前位置:首页 > 瞎折腾 > 正文内容

zblog程序的自定义404页面设置方法

Mr6年前 (2018-11-19)瞎折腾2805

关于zblog404页面的自定义设置方法

首先来说博客程序不管是zblog还是wordpress基本都是自带404页面的,所以没办法在htaccess设置或者空间服务商后台设置想要自定义博客404页面唯一的方法就是将原来的404.php模板内容替换掉,下面这个页面也是在别人哪里挖来的,如果需要可以复制到自己主题模板下的404.php文件内替换掉即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Content-Language" content="{$language}" />
    <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="{$host}zb_system/cmd.php?act=search">
   <input type="text" name="q" size="11"> 
   <input type="submit" value="搜索">
</form>
        <br>
        <a class="page-back" href="{$host}">返回首页</a>
    </div>
</div>
</body>
</html>

保存后在后台 [清空缓存并重新编译模板],然后访问前台页面看下404错误页面的效果吧!

友情提示:该页面没有任何图片,只是纯代码文字实现的404页面,如果对404页面没那么大需求的话可以直接复制以上代码拿去使用吧,需要其他的自行度娘查询!

扫描二维码推送至手机访问。

版权声明:本文由微客生活发布,如需转载请注明出处。

本文链接:http://www.weklife.cn/8.html

标签: zblog

相关文章

【转载】给你的zblog文章页添加一个版权说明

zblog文章页底部添加一个版权声明类似“本文由XX原创,转载请注明xxx”的字样,有的主题模板是没有这些的,下面为详细操作步骤效果一CSS代码.open-message{margin-bottom:10px;padding:5px&nbs...

利用input标签给文本框内添加提示文字

利用input标签给文本框内添加提示文字

很多网站上我们都看到input输入框显示提示文字如下图:如图显示,很多时候例如博客等回复框或者其他提示框内空牢牢的感觉不够“高端”实现这个方法很简单,只需要在<input>标签里添加:placeholder="提示文字...

利用DIV+CSS让某些文字或图片只在电脑PC端显示移动端不显示

利用DIV+CSS让某些文字或图片只在电脑PC端显示移动端不显示

现在的网页都讲究一个自适应,所以有部分文字或图片不想再移动端页面显示,当然一般的博客主题或网站模板都自带了这个功能,但是少部分网页没有区分,让PC端的问题一个不漏都显示在了移动端,尤其是备案信息,由于工信部的强制要求,所以不得不注明,但是移...

简单的简单操作让win系统PC端也有微信多开的方法

简单的简单操作让win系统PC端也有微信多开的方法

这几天由于好几个微信都需要回复信息,用手机一个个点开回复也显得麻烦,于是乎就找了找PC端微信多开的方法,功夫不负有心人还是成功搞定了,方法如下:1、右键桌面微信属性2、复制上图目标路径地址3、桌面新建txt文本粘贴复制微信地址"C...

win10找不到默认打开图片的软件替换成其他的或者画图工具咋办?

win10找不到默认打开图片的软件替换成其他的或者画图工具咋办?

如果说win7 或者win10发现常用的浏览图片的工具没了,从而换成了画图以及其他软件,怎么恢复呢,网上资料也有很多,这里就不重复他们的方法了,直接在文章底部下载以及编辑好的注册文件,下载到电脑上自行双击运行安装就行了。Windows默图片...

手机视频或照片隔空投送到台式(win系统)电脑的新方法

手机视频或照片隔空投送到台式(win系统)电脑的新方法

最开始得时候想要把手机上的内容传送到电脑都是通过数据线的方式,但是现在很多人也会用QQ或者微信的文件传输模式去传输到电脑,但是这个方法会被QQ或微信压缩文件,如果是图片还好不是很严重,但是如果是视频的话就会被严重压缩,毕竟不是图片可以选择源...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。