摘要：Chrome的开发者工具已经强大到没朋友的地步了，特别是其功能丰富界面友好的console，使用得当可以有如下功效：更高「逼格」更快「开发调试」更强「进阶级的Frontender」Bug无处遁形「Console大法好」console.log大家都会用log，但鲜有人很好地利用console.erro... 阅读全文
如何只用CSS做到完全居中
2013-10-15 14:54 by focusdada, 187 阅读, 0 推荐, 收藏, 编辑
摘要：我们都知道margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中……直到现在。但是，请注意！想让元素绝对居中，只需要声明元素高度，并且附加以下样式，就可以做到：12345.Absolute-Center {margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;} 我并不是第一个发现这种方法的人（不过我还是敢把它叫做“完全居中”），它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览这篇文章的评论，我甚至根本就不会发现这个办法。 . 阅读全文
在setTimeout里面传递参数
2013-08-19 14:40 by focusdada, 467 阅读, 0 推荐, 收藏, 编辑
摘要：怎么在setTimeout里面传递参数？ ---------------------------------------------------------嗯想了出来，不用全局变量，当然用局部变量了。 ---------------------------------------------------- Function.prototype.apply = function (obj, argu) { if (obj) obj.constructor.prototype._caller = this; var argus... 阅读全文
CSS之Position详解
2013-08-07 16:29 by focusdada, 158 阅读, 0 推荐, 收藏, 编辑
摘要：CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。position的四个属性值：relativeabsolutefixedstatic下面分别讲述这四个属性。 sub1 sub21. relativerelative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。 阅读全文
jQuery中调用WebService方法小结
2013-07-26 10:34 by focusdada, 150 阅读, 0 推荐, 收藏, 编辑
摘要：以前在写ajax请求时，总是喜欢使用jQuery+ashx的方式进行调用，今天采取jQuery+WebService的方法来做ajax请求，发现这种方式比使用ashx的方式要更方便。个人感觉有两点是比较方便的：第一，在对WebService做ajax请求的时候，请求的url的写法是：服务地址/调用的方法名称，这样在请求的url中就确定了要调用的方法了，不必再在WebService代码中去判断ajax请求调用的是哪个方法了。第二，方法可以返回更多的数据类型，比如对象，泛型集合等；在ajax请求返回后，会自动将这些类型转换为json对象。而使用ashx的方式的话，需要先将这些类型转换为json.. 阅读全文
Web前端代码规范与页面布局
2013-07-25 13:14 by focusdada, 199 阅读, 0 推荐, 收藏, 编辑
摘要：Web前端代码规范与页面布局一、 规范目的：为提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构，有利于SEO优化。二、 规范基本准则：符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良，页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。三、 文件规范：html、css、js、images文件均归档至约定的目录中。1. html（1）编码：所有编码均采用xhtml，标签必须闭合，属性值用双引号包括，编码统一为utf-8。（2）语义化：语义化ht... 阅读全文
浏览器的渲染原理简介
2013-07-23 09:23 by focusdada, 84 阅读, 0 推荐, 收藏, 编辑
摘要：看到这个标题大家一定会想到这篇神文《How Browsers Work》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，1）这篇文章太长了，阅读成本太大，不能一口气读完。2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。浏览器工作大流程废话少说，先来看个图：从上面这个图中，我们可以看到那么几个事：1）浏览器会解析三个东西：一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解 阅读全文
CSS z-index 属性的使用方法和层级树的概念
2013-07-11 10:45 by focusdada, 159 阅读, 0 推荐, 收藏, 编辑
摘要：CSS中的z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index层级树的概念.这个星期我们团队做了一次内部的技术分享,南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.本文谈及多个影响节点显示层级 阅读全文
跨浏览器的 inline-block 实现[CSS]
2013-03-26 13:13 by focusdada, 185 阅读, 0 推荐, 收藏, 编辑
摘要：最近项目做多浏览器测试遇到一些兼容性问题，比如这个 inline block。所幸大多数问题都解决了，所以写出来分享一下。我们在制作网页时，有时会希望一个元素既能像 block 一样定义宽度和高度，又可以像普通的 inline 一样不断行，在 Opera 和 Webkit 中支持一个 CSS2 的属性 display: inline-block。利用这个属性，在 Opera 下即可完全实现我们所需的效果，但在其它浏览器下就不行了。display 属性另外还有一个不太常用的值 display: inline-table。利用这个值也可以完全实现我们所需的效果。这个属性被除了 IE 以外的所有浏览 阅读全文