一款纯css3如何实现的漂亮的404页面的实例好代码教程

发布时间：2023-01-18 09:13:59 来源：网络

.

人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。你在看孤独的风景，你在逃避我的真心!

　　之前为大家分享了那些创意有趣的404页面。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

<sectionclass="center">
<article>
<h1class="header">
404</h1>
<pclass="error">
ERROR</p>
</article>
<article>
<imgsrc="vovg1x.png"alt="FunnyFace">
</article>
<article>
<p>
Lost?MaybeIcanhelp.</p>
</article>
<article>
<formaction="">
<inputtype="text"name="search"class="srchFld"placeholder="Whatareyoulookingfor?"
required/>
<buttontype="submit"class="srchBtn">
Search</button>
</form>
</article>
<article>
<h3>
MySuggestions.</h3>
<ul>
<li><arel="nofollow noopener noreferrer" href="">Home</a></li>
<li><arel="nofollow noopener noreferrer" href="">Portfolio</a></li>
</ul>
</article>
</section>