08 2013 档案
摘要：本文是一篇非常不错的关于用户体验设计的文章，本文作者是一个心理学家，他从他所研究的领域去看到用户行为，用户体验，相信会给你带来不一样的观念与知识。翻译水平有限，若有不准确之处欢迎指正。——————————以下为翻译的全文——————————您可能已经听说过这个关于大象的故事：一个国王带六名男子进入一个黑暗的建筑里，他们看不到任何东西。国王对他们说，“我已经把这个动物从荒野的土地上买到了东方，这种动物称之为‘大象’。” “大象是个什么东西？”男人问。国王说：“你们可以感觉他，然后描述给我。”摸到一条腿的男人说，大象就像一个支柱。触摸到尾巴的人说，大象像绳子。摸到躯干的人说，大象像树枝。摸到耳朵的
阅读全文
摘要：Raphael是一个用于在网页中绘制矢量图形的Javascript库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。您可能感兴趣的相关文章经典的白富美型 jQuery 图片轮播插件2012年最佳 Web 前端开发工具和框架让人爱不释手的13套精美网页图标素材10套精美的免费网站后台管理系统模板精心挑选的优秀 jQuery Ajax 分页插件 Raphaël是跨浏览器的矢量图形库，目前支持的浏览器包括
阅读全文
摘要：一、前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。二、CSS border生成三角技术简介效果抢鲜下图为使用CSS的border属性实现的三角效果：.test{width:0; height:0; border-width:20px 10px; border-
阅读全文
摘要：一、引子Firefox3.6包含了许多CSS的改进，本文将向您展示如果使用CSS渐变。如果你正在运行的Firefox 3.6的最新测试版，你应该看看我们的互动演示，并查看相应的代码。使用单选按钮来切换不同的样式选项。二、含CSS渐变的背景(backgrounds)背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用，放大时也比较好看，可以让您创造出一个更灵活的布局。Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。三、线性渐变(Linea
阅读全文
摘要：http://fmbip.com/CSS3性质(CSS3 Properties)平台MACWIN浏览器CHROMEFIREFOXOPERASAFARICHROMEFIREFOXOPERASAFARIIE版本53.610.1443.631010.54678RGBAYYYYYYYYYYNNNHSLAYYYYYYYYYYNNNMultiple BackgroundsYYNYYYNNYYNNNBorder ImageYYNYYYNNYYNNNBorder RadiusYYNYYYYNYYNNNBox ShadowYYNYYYNNYYNNNOpacityYYYYYYYYYYNNNCSS Animatio
阅读全文
摘要：一、关于纯CSS实现气泡对话框首先，来张大图：上边这张黄黄的，大大的，圆圆的，有个小尾巴，文字内容有些YY的图片，就是使用纯CSS实现的气泡对话框效果，一点图片都没有哦。看到这里，你是不是跟我一样，有些惊叹CSS的潜力呢。关于这张图片，暂时先放到一边，下面我要讲一些与主旨相关的比较重要的，同时又很实用的一些技术。我们首先看下面这一张图片（截自人人网）：可能颜色有点淡，在左上角有个90度的尖角，于是整个形成了一个气泡对话框。现在考考你，如果你来实现这个效果，你会怎么做？//zxx:假设你已经思考了一会儿｡◕‿◕｡我想，如果您没有看本文标题，可能就想到的是做个90度等腰三角形小图片；就算您知道可以
阅读全文
摘要：一、前面的感慨以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。我们可以先看一段下面我录制的视频（Safari4浏览器，时长11秒），看看使用transition实现的效果。下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition
阅读全文
摘要：css代码：/* v1.0 | 20080212 */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form,
阅读全文
摘要：一、一开始的唠叨最近忙于开发，自淫于项目的一步步完工，心浮躁了。舍近而求远，兵家之大忌。我是不是应该着眼于眼前的东西，好好的静下心来，超过一般人的沉静与沉浸，研究最基本的东西呢？这番思考，让我找到了一些方向。对于checkbox，从我开始接触HTML开始，陆陆续续也研究过好多次，然而多是零星的知识点的累加，或是掌握了些表象的东西，是否深入核心，是否深入其本质，是否有了完善的总结，是否融入自己的世界观，都没有，而我今天要做的工作就是把过去的那些积累好好的精心的整理出来，加上自己的思考，加上自己的理解，展示出来。提前的说明：本文checkbox的讲解不针对Safari浏览器，或仅是一带而过，Saf
阅读全文
摘要：概述IE浏览器以不支持大量的css 属性出名，同时也因其支持的css属性中存在大量bug。本页列举了IE下的一些问题，实例样本和一些我们已知的解决方法。尽管我已经尽力按照它们本来的性质对它们进行分类，仍有许多bug可以分在好几个部分之下，这种情况下，我将会将此bug分在普通bug这一部分。统计目前为止。本站点包含46个”普通bug”教程，5个”haslayout bug”教程，6个”不支持的方法”教程，一个“冲突bug”教程。总共58个教程，70个解决方法。最近的教程发布于2009年8月19日 15:38:47 星期三站点包含44个IE6 bug，28个IE7 bug以及19个IE8 bug。
阅读全文
摘要：一、字体与字符显示的关系这里左右方向的尖角，字体为宋体：不受字体影响型：＜＞这里左右方向的尖角，字体为Arial：不受字体影响型：＜＞这里左右方向的尖角，字体为Lucida Sans Unicode：不受字体影响型：＜＞这里左右方向的尖角，字体为Times New Roman：不受字体影响型：＜＞这里左右方向的尖角，字体为Verdana：不受字体影响型：＜＞这里上下方向的尖角，字体为宋体，小尖角：ˇ^不受字体影响型：∧∨这里上下方向的尖角，字体为Arial，小尖角：ˇ^不受字体影响型：∧∨这里上下方向的尖角，字体为Lucida Sans Unicode，小尖角：ˇ^不受字体影响型：∧∨这里上下
阅读全文
摘要：一、写在前面的最近一直构思着写篇关于html标签的文章，虽说之前处理过html标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。在网上查阅相关资料想整合一下相关的信息，发现深入探讨html，与body的文章很少，只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值，其余都没有什么相关的好文章。而这里，我要讲述的与上面的交集并不多，只要是讲述一些关于html与body的各种表现，以及我自己对这些表现的合理的解释和并提供一些过去处理类似问题的经验，希望对大家能够有所帮助。二、关于html与body的一些表现1.背景色一般情况下，我们css控制
阅读全文
摘要：1.常规css方法——可以实现IE，Safari，chrome，opera浏览器下文字溢出省略号表示这是一段测试文字，主要是用来测试文字溢出后是否会用省略号显示。.zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}2.使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示这段代码调用了跨文件夹路径的ellipsis.xml文件，看Firefox浏览器下是够文字溢出省略号表示。ps:
阅读全文
摘要：border-images可以说也是CSS3中的重量级属性，如同圆角、边框颜色属性border-color、块阴影属性一样，也是属于边框属性中的一员。从其字面意思上看，我们可以理解为“边框-图片”，通俗的说也就是使用图片作为(对象的)边框，这样一来边框的样式就不像以前那样只有实线、虚线、点状线...那样单调了，下面我们就来具体看一下应该怎样使用它。首先我们来看一下与border-image相关的一些属性，有border-image-source、border-image-slice、border-image-repeat，其实就如同background属性一样有background-color
阅读全文
摘要：Hello. This is a DIV element.Hello. This is a DIV element.
阅读全文
摘要：1 function ping(ip){ 2 var img = new Image(); 3 var start = new Date().getTime(); 4 img.src = "http://" + ip + "?t=" + start; 5 var flag = false; //无法访问 6 img.onload = function(){ 7 flag = true; 8 console.log('ok'); 9 };10 img.onerror = function(){11 ...
阅读全文
摘要：for-in循环应该用在非数组对象的遍历上，使用for-in进行循环也被称为“枚举”。从技术上将，你可以使用for-in循环数组（因为JavaScript中数组也是对象），但这是不推荐的。因为如果数组对象已被自定义的功能增强，就可能发生逻辑错误。另外，在for-in中，属性列表的顺序（序列）是不能保证的。所以最好数组使用正常的for循环，对象使用for-in循环。有个很重要的hasOwnProperty()方法，当遍历对象属性的时候可以过滤掉从原型链上下来的属性。思考下面一段代码：// 对象var man = { hands: 2, legs: 2, heads: 1};// 在代...
阅读全文