欢迎访问2017年洛阳SEO牛广的官方博客,只要标题有亲测有效的都是原创文章。为大家提供最新真实有效的案例,承接网站SEO百度优化业务QQ:939380096

网站404页面虚拟主机设置方法+JS跳转-亲测有效

SEO niuguang 1894次浏览 0个评论

 为什么要设置404页面

 洛阳SEO牛广认为,可以让网站对用户变的友好,当发生了某些原因导致网页错误时候出现404页面,简单讲就是能让页面起死回生。跳转到首页,对用户进行再一次的展示。让用户再次点击产生转化。

如何设置404页面

 在一般情况下 网站存放位置2个地方.

1 虚拟云 (虚拟主机)。

2  云服务器(独立VPS) 这个又分 Wamp环境和Lamp环境.

在这里站长牛广演示 虚拟云 废话不多说请看下文。

演示材料 

 百度云 虚拟云 404页面设置 (其他的虚拟主机基本都是一样)。

虚拟云 404页面设置

 第一步

首先准备好 自己的404页面 和 图片文件。

  404页面为了方便一般都是把CSS JS HTML 都写在一个 html文件里 方便管理(一般情况下404页面一旦做好是不动的).

  如果你想把css js 进行导入 分类出来也行,这个看个人了。  里面的路径不能错,特别是图片文件路径

404页面

第二步

上传FTP 

        我们把404.html这个页面上传到网站目录, 一般情况是上传到网站跟目录,如果你想放到其他目录也行但是有一点就是要记好路径地址(等下要把地方放在主机控制面板设置里面)。

  本次演示404放在根目录,图片文件要对应好html中写的路径,当你把你的图片上传到FTP自己指定的目录后,可以在阅览器的地址栏访问下路径看看能不能访问到你的图片。

FTP目录

图片路径测试

洛阳SEO牛广404页面图片路径

第三步

修改主机控制面板设置

百度云404控制页面操作

到这里基本上就结束了 我们来测试下。

123.html这个页面是不存在的。

404测试页面

测试成功。

测试页面

 

 下面代码是洛阳SEO牛广网站上的404页面代码 带有js 5秒跳转 js我已经写好了注释, 复制粘贴改下路径就能用。

<html>
<head>
<meta charset="utf-8">
<title>404页面自动跳转</title>
<style>
*{margin:0;padding:0;outline:none;font-family:\5FAE\8F6F\96C5\9ED1,宋体;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;cursor:default;font-weight:lighter;}
.center{margin:0 auto;}
.whole{width:100%;height:100%;line-height:100%;position:fixed;bottom:0;left:0;z-index:-1000;overflow:hidden;}
.whole img{width:100%;height:100%;}
.mask{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.6;filter:alpha(opacity=60);}
.b{width:100%;text-align:center;height:400px;position:absolute;top:50%;margin-top:-230px}.a{width:150px;height:50px;margin-top:30px}.a a{display:block;float:left;width:150px;height:50px;background:#fff;text-align:center;line-height:50px;font-size:18px;border-radius:25px;color:#333}.a a:hover{color:#000;box-shadow:#fff 0 0 20px}
p{color:#fff;margin-top:40px;font-size:24px;}
#num{margin:0 5px;font-weight:bold;}
</style>
<script type="text/javascript">
 var num=6; //定义变量值 设置秒数
 function redirect(){ //创建函数
 num--; //变量减减
 document.getElementById("num").innerHTML=num; //找到div
 if(num==2){ //判断函数值
 window.location.href="http://www.xiaoguangseo.com"; //跳转
 }
 }
 setInterval("redirect()", 1000); //反复调用函数
</script>
</head>

<body onLoad="redirect();">
<div class="whole">
 <img src="http://www.xiaoguangseo.com/wp-includes/images/back.jpg" />
 <div class="mask"></div>
</div>
<div class="b">
 <img src="http://www.xiaoguangseo.com/wp-includes/images/404.png" class="center"/>
 <p>
 暂时未能找到您查找的页面<br>
 可能输入的网址错误或此页面不存在<br>
 <span id="num"></span>秒后自动跳转到主页
 </p>
 </div>

</body>
</html>

小广 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明网站404页面虚拟主机设置方法+JS跳转-亲测有效
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到