之前为大家分享了那些创意有趣的404页面， html5和css3打造一款创意404页面， HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：
实现的代码。
html代码：
<section class="center">
<article>
<h1 class="header">
404</h1>
<p class="error">
ERROR</p>
</article>
<article>
<img src="vovg1x.png" alt="Funny Face">
</article>
<article>
<p>
Lost? Maybe I can help.</p>
</article>
<article>
<form action="">
<input type="text" name="search" class="srchFld" placeholder="What are you looking for?"
required />
<button type="submit" class="srchBtn">
Search</button>
</form>
</article>
<article>
<h3>
My Suggestions.</h3>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a></li>
</ul>
</article>
</section>
css3代码：
body
{
background-color: #0A7189;
color: #fff;
font: 100% "Lato" , sans-serif;
font-size: 1.8rem;
font-weight:;
} a
{
color: #75C6D9;
text-decoration: none;
} h3
{
margin-bottom: 1%;
} ul
{
list-style: none;
margin:;
padding:;
line-height: 50px;
} li a:hover
{
color: #fff;
} .center
{
text-align: center;
} /* Search Bar Styling */
form > *
{
vertical-align: middle;
} .srchBtn
{
border:;
border-radius: 7px;
padding: 0 17px;
background: #e74c3c;
width: 99px;
border-bottom: 5px solid #c0392b;
color: #fff;
height: 65px;
font-size: 1.5rem;
cursor: pointer;
} .srchBtn:active
{
border-bottom: 0px solid #c0392b;
} .srchFld
{
border:;
border-radius: 7px;
padding: 0 17px;
max-width: 404px;
width: 40%;
border-bottom: 5px solid #bdc3c7;
height: 60px;
color: #7f8c8d;
font-size: 19px;
} .srchFld:focus
{
outline-color: rgba(255, 255, 255, 0);
} /* 404 Styling */
.header
{
font-size: 13rem;
font-weight:;
margin: 2% 0 2% 0;
text-shadow: 0px 3px 0px #7f8c8d;
} /* Error Styling */
.error
{
margin: -70px 0 2% 0;
font-size: 7.4rem;
text-shadow: 0px 3px 0px #7f8c8d;
font-weight:;
}
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/11301