宁！大嘎吼~以前的小编云游四方去了，今天时柒来替班！所以要聊点什么呢？

我们平时都会浏览网站找素材找资源对不对，不可避免地会遇到弹出报错的“404页面”的情况。见到它的时候你可能会失落可能会懵逼，但只需要记得两点即可。第一，亲你掉线er了；第二，虽然你掉线er了，但还是可以点击别的内容再重新上线er。

于是有很多网站会分一些精力放在404页面的创意设计上。虽然早在前几年就开始流行了，但是大家还是对这部分创意内容很感兴趣。毕竟连404页面都可以做的很精致的网站，其他内容也应该是很精良了。

那接下来就给大家分享一些创意404报错页面吧，后面都会附上链接，有空大家可以自己去体验一把。当然从我们最熟悉的一些网站开始。

Pixar

https://www.pixar.com/404

Pixar的404页面，用是2015年《头脑特工队》里面“忧忧”的形象。毕竟找不到想要的内容，确实是件挺忧心的事情。页面简洁明了，但是信息丢了也不要想“忧忧”一样太过于伤心难过才好。

20th Century Fox

https://www.foxmovies.com/404

关于20世纪福克斯网站的404页面，有时很魔性，有时很随意，有时找不到想要的电影，还得受一下刺激。

总结来说就是，“影片背景+关键词标题提醒+其他影片推荐”这样的种种。我看到过的有《菜鸟大反攻》《剪刀手爱德华》和《大人物拿破仑》等等。惊喜的是，标题文字还可以继续点击，弹出一个毫无美感&毫无设计感的“Not Found”页面...恩，可能是刻意的吧，画风大概都是下面这样的。

漫威

https://www.marvel.com/404

手动云@一下漫威粉，有了解漫威官网的404页面的吗？最近一版设计是在动态绵绵细雨中的钢铁侠，残缺的手臂，伤痕累累的铁甲，在细雨中显得更加凄凉。

之前还有的版本是寡姐，与用户之间产生互动，就是图片展示那样的。

漫威的404都是和品牌牢牢地结合在一起的，也是一种挺不错的选择。

乐高

http://www.lego.com/404notfound

乐高可以算是“超级重视自身品牌塑造”队伍中的一员了，它的404页面上是4个惊慌失措的玩偶角色，据说最开始是没有文字说明的，现在又加入图上的哪行小字，反正就是简简单单地告诉你，“亲，您掉线啦”。

暴雪

http://us.blizzard.com/en-us/not-found.html

暴雪的404设计也是走了“简单粗暴”路线，粗暴到把玻璃都敲碎了，可能对于破碎恐惧者和尖锐恐惧者来说有些残忍，“找不到你就别找了，放弃吧”。

IMDb

https://www.imdb.com/404

特别酷！IMDb也有404。他们加入了对著名电影的标题性引入，通过箭头引导用户浏览下一个页面，而不是看到404直接点了页面右上角。

Matteo Vandelli

https://matteovandelli.com/404

意大利平面设计师Matteo Vandelli个人网站的404页面与用户也是有互动的。把鼠标指针移动到404蓝字，向不同方向滑动的时候，这仨字就像水一样竟然产生了涟漪的效果，很是迷幻。

然后我们再来看几个虽然不是行业内但是创意让人眼前一亮的404。

Gymbox

https://gymbox.com/404

Gymbox是伦敦的一家健身公司，品牌核心是要提供“全伦敦最独特、最多样化的健身课程”。他们网站404页面出现的是那种很80年代画风，这样的健身场景有点意味深长，自己试着体会下？

Purée Maison

https://pureemaison.com/404/

Purée Maison是法国一家专注于提供传播/交流策略的创意机构，他们的404页面是由一个角色小动画引出来的，在数字世界里四处碰壁就是找不到信息的方向，像不像是浏览到404页面的你呢？

Blue Path

https://path.blue/404/

位于亚特兰大的数据战略咨询公司BluePath的404网站报错页面也很幽默，左边是亚特兰大地图，右边就是和组织失去联络的你。他们在右半部分还开了一个玩笑，“如果说，不是我们的客户也是一种罪的话，那你简直是罪大恶极”（就大概是这类意思的吧）。个人觉得一点儿都不好笑，那就不再过多解释了。

The Useless Web Index

https://www.theuselesswebindex.com/error/

不知道大家有没有听说过“无用网站”，它专门收集一些没什么用、没什么意义，但是却很好玩的内容，建成了一个内容涉及全世界的庞大数据库。即便是这样，它也不可能提供所有你想要的东西，就像这群呆萌狐獴，远远望着苍茫戈壁，嗅嗅远处出来的风，却不知该如何是好。你看那凝视的狐獴，像你不？

Figma

https://www.figma.com/404/

Figma是一款基于浏览器的协作式UI界面设计软件，完美支持多人写作功能。2017年使用排名仅次于Adobe家的Photoshop、Illustrator和XD之后。虽然我们平时对于定位点和贝塞尔曲线什么的已经很熟悉了，但看到这个404页面还是能玩上半天。

Airbnb

https://www.airbnb.com/404

Airbnb家的报错页面是很可爱了，小姑娘手中的冰淇淋掉到了地上，情不自禁地喊了一声“Oops！”，非常符合他们简单友好的品牌形象。只不过在现实生活中，要是好大一坨冰淇淋掉地上…怕是没有这么简单了…

Hot Dot Production

http://hotdot.pro/en/404/

Hot Dot Production（一眼看成了Hot Pot，阿门）的404页面，很好的诠释了他们“设计与技术相结合”的品牌思路，三个数字由数百个小红点组成，移动鼠标指针就可以改变其方向和角度，应该也是属于“无聊可以玩半天”系列的那种。

Kualo

https://www.kualo.co.uk/404

有着15年经营历史的虚拟主机公司Kualo，他们的404页面是一个以Kualo为主题的太空入侵者游戏。用户通过左右键移动画面下方的发射器，敲空格发射炮弹来消灭入侵者。游戏不是重点哦，看到右下角的计分显示没？如果用户得分超过1000分，就可以享受他们服务折扣价。

Pointe Pest Control

https://pointepest.com/404

既然提到了Kualo的游戏，那就再提一下美国害虫防治公司Pointe Pest Control 的404，包含了一款杀虫剂消灭小蜘蛛小爬虫的游戏，叫做Pest Invaders。链接都给你了，来试一把鸭。

为了吸引用户，给大家创造更好的浏览体验，创意设计者可谓“无所不用其极”，连404都不放过。正是这样的互动形式，才加深了与用户的交流，塑造了更接地气的品牌形象，也告诉我们其实创意可以无处不在。所以大家还见过那些很好玩的404报错页面呢？

多刚接触网站的朋友，经常会讨论404页面是什么？简单来说，404页面简单点来说，就是当有人访问了你的网站，输入的访问地址，而在你网站中这个地址不存在，系统自动反馈出的结果页面。

这个结果页面，经常性的是系统自带的页面，提示404 not found。

这也就是404页面与404 not found之间的关系。

当然站长朋友们，也可以自己制作404页面，进而提升用户体验，虚拟主机可以在网站控制面板中设置，如果是vps可以直接在iis下面设置。

合理的利用404页面，在网站seo优化中也起到了一定作用。

一、导致404页面错误的原因：

1、无法在所请求的端口上访问Web站点。

2、Web服务扩展锁定策略阻止本请求。

3、MIME映射策略阻止本请求。

4、网站更新改版，但某些局部板块沿用原来的模块，而原有的模块调用的文件已经被删除或转移了路径。

5、跟踪访问的各类脚码或CSS文件无效但调用代码依然存在。

6、某个目录直接删除（导致一段时间该目录的文件在被爬行时全部报404 Not Found错误）

7、网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等，导致原来的URL地址无法访问

二、解决404页面错误的方法：

1、对于存在的网页内容由于路径改变而导致访问不了时，可在IIS中定义404错误指向一个动态页面，在页面里面使用301永久重定向跳转到新的地址，此时服务器返回301状态码。

2、设置404指向一个设计好的html文件，此时页面返回的404状态码。现在的idc提供商基本都提供404设置的功能，直接上传文件设置即可。

在IIs中设置方法：打开IIS管理器-->点击要设置自定义404的网站的属性-->点击自定义错误选项-->选中404页-->选中并打开编辑属性-->设置成URL-->URL里填写“/err404.html”-->按确定退出再把做好的err404.html页面上传到网站根目录下。

此处在“消息类型”中一定要选择“文件”或“默认值”，而不要选择“URL”，不然，将导致返回“200”状态码。

3、把404指向一个动态页面，比如error.asp，如果不在页面里面进行设置，仅仅是返回提示的HTML代码，将导致页面返回200状态码，这是不正确的，我们可以在显示完提示内容后，增加语句：Response.Status="404NotFound"，这样就保证页面返回404状态码。

4、Apache下设置404错误页面。

为ApacheServer设置404错误页面的方法很简单，只需在.htaccess文件中加入如下内容即可，ErrorDocument404/notfound.php。