项目需求，必须得写个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. RDD中cache和persist的区别

    通过观察RDD.scala源代码即可知道cache和persist的区别: def persist(newLevel: StorageLevel): this.type = { if (storage ...

  2. It English 每日更新

    unary operator 一元运算符 short circuit evaluation 短路经查询

  3. noip2007 树网的核

    P1099 树网的核 112通过 221提交 题目提供者该用户不存在 标签动态规划树形结构2007NOIp提高组 难度提高+/省选- 提交该题 讨论 题解 记录   题目描述 设T=(V, E, W) ...

  4. Android基础总结（4）——广播接收器

    在Android中的每个应用程序可以对自己感兴趣的广播进行注册,这样该程序就只会接收自己所关心的广播内容,这些广播可能来自于系统的,也可能来自于其他应用程序的.Android提供了一整套完整的API, ...

  5. [JFinal 1] JFinal和SSH中使用拦截器的对比

    导读:先前在做.NET项目时,拦截的功能主要是依靠缓存session来实现.当需要跳转到某个页面,使用某个功能查询一些数据时,会根据session中的用户值来判断是否已经正常登录,如果没有,则重定向到 ...

  6. su：认证失败

    使用命令[su - root]切换用户,提示[su:认证失败] 原因:Ubuntu安装之后,root用户默认是被锁定的,不允许登录,也不允许su到root. 解决:重新设置密码 在终端输入命令:sud ...

  7. linux驱动程序框架基础

    ============================      指引     ============================= 第一节是最基础的驱动程序: 第二节是/dev应用层接口的使 ...

  8. C语言开源项目

    值得学习的C语言开源项目 - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...

  9. box2d 遍历世界中 body 的方法

    大家都知道,循环遍历有很多方法,在box2d中大家普遍使用while和for循环来遍历世界,那什么时候使用for,什么时候使用while呢? 当循环中不设计body删除的时候,使用for循环,即: C ...

  10. HTML5和CSS3的能量究竟是怎样的？

    Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和&l ...