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

前端  /  管理员 发布于 7年前   152

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

　　实现的代码。

　　html代码：

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

1. <section class="center">  
2.         <article>  
3.             <h1 class="header">  
4.                 404</h1>  
5.             <p class="error">  
6.                 ERROR</p>  
7.         </article>  
8.         <article>  
9.             <img src="vovg1x.png" alt="Funny Face">  
10.         </article>  
11.         <article>  
12.             <p>  
13.                 Lost? Maybe I can help.</p>  
14.         </article>  
15.         <article>  
16.             <form action="">  
17.             <input type="text" name="search" class="srchFld" placeholder="What are you looking for?"  
18.                 required />  
19.             <button type="submit" class="srchBtn">  
20.                 Search</button>  
21.             </form>  
22.         </article>  
23.         <article>  
24.             <h3>  
25.                 My Suggestions.</h3>  
26.             <ul>  
27.                 <li><a href="">Home</a></li>  
28.                 <li><a href="">Portfolio</a></li>  
29.             </ul>  
30.         </article>  
31.     </section>  

　　css3代码：

CSS Code复制内容到剪贴板

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.         /* Search Bar Styling */  
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.         /* 404 Styling */  
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.         /* Error Styling */  
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页面，谢谢阅读，希望能帮到大家，请继续关注AIDI，我们会努力分享更多优秀的文章。