今天小编跟大家讲解下有关一款纯css3实现的漂亮的404页面的实例教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关一款纯css3实现的漂亮的404页面的实例教程 的相关资料，希望小伙伴们看了有所帮助。
之前为大家分享了那些创意有趣的404页面。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <sectionclass="center"> <article> <h1class="header"> 404</h1> <pclass="error"> ERROR</p> </article> <article> <imgsrc=http://www.ztc188.com/skin/7ke/image/nopic.gif </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; } 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); } .header { font-size:13rem; font-weight:700; margin:2%02%0; text-shadow:0px3px0px#7f8c8d; } .error { margin:-70px02%0; font-size:7.4rem; text-shadow:0px3px0px#7f8c8d; font-weight:100; }以上就是今天和大家分享的404页面 谢谢阅读 希望能帮到大家 请继续关注AIDI 我们会努力分享更多优秀的文章。
来源：爱蒂网
