项目需求，必须得写个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一下简单的代码：

　　

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>404页面-Darling达令网</title>

 </head>

 <style type="text/css">

     *{margin:0px;padding:0px;}

     body{background-image:url(image/error/bg404.png);font-family:"微软雅黑","Arial Black", Gadget, sans-serif;}

     .main{width:800px;height:500px;margin:50px auto;text-align:center;}

     .img-container{width:280px;height:280px;margin:0px auto;text-align:center;position:relative;cursor:pointer;}

     .temp{position:absolute;left:0px;top:0px;opacity:1;z-index:-1;}

     .cover{position:absolute;left:0px;top:0px;opacity:1;z-index:-1;}

     h3{font-weight:normal;color:#333;margin-top:40px;margin-bottom:60px;}

 </style>

 <body>

     <div class="main">

         <div class="img-container"  id="cover">

             <img src="data:image/error/ont_temp2.png" class="temp">

             <img src="data:image/error/one2.png" class="cover" id="top">

         </div>

         <h3>抱歉，暂时找不到你要查看的内容。<small>Sorry,The page can't be found.</small></h3>

         <p>不过...你可以回到<a href="http://mydarling.sinaapp.com/">darling达令</a>发现更多.</p>

     </div>

 </body>

 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

 <script type="text/javascript">

     $('#cover').mouseenter(function(){

         $('#top').stop();

         $('#top').animate({opacity:'0'},"fast");

     });

     $('#cover').mouseleave(function(){

         $('#top').stop();

         $('#top').animate({opacity:'1'},"slow");

     });

 </script>

 </html>

【末尾：苦逼承接各种前端外包&php外包，有意请戳http://mydarling.sinaapp.com/】

Web Design：欧美人形剪影的404界面的更多相关文章

  1. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  2. Web Design：给实验室UI们的一堂课（下）

    [讲稿]From top to down,自顶向下哈,首部栏.导航栏之后一般是页面的主模块,也就是Body部分,这一块儿才是你网站的核心内容,文章.新闻.动态.数据.图表.相册等都是在这儿体现出来.在 ...

  3. Web Design：给实验室UI们的一堂课（上）

    实验室的UI越来越水,设计什么的做的一塌糊涂,所以拖了很久,就想给他们讲一下设计或者说入门吧,上周末才倒出来时间. 这里放上PPT和讲稿吧,懒得去整理板式了. 主要讲了一下Web Design怎么做, ...

  4. 【Spring学习笔记-MVC-15.1】Spring MVC之异常处理=404界面

    作者:ssslinppp       异常处理请参考前篇博客:<[Spring学习笔记-MVC-15]Spring MVC之异常处理>http://www.cnblogs.com/sssl ...

  5. 自适应网页设计（Responsive Web Design）

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  6. iPhone 6 Screen Size and Web Design Tips

    Apple updated its iPhone a bit ago making the form factor much bigger. The iPhone 6 screen size is b ...

  7. 基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍

    在前面介绍了一些关于最新基于MVC4+EasyUI的Web开发框架文章,虽然Web开发框架的相关技术文章会随着技术的探讨一直写下去,不过这个系列的文章,到这里做一个总结,展示一下整体基于MVC4+Ea ...

  8. Understanding Responsive Web Design: Cross-browser Compatibility

    http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...

  9. 自适应网页设计（Responsive Web Design）（转）

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

随机推荐

  1. 题目1005：Graduate Admission

    题目1005:Graduate Admission 时间限制:1 秒 内存限制:32 兆 特殊判题:否 题目描述: It is said that in 2011, there are about 1 ...

  2. c/c++笔记

    string 若要根据字典序比较string类型的大小,只需要用><=就可以啦 例如: string s1="abcz"; string s2="abcd&q ...

  3. Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果

    本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/18311877) 今天还是给大家带来自定义控件的编写,自定义一个Lis ...

  4. jmeter随笔（29）-关于自己的jar包和beanshell的使用

    点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...

  5. 使用AS3.0代码实现给图片添加滤镜的模糊与斜角效果

    滤镜可应用于任何显示对象(即,从 DisplayObject 类继承的对象), 例如 MovieClip.SimpleButton.TextField 和 Video 对象,以及 BitmapData ...

  6. KVM虚拟化（一）—— 介绍与简单使用

    一.架构及介绍 KVM(Kernel-based Virtual Machine)它由 Quramnet 开发,该公司于 2008年被 Red Hat 收购: 自Linux 2.6.20后整合到内核, ...

  7. JS的文本编辑框jwysiwyg-0.6

    一款轻量的用js写的文本编辑框.

  8. table extraction

    http://yz.mit.edu/papers/webtables-vldb08.pdf http://www.vldb.org/pvldb/vol4/p528-venetis.pdf Alon H ...

  9. PZISP自动下载软件运行时出现“应用程序无法启动,因为应用程序的并行配置不正确”

    在win7下以管理员身份运行“PZISP自动下载软件”时出现“应用程序无法启动,因为应用程序的并行配置不正确”时,是因为系统里面没有一些visual c++库 想一想,反正以后也要用上VS2010的, ...

  10. myeclipse的一些设置

    常用快捷键 Ctrl + Shift + R 搜索文件Ctrl + Shift + T 搜索类型Ctrl + O 搜索成员   智能提示 Windows > Preferences > G ...