LaoZhuHome Beta

还是国外的蛋疼达人，不知花了多少个日夜画出了这部iphone4，我相信作者一定是个很细心的人，不然这么多的细节如果让一个浮躁的人来处理估计世界末日也难看到。 作者为什么要分享这部iphone4呢 有两个原因让我想分享这部iphone4: 1.它很酷并且棒极了！！！ 2.完全使用CSS3来完成，没有任何图片哦

每一个从事前端开发的童鞋估计都知道结构（Structure）、表现（Presentation）和行为（Behavior）这三个词语意味着什么，这里我先只针对结构这一块拿出来说说。 结构（Structure），顾名思义就是网页的框架，一个良好的框架可以很方便的创造出一个优美的网页，那么何为良好的框架，这就是下面要提到的语义化（Semantic），我会以一本书的例子来比喻，这样或许会更加容易理解一些。 我们假设一个网页就是一本书，抱着最终用户优先的原则我们来着手制作网页这本书。

每当遇到一些节日这边都会出一版logo动画，这重担自然落到了敬爱的汤师爷肩上，至于汤师爷是多么的油菜我已经不想多说了，现在我要做的事就是把他这个动画变成jquery版本。 在没有开始做之前我就跟汤师爷提过这个建议，我估计这小子是故意的，因为当我拿到flash源文件的时候我惊奇的发现竟然有700帧！我不得不把这700帧分成了7张图片顺序载入才完成了这个动画效果，由于帧数色彩太丰富，压缩后单张图片竟然高达4M左右，于是又不得不强行压缩成8位色彩，最后的结果已经失去了flash版的光华，但是我仍然放出来给大家看一下，至少在帧数较少的情况下完全可以用js来实现这个效果，像谷歌logo动画一样，你也可以。

记得去年这个时候已经接触了CSS3一段时间，也写过有关css3的文章（css3动画之我见），那个时候有关css3的中文资料并不是太多，学习起来有些不顺畅，再看看现在有关CSS3的资料充斥着整个网络，这也为现在开始接触这些的同学提供了很好的学习资源，虽然CSS3还不能完全用于商业化，但是各位喜欢折腾的盆友们可以自娱自乐撒。 其实很多博友都使用了一些的CSS3元素，所以现在大家看到一些CSS3效果都觉得很普遍，就像之前有人用chrome浏览器发现我在小站藏着的一些小效果都在那里说来道去，现在大家都习惯了用一些俏皮可爱的小效果，并且这小小效果确实让那些可爱的博友们感到很有意思，这就够了，这就够了哇。

我使用这个功能有一段时间了，这个功能可以翻译为内联图像，估计很多人都在期待所有浏览器都可以支持这个功能，至少目前还不靠谱，但是聪明的人类总会想出一些方法来解决出现的问题，所谓技术大多都是逼出来的。 先放一个链接吧，这里面清楚的介绍了这个功能的原理，The “data” URL scheme，文章不算长，你可以随便看一看。其实你也可以不必理解其为什么，因为下面我会告诉大家如何有效的使用内联图像。

面试或者带新人的时候我一般都会问这样一个问题，在没有任何样式的前提下，一个div的样式是{width:100px;height:100px;margin:0 0 10px 0;border:1px solid #ddd;},另外一个div的样式是{width:100px;height:100px;margin:15px 0 0 0;border:1px solid #ddd;}，问这两个div上下的间距是多少？ 很遗憾我遇到的童鞋想了想告诉我是35px,有一个人说是15px，我问为什么，他说感觉。。。我彻底崩溃。 这个问题其实并不能说明对方的能力不好，但是有一点可以说明，就是对方一定没有扎实的理论基础，w3c和国人并不在意的WCAG在其心里应该只是一个口号，并没有深入的去理解，运用的话估计也谈不上。也许你会说他们可能是新手，并不需要了解这么多东西，那么我想反驳你的是没有这种正确的理论做代码约束的话，可能你在前端开发这条路上会走一些弯路，与其“实迷途其未远，觉今是而昨非”，不如“抟扶摇而上者九万里”，与其走一些不太友好的弯路，不如最初就走一条国际化的标准道路，繁琐一点没有什么，关键是你应该会做的开心。

先说一下，这个是文囧文。 这个效果在很多电子商城左侧都会用到，也许有一些人会问这种效果是如何做出来的呢，其实用jquery并不是很难实现，我在这里从之前做过的页面里分离出来了一个demo，效果没有封装就是为了大家能看的更清楚，用了尽量通俗的方法写了出来，如果你还是看不懂那么自己就扒下来慢慢研究吧。 最重要的还是要用xhtml和css把一个良好的结构做出来，如果没有一个良好的html结构做支撑，可能用js来实现一些效果会出现多遍历一个节点这种无谓的消耗，当然我写的也不一定好，仅供参考。

这两天去掉了Wordpress Thread Comment这个插件，换上了Ajax comments，很多很多人都在用这个功能，好处我就不说了，我之所以现在才用大师的作品是因为原插件拓展性不是太强，无法实现评论异步加载功能，Ajax comments的拓展性很高，可以随意定制评论后的效果，但是Ajax comments没有了点击[回复]后@author:的效果，用惯了Wordpress Thread Comment发现没有@访客这种功能确实很不习惯，所以自己弄了一小段代码来实现这个友好的效果。

一直想找个自娱自乐的地放一些自娱自乐的代码，说实在的WP我都装的想吐了，所以开辟了一个子域名打起了Typecho的主意，具体请见N的试验田，花了点时间写了一个新主题，也移植了一些WP的功能过去，以后还会慢慢完善，typecho这玩意其实还是在完善中，暂时只适合写博客，没有那么多的插件供你使用，很多功能只能自己去写，这是一个好处，也是一个坏处啊。

今天早上上班打开电脑突然发现谷歌的doodle竟然动了起来，第一反应是flash，然后firebug，发现竟然不是，然后唏嘘数分钟。估计有很多童鞋都会像我这样思考和行动吧，好吧，让我们一起来探索一下奇迹是如何发生的。 这个动画使用了CSS Sprites技术，这个已经不是什么新技术了，很多很多的网站都在使用，使用CSS Sprites的目的是为了减少HTTP请求以减轻服务器端的压力，在访问人数很多的电子商务类网站这项技术的优势就会很明显，最后再把拼图压缩一下CDN流量那边估计每个月就又能加菜啦~~