Archive for the ‘前台设计’ Category

事件DOMContentLoaded与load的区别

先看这两句代码:

window.addEventListener(‘load’, loaded, false);

document.addEventListener(‘DOMContentLoaded’, loaded, false);

问题回顾:

这问题可把我郁闷死了,网上找的一个demo里头,他把样式直接用style内联(这种引进方式是dom方式)进来,然后用DOMContentLoaded来处理js,本来是没问题的。

但是当你把内联的样式写在一个外联的样式文件里头然后再进来的时候,问题就出现了。

什么原因?

DOMContentLoaded在外联样式加载前(dom加载完后)就触发了,外联的样式还没来得及渲染dom,这样导致DOMContentLoaded捕获的状态是外联样式渲染前的状态。

......[ More Detail ]

【译】HTML5 的Web SQL Databases-本地数据库中文教程

针对本地数据储存,W3C提及到四种不同的方法,每一种方法都很精彩,但是今天要提及的只是其中一种:Web SQL Databases

HTML5的Web SQL Databases的很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的,遗憾找不到中文教程,我这里只好特意翻译一篇文章(原文):

————————–翻译启动——–

从Safari 4,iPhone/iPad OS3,Chome 5以及Opera 10.5(桌面版)开始,HTML5 Local Database就开始被支持。我从这里了解到HTML5 Local Database,并且已经研究了一段时间,因此我决定做几个简单的例子来告诉你该怎么去使用它。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function initDatabase() { try ...
......[ More Detail ]

一个简单的HTML类名命名思维

重构的时候有一种很简单的class命名思维,我们可能知道,可能不知道;但是知道后又很难应用上,是什么的思维呢?请看以下两段代码:

第一段:

...

对应的css写法:

.a{} .a .b{} .a .b .c{}

第二段:

...

对应的css写法:

.a{} .a_b{} .a_b_c{}

有什么区别呢?很明显第二种的HTML写法会冗余一点,但是CSS的写法就没那么复杂的选择结构了。在小型项目中,这两个基本上没什么区别的。但是在大型项目中就不一样了:

1、第一种写法适合局部排版

2、第二种写法适合全局公用模板

......[ More Detail ]

另类运用,css3临摹苹果mac系统界面

为什么我说临摹?因为你下来看到的基本上是代码写出来的——无js无图纯html+css。

先看效果截图:(暂仅在chrome或safari5中有完整效果)

在线测试地址:http://xiebiji.com/works/mac_style/

源码打包:http://css3mac.googlecode.com/files/mac_style.rar

本实例源码中应用的图片只有苹果官方的壁纸一张。其余图标,包括我个人首页的小logo,都无应用到图片(也没有用到datauri)而是直接用css3绘制出来的,创作本实例目的是本人为了加深对一些css3属性的理解。(有人会说还不如直接做成图片,我不反对)。

创作本实例过程中,可以看出,css3可以做到一些我们以往没想过事情,例如“文件夹”图标的绘制。当然css3还有很多别的更强悍的应用,本实例只是列举一些简...

......[ More Detail ]