項目需求，必須得寫個404界面，比較愁，因為網站屬於那種電商+藝術品拍賣的網站，404界面不太好設計
很多時候網站直接代碼報錯輸出404，不過設計過的404也有好處，比如改進用戶體驗、增強互動性之類的...
_(:з」∠)_說白了就是裝裝B...像騰訊、百度那種公益性的404界面也很棒
咳咳，回到正題，讓一個寫代碼的做頁面，肯定一時半會兒沒創意，所以逛了會兒設計站，
找到了這個http://weareanonymous.fr/，超酷，
然后發現他們界面里的幾個小創意，然后就手拿過來改了一個比較贊的404界面，如下圖
額，這個是我個人主頁的404，剛才做好就直接放上去了，鏈接：http://mydarling.sinaapp.com/404.html
整站比較挫，求清噴
接着放幾張這個404界面的圖：
這幾張圖上完可能大部分coder們都知道怎么實現的了，其實就是兩張圖片，一個圖片要做出來透明剪影的效果，另一張圖片自選，用於鋪底；
然后兩張圖有一個Hover效果
非常簡單的代碼&非常簡單的效果，但是整體的感覺卻很cool
不僅因為頭像輪廓的圖案很贊，這幾張素材里面人形剪影風格偏歐美，而且加上自己搭的一張底圖的話，整個404界面的B格就瞬間上來了~~
頭像是一個帶墨鏡的人，然后如果搭配上黑色底圖或者background的話，酷酷的墨鏡，就像第一張那樣，就能很符合404的意思了
很適合做個人主頁、潮站、設計公司、廣告公司那類的公司主頁的404
這里放幾張找到的頭像圖：
最后up一下簡單的代碼：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>404頁面-Darling達令網</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0px;padding:0px;} 9 body{background-image:url(image/error/bg404.png);font-family:"微軟雅黑","Arial Black", Gadget, sans-serif;} 10 .main{width:800px;height:500px;margin:50px auto;text-align:center;} 11 .img-container{width:280px;height:280px;margin:0px auto;text-align:center;position:relative;cursor:pointer;} 12 .temp{position:absolute;left:0px;top:0px;opacity:1;z-index:-1;} 13 .cover{position:absolute;left:0px;top:0px;opacity:1;z-index:-1;} 14 h3{font-weight:normal;color:#333;margin-top:40px;margin-bottom:60px;} 15 </style> 16 <body> 17 <div class="main"> 18 <div class="img-container" id="cover"> 19 <img src="image/error/ont_temp2.png" class="temp"> 20 <img src="image/error/one2.png" class="cover" id="top"> 21 </div> 22 <h3>抱歉，暫時找不到你要查看的內容。<small>Sorry,The page can't be found.</small></h3> 23 <p>不過...你可以回到<a href="http://mydarling.sinaapp.com/">darling達令</a>發現更多.</p> 24 </div> 25 </body> 26 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 27 <script type="text/javascript"> 28 $('#cover').mouseenter(function(){ 29 $('#top').stop(); 30 $('#top').animate({opacity:'0'},"fast"); 31 }); 32 $('#cover').mouseleave(function(){ 33 $('#top').stop(); 34 $('#top').animate({opacity:'1'},"slow"); 35 }); 36 </script> 37 </html>
【末尾：苦逼承接各種前端外包&php外包，有意請戳http://mydarling.sinaapp.com/】