认真观摩了下，整个网站所使用的技术和效果，都是学习Html5 和css3的好例子。当然，里面的内容也是很值得一读的。可惜的是，网站已经被墙了，如果要看的话，请自行翻墙查看吧。
如果你不懂E文，可以查看翻译：http://article.yeeyan.org/view/75834/153243
========================================
Google Chrome 团队今天发布了一个新网站——我学到的关于浏览器和 Web 的20样东西（20 Things I Learned about Browsers and the Web），从网站的名字上就可以了解到这个网站的用途了。Google 在 Chrome 官方博客中说这个网站是继两年前推出“Chrome 漫画书”和上线“何谓浏览器”网站后的又一服务于技术菜鸟的网站。网站内容以图书的方式呈现。
值得一提的是，该网站完全基于 HTML5 和 CSS3 编写，采用了大量的 HTML 5技术，实现了诸如翻页、离线阅读、自动书签等等酷炫的功能，具体采用的技术和实现的功能如下：
使用 Application Cache API 实现了离线阅读功能，只要你在浏览器中访问过一次该网站并阅读了内容，那么今后即使你不能上网也可以阅读。
使用 Local Storage API 实现了“重开后继续阅读”的功能，比如你读到了一半，突然有事关闭了浏览器，那么下次打开该网站时会自动提示你是否从之前关闭的页面开始阅读。
使用 History API 优化 URL 结构使内容和页面能够被搜索引擎索引。
使用 HTML5 canvas element 增强了书的封面和内页之间的切换体验，同时翻页效果以及翻页时产生的阴影和高光等都是通过 JavaScript 和浏览器绘图技术生成的。
CSS3 也功不可没，比如 Web 字体、动画、渐变以及阴影都由它实现，大幅度提升了视觉吸引力。
由于这个网站采用的是标准的 HTML5 与 CSS3 技术，所以在支持 HTML5 技术的最新浏览器上都可以完美呈现，你可以通过 www.20thingsilearned.com 或者 goo.gl/20things 来访问该网站。
如果你不懂E文，可以查看翻译：http://article.yeeyan.org/view/75834/153243
========================================
Google Chrome 团队今天发布了一个新网站——我学到的关于浏览器和 Web 的20样东西（20 Things I Learned about Browsers and the Web），从网站的名字上就可以了解到这个网站的用途了。Google 在 Chrome 官方博客中说这个网站是继两年前推出“Chrome 漫画书”和上线“何谓浏览器”网站后的又一服务于技术菜鸟的网站。网站内容以图书的方式呈现。
值得一提的是，该网站完全基于 HTML5 和 CSS3 编写，采用了大量的 HTML 5技术，实现了诸如翻页、离线阅读、自动书签等等酷炫的功能，具体采用的技术和实现的功能如下：
使用 Application Cache API 实现了离线阅读功能，只要你在浏览器中访问过一次该网站并阅读了内容，那么今后即使你不能上网也可以阅读。
使用 Local Storage API 实现了“重开后继续阅读”的功能，比如你读到了一半，突然有事关闭了浏览器，那么下次打开该网站时会自动提示你是否从之前关闭的页面开始阅读。
使用 History API 优化 URL 结构使内容和页面能够被搜索引擎索引。
使用 HTML5 canvas element 增强了书的封面和内页之间的切换体验，同时翻页效果以及翻页时产生的阴影和高光等都是通过 JavaScript 和浏览器绘图技术生成的。
CSS3 也功不可没，比如 Web 字体、动画、渐变以及阴影都由它实现，大幅度提升了视觉吸引力。
由于这个网站采用的是标准的 HTML5 与 CSS3 技术，所以在支持 HTML5 技术的最新浏览器上都可以完美呈现，你可以通过 www.20thingsilearned.com 或者 goo.gl/20things 来访问该网站。