之前为大家分享了那些创意有趣的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><ahref="">Home</a></li> <li><ahref="">Portfolio</a></li> </ul> </article> </section>

css3代码：

CSS Code复制内容到剪贴板 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; } lia:hover { color:#fff; } .center { text-align:center; } /*SearchBarStyling*/ form>* { vertical-align:middle; } .srchBtn { border:0; border-radius:7px; padding:017px; background:#e74c3c; width:99px; border-bottom:5pxsolid#c0392b; color:#fff; height:65px; font-size:1.5rem; cursor:pointer; } .srchBtn:active { border-bottom:0pxsolid#c0392b; } .srchFld { border:0; border-radius:7px; padding:017px; max-width:404px; width:40%; border-bottom:5pxsolid#bdc3c7; height:60px; color:#7f8c8d; font-size:19px; } .srchFld:focus { outline-color:rgba(255,255,255,0); } /*404Styling*/ .header { font-size:13rem; font-weight:700; margin:2%02%0; text-shadow:0px3px0px#7f8c8d; } /*ErrorStyling*/ .error { margin:-70px02%0; font-size:7.4rem; text-shadow:0px3px0px#7f8c8d; font-weight:100; }

以上就是今天和大家分享的404页面，谢谢阅读，希望能帮到大家，请继续关注查字典教程网，我们会努力分享更多优秀的文章。