您现在的位置是：网站首页> 编程资料编程资料

一款纯css3实现的漂亮的404页面的实例教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-06 865人已围观

简介 之前分享了利用html5和css3打造一款创意404页面，今天和大家分享一款纯css3实现的漂亮的404页面。有详细的代码提供大家学习，感兴趣的朋友可以参考下

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <section class="center">  
  2.         <article>  
  3.             <h1 class="header">  
  4.                 404h1>  
  5.             <p class="error">  
  6.                 ERRORp>  
  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.                 Searchbutton>  
  21.             form>  
  22.         article>  
  23.         <article>  
  24.             <h3>  
  25.                 My Suggestions.h3>  
  26.             <ul>  
  27.                 <li><a href="">Homea>li>  
  28.                 <li><a href="">Portfolioa>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 

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网