如何使用css3实现404页面

如何使用css3实现404页面，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

html代码：

XML/HTML Code复制内容到剪贴板

1. <section class="center">  
           <article>  
               <h2 class="header">  
                   404</h2>  
               <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>  
               <h4>  
                   My Suggestions.</h4>  
               <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;   
           }   
              
           h4   
           {   
               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;   
           }

关于如何使用css3实现404页面问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。