如何使用css3实现404页面

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟空间、营销软件、网站建设、开州网站维护、网站推广。

html代码：

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

1.   
           
     
                 
                   404  
                 
                   ERROR
     
           
     
           
     
                 
           
     
           
     
               
     
                   Lost? Maybe I can help.
     
           
     
           
     
                 
                 
                 
                   Search  
                 
           
     
           
     
               
     
                   My Suggestions.
     
               
     
                   
   Home
     
                   
   Portfolio
     
               
     
           
     
         
   　　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页面问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。