- 博客(17)
- 收藏
- 关注
原创 一个检测浏览器对HTML5和CSS3特性支持的JS库
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
2013-06-27 10:35:17
229
原创 CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。属性选择器:简单属性选择如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。a[href] {color:red;}将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:a[href][title] {color:red;} 根据具体属性值选择除了选择拥有...
2013-06-26 15:28:57
104
原创 前端性能优化:高频执行事件/方法的防抖
为什么我们要引入防抖???开发人员会在有用户交互参与的地方添加事件,而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时,执行的非常迅速,并且触发很多次。如果你的回调过重,你可能使浏览器死掉。 防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例:// 取自 UnderscoreJS 实用框架func...
2013-06-26 13:32:27
159
原创 HTML 5 + XHTML
xhtml是用xml的规则重新规范html,xhtml是xml的一个子集,所以具备了xml的特性。html就是超文本标记语言无法说二者哪个更好,或者更好用,各有优劣。目前html5比较被看好。尽管下一代xhtml遥遥无期,但它的出现和应用也曾拯救了不少人啊,不然谁在乎前端代码啊? XHTML 就是符合 XML 标准的改进型 HTML,对语法的苛刻程序和其它基于 XML 的一样...
2013-06-26 10:00:03
136
原创 WEBGL+SVG
WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插...
2013-06-26 09:56:51
613
原创 HTML 中的 span 标签标准用途的讨论(样式+交互)
无语义行内元素。在段内定义与该段样式不同的内容的样式。 同时满足以下条件的内容你可以使用span标签:1、行内元素(inline)2、无语义3、你需要给他添加特定样式或做js钩子的时候 如:1.这是一段话,段落里有一些特殊的需要标记的内容,如<span class="red">红色</span>。2.这是一个箭头:<span ...
2013-06-26 09:19:44
1231
原创 bootstrap初步认识1
产生背景:1.作者为公司内部提供一套标准化的前端开发工具2.为了完成前端开发任务,工程师们几乎尝试了自己熟悉的所有库。应用之间的不一致性导致它们难以扩展和维护。Bootstrap最初就是这个问题的一个解决方案,而且在Twitter内部第一次Hackweek上得到了认可。Hackweek结束后,我们手头上的项目已经相当稳定,可以在公司内部部署使用了。3.从最初CSS驱动的项目,发展到...
2013-06-25 23:06:09
94
原创 网页设计标记工具——马克鳗
网页设计标记工具——马克鳗马克鳗中提供的标注内容:长度标记、坐标标记、颜色标记以及文字标记 标注完成后马克鳗会自动将标注好的图片保存为马克鳗格式的文件,以便于进行二次标注另外,马克鳗还可以将标注过的图片保存为PNG格式,以便于浏览。...
2013-06-21 22:43:00
264
原创 IE6双边距BUG
什么情况会出现?1.当浮动元素的浮动方向和浮动边界的方向一致时才会出现2.同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。正常情况:.floatbox {float: left;width: 150px;height: 150px;margin: 5px 0 5px 100px; /*外边距的最后一个值保证了100像素的...
2013-06-21 21:22:51
103
原创 htmL5.js+html5.css
在head部分引用(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> /* HT...
2013-06-20 22:13:56
97
原创 盒子模型
盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。 盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。 (为了让网页能兼容各个浏览器,让我们用标准 W3C 盒子模型。) 盒子本身有一个大小 : 宽 和 高 内容离内边框的距离叫做—–内边距 盒子与盒子之间可以保持距离: 外边距 一个盒子: 有边框(边框有多厚? 用像素自定义...
2013-06-20 10:07:44
86
原创 Html基础三部分
下面来看看Html的基础3部分:1:文档声明文档声明很重要,直接影响浏览器的渲染效果。 eg:如盒子模型有标准 W3C 盒子模型 和 IE 盒子模型 加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。 不属于html文档的一部分,不用闭合。(<html></h...
2013-06-20 09:34:17
331
原创 HTML5初步认识2
在HTML 5中,省掉不必要的复杂性,doctype就简化成了:!DOCTYPE html支持已有的内容是指,对已存在的内容100%的支持。使用HTML 4或XHTML 1,对应一个整块内容,比如一个商品列表好了,有商品图、商品标题、商品简介等,我要分别给这三块元素加上三个相同的链接。然而在HTML5里面,你完全可以用一个a标签包含这三个区块。也就是,a标签包含块级元素。这解决了现实的问题。目前...
2013-06-18 12:10:08
81
原创 用Margin还是用Padding(参考别人写的)
用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南padding称呼为内边距,其判断的依...
2013-06-18 11:31:58
137
原创 HTML5初步认识1
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。浏览器支持最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。为 HTML5 建立的一些规则:...
2013-06-16 21:39:35
83
原创 工具函数之$.each()
$.each():对数组或对对象内容进行循环处理语法:jQuery.each( collection, callback(indexInArray, valueOfElement) )参数:collection 遍历的对象或数组callback(indexInArray, valueOfElement) 在每一个对象上调用的函数$.each()说明:一个通用的遍历函数 , 可以用来遍历对象和...
2013-06-15 23:13:11
97
原创 团队技术博客收集(谷出来的)
腾讯 腾讯CDC http://cdc.tencent.com/ CDC(Customer Research & User Experience Design Center)腾讯用户研究与体验设计中心腾讯ISD http://isd.tencent.com/腾讯UED http://ued.qq.com/腾讯WSD http://wsd.tencent.com/腾讯TGidea...
2013-06-15 23:10:04
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人