成都網(wǎng)站建設(shè)|域名注冊|虛擬主機|網(wǎng)站制作|網(wǎng)站案例|網(wǎng)站優(yōu)化|網(wǎng)站推廣|企業(yè)郵局|服務(wù)器租用|廣告設(shè)計

• 首頁
• 域名注冊
• 虛擬主機
• 網(wǎng)站建設(shè)
• 服務(wù)器租用
• 營銷推廣
• 網(wǎng)站程序
• 前端開發(fā)
• 移動互聯(lián)網(wǎng)
• 企業(yè)郵箱

前端開發(fā)

• html
• div+css
• css
• jQuery
• JavaScript教程
• ajax教程
• XML教程
• json教程
• bootstrap教程

域名注冊

• 英文域名
• 中文域名
• 域名轉(zhuǎn)入\轉(zhuǎn)出
• 通用網(wǎng)址
• 無線網(wǎng)址

虛擬主機

• 主機購買
• 數(shù)據(jù)庫
• 主機管理
• FTP上傳
• 主機續(xù)費升級

網(wǎng)站建設(shè)

• 網(wǎng)站策劃
• 網(wǎng)站方案
• 網(wǎng)頁設(shè)計
• 網(wǎng)站制作
• 網(wǎng)站改版

服務(wù)器租用

• web服務(wù)器
• FTP服務(wù)器
• 服務(wù)器租用
• 服務(wù)器托管
• 云主機服務(wù)器

營銷推廣

• seo優(yōu)化
• 網(wǎng)站推廣
• 搜索引擎
• 免費資源

網(wǎng)站程序

• vb編程
• asp程序
• php程序
• asp.net程序
• C#程序

移動互聯(lián)網(wǎng)

• wap手機網(wǎng)站
• app應(yīng)用開發(fā)
• 微網(wǎng)站

企業(yè)郵箱

• 企業(yè)郵箱優(yōu)勢
• 企業(yè)郵箱設(shè)置
• 郵箱收發(fā)問題
• 郵箱功能講解
• 郵箱其他問題

網(wǎng)站備案

• 備案流程指南
• 備案資料下載
• 備案常見問題
• 各省備案要求

• 當前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> css >> 一款純css3實現(xiàn)的漂亮的404頁面的實例教程

一款純css3實現(xiàn)的漂亮的404頁面的實例教程

• 作者：創(chuàng)新互聯(lián) 文章來源：網(wǎng)站設(shè)計部 點擊數(shù)： 更新時間：2014-12-05

• 之前分享了利用html5和css3打造一款創(chuàng)意404頁面，今天和大家分享一款純css3實現(xiàn)的漂亮的404頁面。有詳細的代碼提供大家學習，感興趣的朋友可以參考下

  
  

  之前為大家分享了那些創(chuàng)意有趣的404頁面。今天再給大家分享一款純css3實現(xiàn)的漂亮的404頁面。效果圖如下：

  

  
  

  html代碼：

  XML/HTML Code復制內(nèi)容到剪貼板
  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復制內(nèi)容到剪貼板
  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.         } &nb
  38. css中position屬性使用詳解 :上一篇
      XHTML+CSS:調(diào)用樣式表 :下一篇