项目需求，必须得写个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. windows7环境下svn服务器的配置及使用

    一.安装 1 软件准备: Setup-Subversion-1.7.8 TortoiseSVN-1.7.11.23600-win32-svn-1.7.8 2 安装: 安装个人的需要设定好安装路径. 3 ...

  2. 对iframe跨域通信的封装

    github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...

  3. Hadoop2.6.0(2.4~2.7)完全分布式搭建-入门向 新手向 详细流程

    .caret,.dropup>.btn>.caret{border-top-color:#000 !important}.label{border:1px solid #000}.tabl ...

  4. C# ref和out的区别

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  5. Swift 学习一函数&函数属性&懒加载

    函数 函数相当于OC中的方法 格式: func 函数名(参数列表) -> 返回值类型 {    代码块    return 返回值} func 函数名(参数列表){  // 返回值为Void 可 ...

  6. Android网络编程之Socket

    Socket(套接字)是一种通信机制,可以实现单机或跨网络进行通信,其创建需要明确的区分C(客户端)/S(服务器端),支持多个客户端连接到同一个服务器.有两种传输模式: 1).面向连接的传输:基于TC ...

  7. 洛谷P2264 情书

    P2264 情书 88通过 971提交 题目提供者lin_toto 标签字符串 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 yyy快把题目改回来 噫 这题的题目好逗啊... 情书std ...

  8. Centos linux php扩展安装步骤

    使用phpinfo()函数输出PHP信息,然后找到Configuration File (php.ini) apachectl 其设计意图是帮助管理员控制Apache httpd后台守护进程的功能. ...

  9. 获取AX的窗口所有控件的lableID及内容

    思路,穷举Forms\TargetFormName 在AOT上面的路径得到TreeNode, 遍历各控件的属性. a1,先读Label属性,没有就读Caption属性及Text属性. a2,若a1取不 ...

  10. 【Linux】Centos部署MySQL

    将CentOS部署MySQL需要本地配置环境.本地编译MySQL,耗时较长的情况,优化为编译成型MySQL并打包,推送并按配置部署. 首先需要在一台机器配置好环境,搭个YUM源,并将所需要的包取出备用 ...