step by step教程：使用HTML5和CSS3的便笺
程序员文章站
2022-05-23 10:13:10
...
在这个演示中，你可以创造一个新的便笺，它会保持到本地的SQl存储，并且可离线访问。当你需要关闭便笺时会会出现一个漂亮的动画效果。
涉及到的技术：
- HTML5 Application Cache
- HTML5 Database API
- CSS Transitions [1, 2]
- JavaScript OOP programming & Getters and Setters
不过目前只能在基于Webkit 4+的浏览器上正常工作，所以你需要使用Safari浏览器。
首先你需要在页面顶部添上HTML5 doctype：
<!doctype html>
既然有脱机工作，我们必须告诉浏览器在哪里找到含有HTML，CSS，JavaScript等的文件。不能依赖于浏览器的缓存，我们需要使用HTML5中的缓存API。
要使用HTML5的缓存，我们首先需要提供一个StickyNotes.manifest文件，列出所有离线需要的文件：
CACHE MANIFEST
#version=1
deleteButton.png
deleteButtonPressed.png
……
点击查看更详细的教程：http://ajaxian.com/archives/view-source-tutorial-sticky-notes-with-html5-and-css3