之前为大家分享了那些创意有趣的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; }
