江门企业网站开发：Illustrated 404 Pages的HTML / CSS代码片段

2019.08.09 mf_web

你有多少次偶然发现了404 Page？一百，一百万次？总而言之，我们是比十年前更聪明的人，知道如何顺利上网，无忧无虑，但我们仍然犯错误，有时这些错误是如此愚蠢。但是，浏览器和网站都不是人工智能的机器，可以动态纠正它们。所以偶尔，我们必须处理错误页面。顺便提一下，在网络中可能出现的各种错误中，有三十多种在野外 - 404是最受欢迎的错误之一。

江门企业网站开发如果“404”对你没有任何意义：任何喜欢在线广阔之美的人都很高兴见到它一两次，你也不例外。404页面也被称为“没有找到” - 我敢打赌这听起来很熟悉。

一个完整的元素

404页面经常出现，似乎是网站不可或缺的一部分。你知道吗？现在确实如此。它被认为是任何网络项目的基本要素。考虑到这个页面在用户中如此受欢迎这一事实，开发人员已经找到了一种方法将其转换为一个不会破坏用户体验的有效播放器，相反，它可以节省它甚至增加它的味道。

因此，现在错误页面不仅仅是标题为“错误”的白色屏幕，仅此而已; 它们功能齐全，俏皮迷人。如果您是那些完全认识到这些页面的全部潜力的网站所有者之一，那么我们随时为您提供帮助。我们收集了梦幻般的代码段，设有十几个图示 404页。只需进行微小的更改，就可以轻松地将它们用于任何项目，以避免用户失望。我们将选择分为两部分。第一个包含纯HTML / CSS解决方案，第二个包含充满JavaScript功能的概念。

纯HTML / CSS代码片段

如果你是那些仍然相信没有任何专家帮助的HTML和CSS不能做魔术的人之一，那么准备好让我们感到惊讶，因为我们在这里有一些令人兴奋的例子。让我们从Darin的Yeti 404 Page开始，这真是令人惊讶。

这个概念不仅凭借其精彩的插图将自己与竞争对手分开，而且还提供了动态行为，使Yeti打开和关闭手电筒以突出404标志。这不是让用户留下而不是离开的有效方式吗？我相信它是。

Darin的Yeti 404 Page

在没有任何JavaScript帮助的情况下创建的404页面的另一个例子是404页面动画 - Valeriya缺少的书。Valeriya做得很好。她对错误页面的看法非常聪明。它结合了说明性方法和实用主义，为用户提供了有效的出路。

404页面动画 - Valeriya缺少的书

Paolo Duzioni与观众分享了他极简主义的想法。他长途跋涉，整洁，干净，精致。它按照它说的做了：通知用户他们已经迷路了。页面底部的一个小行人让事情变得不那么沮丧了。

长的散步

如果这样的轻盈，清洁和极简主义确实符合您对404页面的愿景，那么我们还有更多。 404 - Nico van Zyl的Tridiv与Paolo Duzioni的概念具有相同的美学。然而，这一次艺术家选择了3d维度制作404标志从字面和比喻中脱颖而出。

404 - Nico van Zyl的Tridiv

如果前面的例子感觉有点简单和无色，那么你总是可以选择Sussie Casasola的错误404等完全说明的解决方案。她的概念看起来简直令人惊叹：渐变背景非常出色，发光的圆圈自然引起了人们的注意，404标志是另类的好消息。

Sussie Casasola的错误404

为了增加一些东西，让我们添加一些JavaScript魔法。

HTML / CSS和JavaScript代码片段

错误404页面与Filip Vitas的宇航员和Chris Samuels的404页面具有与Sussie Casasola的项目相同的艺术光环。虽然第一个代码片段以宇宙主题为中心，但第二个代码片段从航海主题中获得它的美感。这两个插图都很精彩，两个插图都巧妙地设置在运动中。尽管这种动作几乎不可察觉，但足以将插图提升到一个新的水平。