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

　　实现的代码。

　　html代码：

XML/HTML Code 复制内容到剪贴板 <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代码：

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 ;            }                        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;            }  

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