一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose

之前为大家分享了那些创意有趣的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: 300;        }                a        {            color: #75C6D9;            text-decoration: none;        }                h3        {            margin-bottom: 1%;        }                ul        {            list-style: none;            margin: 0;            padding: 0;            line-height: 50px;        }                li a:hover        {            color: #fff;        }                .center        {            text-align: center;        }                /* Search Bar Styling */        form > *        {            vertical-align: middle;        }                .srchBtn        {            border: 0;            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: 0;            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: 700;            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: 100;        }