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

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

　　实现的代码。

　　html代码：

1. <sectionclass="center">
2. <article>
3. <h1class="header">
4. 404</h1>
5. <pclass="error">
6. ERROR</p>
7. </article>
8. <article>
9. <imgsrc="vovg1x.png"alt="FunnyFace">
10. </article>
11. <article>
12. <p>
13. Lost?MaybeIcanhelp.</p>
14. </article>
15. <article>
16. <formaction="">
17. <inputtype="text"name="search"class="srchFld"placeholder="Whatareyoulookingfor?"
18. required/>
19. <buttontype="submit"class="srchBtn">
20. Search</button>
21. </form>
22. </article>
23. <article>
24. <h3>
25. MySuggestions.</h3>
26. <ul>
27. <li><ahref="">Home</a></li>
28. <li><ahref="">Portfolio</a></li>
29. </ul>
30. </article>
31. </section>

　　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. }
10. a
11. {
12. color:#75C6D9;
13. text-decoration:none;
14. }
16. h3
17. {
18. margin-bottom:1%;
19. }
21. ul
22. {
23. list-style:none;
24. margin:0;
25. padding:0;
26. line-height:50px;
27. }
29. lia:hover
30. {
31. color:#fff;
32. }
34. .center
35. {
36. text-align:center;
37. }
39. /*SearchBarStyling*/
40. form>*
41. {
42. vertical-align:middle;
43. }
45. .srchBtn
46. {
47. border:0;
48. border-radius:7px;
49. padding:017px;
50. background:#e74c3c;
51. width:99px;
52. border-bottom:5pxsolid#c0392b;
53. color:#fff;
54. height:65px;
55. font-size:1.5rem;
56. cursor:pointer;
57. }
59. .srchBtn:active
60. {
61. border-bottom:0pxsolid#c0392b;
62. }
64. .srchFld
65. {
66. border:0;
67. border-radius:7px;
68. padding:017px;
69. max-width:404px;
70. width:40%;
71. border-bottom:5pxsolid#bdc3c7;
72. height:60px;
73. color:#7f8c8d;
74. font-size:19px;
75. }
77. .srchFld:focus
78. {
79. outline-color:rgba(255,255,255,0);
80. }
82. /*404Styling*/
83. .header
84. {
85. font-size:13rem;
86. font-weight:700;
87. margin:2%02%0;
88. text-shadow:0px3px0px#7f8c8d;
89. }
91. /*ErrorStyling*/
92. .error
93. {
94. margin:-70px02%0;
95. font-size:7.4rem;
96. text-shadow:0px3px0px#7f8c8d;
97. font-weight:100;
98. }

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