关注前端开发
HTML5、CSS3、Javascript

自定义404页面

呵呵,我看大前端上没有404的相关文章,于是就拿过来了。

自定义404界面。懂得人可以无视,毕竟我是初学者哈。

看我的这个图片:

当然,上面的东西是我自己编的,在出现无法找到所请求的页面的时候,会进行显示404界面。

下面是简单的教程:

首先自己用dreamweaver做一个404界面或者直接从网上拉下来一个

如我的代码是这样的:

<h1>没错,我就是传说中的<a>404!</a></h1>
<div id="do"><a href="/">返回首页</a> <a href="javascript:history.go(-1);">返回上页</a></div>

内容很简单的但是里面有一些东西还是需要注意的。

1.css里面要使用图片的话,不能用相对位置。要用绝对位置。

比如我的body用了一个背景图,那么如果按照正常的页面设计对的话,可以这么写

body{background:#fff url(imgae/bg.jpg) repeat;}

但是注意,当你请求一个页面的时候,系统是用404页面代替你找不到的那个页面,所以,其相对位置是那个页面所在的相对位置。也就无法找到图片了。

所以应该改为下面这样:

body{background:#fff url("http://xuqixun.info/404/image/bg.jpg") repeat;}

2.有两个按钮要注意添加上。

我不懂seo,但是我觉得方便是最大的设计理念。

当请求的时候发现页面不见而显示出来404的时候,你所需要的就是添加一个返回刚刚浏览的页面或者是首页。

因而,就有了这两个代码:

<a href="/">返回首页</a>
<a href="javascript:history.go(-1);">返回上页</a>

3.个人认为,最好404有趣点。这不多说,可以参考本人的。

好了,就这样。下面的工作,我想做一个手机网站,目标是ios和ad系统。在制作中。关于我的博客的话,我会添加一些有趣的页面,也会添加一些我分享的一些网站。敬请期待。

当然,有一些人会问,怎么让服务器能够知道404.html在哪里呢?

我自己的话,是直接在服务器供应商那里来设置的,如图:

当然,还有自己设置的话,我从百度百科上拉下来一段话,大家可以看看。

这里分两种情况。

一、 Apache下设置404错误页面(一般是Linux主机)

为Apache Server设置 404错误页面的方法很简单,只需:

(1)在.htaccess 文件中加入如下内容:ErrorDocument 404 /notfound.php,将.htaccess文件上传到网站根目录

(2)制作一个404页面,随便您设计,命名为notfound.php,同样上传到网站根目录。

注意:

(1).切记不要将404错误转向到网站主页,否则可能会导致主页在搜索引擎中消失

(2).切记不要使用绝对URL,如果使用绝对URL返回的状态码是302+200

二、 IIS/。net下设置404错误页面

首先,修改应用程序根目录的设置,打开 web.config 文件编辑,在其中加入如下内容:

以下为引用的内容:

<configuration>
<system.web>
<customErrors mode=On defaultRedirect=error.asp>
<error statusCode=404″ redirect=notfound.asp />
</customErrors>
</system.web>
</configuration>
注:上文例中error.asp为系统默认的404页面,notfound.asp为自定义的404页面,使用时请修改相应文件名。

然后,在自定义的404页面notfound.asp中加入:以下为引用的内容:
<% Response.Status = 404 Not Found %>

这样,便可以保证IIS能够正确地返回404状态码

感谢端友【xuqixun】的投稿!!

源: http://xuqixun.info/

转载请注明出处大前端 » 自定义404页面

分享: