项目需求，必须得写个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. 解决：对 PInvoke 函数的调用导致堆栈不对称问题 <转载>

    问题描述: 在使用托管代码调用非托管代码时,发生“对 PInvoke 函数“UseTwiHikVisionDllTest!UseTwiHikVisionDllTest.TwiHikVision::Ge ...

  2. 增量升级（省流量更新）的Android客户端实现

    转载与 zhouhuiah的专栏 http://blog.csdn.net/zhouhuiah/article/details/16939937 本文在以上两篇博客的基础上再增加了异常处理,并将生成的 ...

  3. 一张图看Google MVP设计架构

    这段时间看了一下Google官方推出的MVP架构案例,决定把对MVP的理解用类图的形式表述一下.MVP架构的设计思想确实非常值得学习,大家如果还不是很了解MVP,建议抽时间去研究研究,相信对大家的架构 ...

  4. 使用ImageNet在faster-rcnn上训练自己的分类网络

    具体代码见https://github.com/zhiyishou/py-faster-rcnn 这是我对cup, glasses训练的识别 faster-rcnn在fast-rcnn的基础上加了rp ...

  5. Android开发-API指南-<provider>

    <provider> 英文原文:http://developer.android.com/guide/topics/manifest/provider-element.html 采集(更新 ...

  6. LA3027 合作网络-并查集压缩路径

    有N个结点 一次 I u v 操作表示把结点u的父结点设为v,距离为|u-v|%1000.输入保证执行指令前u没有父结点 一次E u 操作表示询问u到根结点的距离 O操作表示结束 #include&l ...

  7. No.010 Regular Expression Matching

    10. Regular Expression Matching Total Accepted: 89193 Total Submissions: 395441 Difficulty: Hard Imp ...

  8. WPF学习系列之六 （元素绑定）

    元素绑定 简单地说,数据绑定是一种关系,该关系告诉WPF从一个源对象提取一些信息,并使用这些信息设置目标对象的属性.目标属性总是依赖属性,并且通常位于WPF元素中. 一.将元素绑定到一起 <Wi ...

  9. 在python3.5中使用pip

    我centos7上同时有python2.7和python3.5.现在希望能在使用python3.5时也能用pip.本来这应该是很容易的一件事,然而我一步步掉进坑里.. 官网安装pip的方法是,http ...

  10. 2.3搭建Android应用程序开发环境

    1.安装Android SDK (1)首选下载Android SDK: (2)下载完成之后,在Ubuntu系统下进行解压: (3)解压完成之后,配置环境变量: ①用vim打开/etc/profile文 ...