PIZn

使用 HTML 5 的网站越来越多了，最近在学习 HTML 5 的过程中，我也被一些使用 HTML 5 的优秀网站深深地吸引上了。今天上 Twitter 的时候，关注到一个设计相关的网站，于是发现了如下一片优秀的文章《45 Examples of Websites Designed with HTML5》。

经过对每一个网站的认真访问和学习，我觉得这些值得拿出来分享。不仅仅页面的设计别具风格，而且从设计背后的代码中，我们也许能够学习到更多。

在 9 月 11 日的 WebReBuild 广州站上，彪叔在中间环节为我们介绍了 Google 联合 Arcade Fire 推出了一个 HTML5 互动电影： The Wilderness Downtown 。初次见识到这么强大的效果，我被震撼了。

回来之后，我在自己电脑上的 Chrome 打开网址再一次欣赏这个 HTML5 互动电影，在搜索框中输入了我出生的地方，随后便开始观赏这个电影的剧情发展。奔跑的人，飞翔的鸟，旋转的街景，根据压力而改变的活塞和齿轮，不断成长的树。再次欣赏之后，我不得不惊叹，真牛逼。于是，我将这个 HTML5 互动电影分享给了我的朋友们观看。

在设计violet主题1.0版本的时候，便想为其添加一个小小的功能——底部TOP功能，如今还未实现。最近在研究一些网站设计和开发，于是又发现了这个小小功能的强大作用。深究一番，引发对链接的思考与总结。

有人说，网站的导航是可视化的信息构架，足见导航在网站中的重要性。那么，导航又是如何带领我们通过点击到达目的地的呢？简而言之，是链接的功劳。揭开链接背后的神秘面纱，标签既熟悉又陌生。

这2天来一直在忙碌，没时间写点儿小文章。今天好不容易挤了挤点儿出来，写啥好？还是从最简单的开始吧，先对 Document Tree 做下小小的总结，为接下来的 Css inheritance 做铺垫。

Document Tree 是指 (X)HTML 里面的元素（例如：html、body、div、ul、li等）所组成的关系树。所有的 (X)HTML 文档都是树，而这些树可以这样来理解，从家庭的角度——Document Tree is just like a family tree.

自从接触了计算机之后，我更是发现了生活之中无处不在的方方的世界。屏幕显示的像素是方的，硅晶体是方的，各种无法说明的也是方的。方方的世界里，我浏览的网页现在看起来也是由许许多多隐形的方框组合起来的。上图虽然有很多个圆，但我却咋的也看到了很多方呢？

前天所写的盒子模型也是方的，今天要写的块级元素和行内元素也是方的，一点儿圆滑的艺术熏陶都没有。网页上的元素，也是基于方方的世界里面的，即使css3里面可以写出圆角，但也离不开盒子的方、块级元素的方还有行内元素的方！

昨日一哥们在用js写一棵简单的树，出现了一个css样式问题——树的父节点与子节点之间的间距过大，然后让我帮忙修改。一开始我以为是其css样式没控制好，就直接在样式表里面先清除了ul和li属性的padding、margin等盒子模型的距离，然后进行样式表控制。但结果并不如我所愿，试了很久还是不行。

折腾了一会儿，转回到xhtml页面来看，除去不规范的js代码，一眼就发现了问题了。他是这样写的…

一、Frames结构的基本格式
二、各窗口的尺寸设置
三、各窗口间相互操作(Frame Target)
四、Frame 的其它属性