一款纯css3如何实现的漂亮的404页面的实例好代码教程

网络
人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。你在看孤独的风景，你在逃避我的真心!

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  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><arel="nofollow noopener noreferrer" href="">Home</a></li>
  28. <li><arel="nofollow noopener noreferrer" 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. }
  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页面，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例