首页 / 值得一看 / zblog教程 / 正文

zblog如何自定义404错误页面?

2023-04-06zblog教程阅读 370

网站404页面的目的是告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用浏览网站的其他页面而不是关闭网页离开。自定义404错误页面是增强用户体验的很好的做法,花时间去设计一个创意的404错误页面是一件非常值得的事情,尽管这个页面被看到的概率很小。

zblog如何自定义404错误页面?

上图的404错误页面是不是很漂亮?那么使用zblog的同学要如何将这个页面添加到自己的网站中呢? 首先我们打开主题所在的文件夹下的template文件夹,在里面新建一个404.php文件,然后将以下代码添加的文件中。

网站404页面的目的是告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用浏览网站的其他页面而不是关闭网页离开。自定义404错误页面是增强用户体验的很好的做法,花时间去设计一个创意的404错误页面是一件非常值得的事情,尽管这个页面被看到的概率很小。

<HTML>对不起,页面未找到
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%}
}

上图的404错误页面是不是很漂亮?那么使用zblog的同学要如何将这个页面添加到自己的网站中呢? 首先我们打开主题所在的文件夹下的template文件夹,在里面新建一个404.php文件,然后将以下代码添加的文件中。

404!

对不起,页面未找到

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

返回首页

保存文件后,打开网站后台首页点击[清空缓存并重新编译模板],然后访问前台页面看下404错误页面的效果吧!


信息由用户投稿以及用户自行发布,真实性、合法性由发布人负责,涉及到汇款等个人财产或隐私内容时请仔细甄别,注意防骗!如有侵权,请联系:wwwlaoyuwang#126.com(#=@)!我们会第一时间核实处理!

相关推荐

  • 虚拟主机中zblog如何强制全站https

    网站改版升级了https安全访问,可之前搜索引擎收录的全部都是http的链接,如果不做301重定向,别人访问时,进入的依旧不是安全链接。如何把zblogPHP全站http301重定向到https的域名...

    93zblog教程2023-10-01
  • zblogphp使用GetArticleList、GetList函数调用热门文章列表

    一般我们调用ZBLOGPHP文章的时候会用到最新文章、点击数、评论数文章调用,同时我们还可能会在一些特定的位置调用本周、本月、本年度的热门文章。热门文章目录文件:zb_system/funct...

    222zblog教程2023-07-05
  • zblog修改列表分页条首页/上页/下页/末尾符号为文字

    Z-Blog使用{template:pagebar}调用的翻页条是用‹‹、‹、›、››符号分别表示首页、上一篇、下一页和最后一页,如果不想用符号直接显示中文怎么办?可以尝试使用翻页条源代码来修改或者通...

    208zblog教程2023-06-12
  • zblog搜索页面制作教程

    搜索功能是一个网站中必不可少的功能,同样在zblog模板中也支持搜索页面的制作,而zblog中的搜索页面是要用一个单独模板来制作的,下面来进行一下讲解本文讲解是以zblog新版本为例来演示的。首先,先...

    255zblog教程2023-06-11
  • ZblogPHP调用某个分类的随机文章

    随机文章是非常常见的内容模块,有利于提高网站整体的收录。区别于常见的CMS,我发现Zblog并没有表情直接调用随机文章,那么,我们要实现调用某个分类的随机文章,应该怎么实现呢?随机文章从网上看到的随机...

    378zblog教程2023-05-10