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

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

　　实现的代码。

　　html代码：

1.   
2.         
     
3.               
4.                 404  
5.               
6.                 ERROR
     
7.           
8.         
     
9.             
   
     
10.           
11.         
      
12.             

      

13.                 Lost? Maybe I can help.
      
14.           
15.         
      
16.               
17.             
18.                 required />  
19.               
20.                 Search  
21.               
22.           
23.         
      
24.             

      

25.                 My Suggestions.  
26.             
      
    •                 
    • Home
      
    •                 
    • Portfolio
      
    •             
      
27.           
28.       

　　css3代码：

1. body   
2.         {   
3.             background-color: #0A7189;   
4.             color: #fff;   
5.             font: 100% "Lato" , sans-serif;   
6.             font-size: 1.8rem;   
7.             font-weight: 300;   
8.         }   
9.            
10.         a   
11.         {   
12.             color: #75C6D9;   
13.             text-decoration: none;   
14.         }   
15.            
16.         h3   
17.         {   
18.             margin-bottom: 1%;   
19.         }   
20.            
21.         ul   
22.         {   
23.             list-style: none;   
24.             margin: 0;   
25.             padding: 0;   
26.             line-height: 50px;   
27.         }   
28.            
29.         li a:hover   
30.         {   
31.             color: #fff;   
32.         }   
33.            
34.         .center  
35.         {   
36.             text-align: center;   
37.         }   
38.            
39.           
40.         form > *   
41.         {   
42.             vertical-align: middle;   
43.         }   
44.            
45.         .srchBtn   
46.         {   
47.             border: 0;   
48.             border-radius: 7px;   
49.             padding: 0 17px;   
50.             background: #e74c3c;   
51.             width: 99px;   
52.             border-bottom: 5px solid #c0392b;   
53.             color: #fff;   
54.             height: 65px;   
55.             font-size: 1.5rem;   
56.             cursor: pointer;   
57.         }   
58.            
59.         .srchBtn:active   
60.         {   
61.             border-bottom: 0px solid #c0392b;   
62.         }   
63.            
64.         .srchFld   
65.         {   
66.             border: 0;   
67.             border-radius: 7px;   
68.             padding: 0 17px;   
69.             max-width: 404px;   
70.             width: 40%;   
71.             border-bottom: 5px solid #bdc3c7;   
72.             height: 60px;   
73.             color: #7f8c8d;   
74.             font-size: 19px;   
75.         }   
76.            
77.         .srchFld:focus   
78.         {   
79.             outline-color: rgba(255, 255, 255, 0);   
80.         }   
81.            
82.           
83.         .header   
84.         {   
85.             font-size: 13rem;   
86.             font-weight: 700;   
87.             margin: 2% 0 2% 0;   
88.             text-shadow: 0px 3px 0px #7f8c8d;   
89.         }   
90.            
91.           
92.         .error   
93.         {   
94.             margin: -70px 0 2% 0;   
95.             font-size: 7.4rem;   
96.             text-shadow: 0px 3px 0px #7f8c8d;   
97.             font-weight: 100;   
98.         }  

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