手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >一款纯css3实现的漂亮的404页面的实例教程
一款纯css3实现的漂亮的404页面的实例教程
摘要:之前为大家分享了那些创意有趣的404页面。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下:实现的代码。html代码:XML...

之前为大家分享了那些创意有趣的404页面。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下:

一款纯css3实现的漂亮的404页面的实例教程1

实现的代码。

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页面,谢谢阅读,希望能帮到大家,请继续关注查字典教程网,我们会努力分享更多优秀的文章。

【一款纯css3实现的漂亮的404页面的实例教程】相关文章:

CSS3实现漂亮的按钮动画

纯CSS结合DIV实现的右侧底部简洁悬浮效果

使用css3仿造window7的开始菜单

css中水平垂直居中对齐布局实例总结

CSS+jQuery实现的在线答题功能

纯CSS代码实现翻页焦点图效果

CSS导航布局中当前页面的具体实现demo示例

纯CSS代码实现翻页

css实现文字的自动隐藏

用CSS实现简单的进度条

精品推荐
分类导航