阅读更多

7顶
1踩

Web前端

原创新闻 step by step教程:使用HTML5和CSS3的便笺

2009-10-15 11:30 by 副主编 zly06 评论(6) 有6338人浏览

 

这个演示中,你可以创造一个新的便笺,它会保持到本地的SQl存储,并且可离线访问。当你需要关闭便笺时会会出现一个漂亮的动画效果。

 

涉及到的技术:

不过目前只能在基于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

  • 大小: 35.1 KB
来自: ajaxian
7
1
评论 共 6 条 请登录后发表评论
6 楼 whaosoft 2009-10-16 11:11
挺好的 不过我有点害怕 html5了 本来就没个专门做页面的 现在又出新的
5 楼 koda 2009-10-16 09:05
彪哥:就你觉得这个事儿她有意思么?
女警笑
彪哥:那你知道这个什么么?
女警:斧子
彪哥:腰,腰...腰尝(藏)什么.
......

哈哈,博大家一笑吧


4 楼 cheneyjuu 2009-10-16 08:23
有意思么?
3 楼 gakaki 2009-10-15 23:11
苹果公司现在在 浏览器的前列 IE对网景的历史是否会重演
2 楼 lumi 2009-10-15 14:47
搞来搞去觉得很没意思!

html的语法中缺少很多部件,比如tab,tree等,这些东西都是常用的!
1 楼 rubycoo 2009-10-15 13:49
不错,前端各项技术的发展让我们可以在用户体验上做的更多。期待HTML5和CSS3的广泛应用。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 如何通过pynput与日志记录实现键盘、鼠标的监听行为?

    此项功能的实现主要是使用了多线程、键盘/鼠标事件监听,最后通过NLTK语言的处理,从而反向推出电脑的操作记录等信息。业务逻辑并不复杂,我们一起来看看吧! 【阅读全文】 安装相关的第三方库,一是关于监听的处理、二是关于日志的记录模块、三是关于简单的线程处理模块。 1、安装pynput库监控键盘、鼠标事件 2、安装日志处理 将相关的模块导入到代码块中。 # 鼠标键盘监控 from pynput import keyboard, mouse # 日志处理 from loguru import logger

  • 2019.09.21 解决各种问题的一天

    昨天在错误的目录使用svn sw 命令切换分支后,发现问题后cd到正确的目录再切换分支,导致svn出现很多奇怪问题。今天仔细检查发现切换根目录后子目录没切换,手动切换子目录后,更新不到最新文件,删除子目录后也更新不到最新的文件,最终cd到上层接近根目录的一层,备份src文件夹,重新svn up 终于更新到最新文件。 接着编译解决N个无法识别的错误后,然后终于部署出去了,然而,服务器却启动失败,最终...

  • 解决gedit warning问题

    我在使用ubuntu11.04的时候,可能是我本本的问题,出现了N多问题,今天一一将其解决,感慨自己今天人品大爆发。。。 现在先说说解决gedit warning问题: 我在使用gedit打开文件的时候,会提示一堆的警告: (gedit:9778): Gtk-WARNING **: Attempting to store changes into `/root/.local/share/re

  • 消灭编译警告(Warning)

    如何看待编译警告 当编译程序发现程序中某个地方有疑问,可能有问题时就会给出一个警告信息。警告信息可能意味着程序中隐含的大错误,也可能确实没有问题。对于警告的正确处理方式应该是:尽可能地消除之。对于编译程序给出的每个警告都应该仔细分析,看看是否真的有问题。只有那些确实无问题的警告才能放下不管。 说明: 由于编译的警告各种各样,根本不可以一一罗列出来,下面只是列举出比较典型的一些警告,还有一些

  • TortoiseSVN 日常操作指南

    TortoiseSVNA Subversion client for WindowsStefan KüngLübbe OnkenSimon Large2005/01/17 19:09:21二〇〇五年四月 Daan译Table of ContentsChapter 4. 日常操作指南... 44.1. 使用 TortoiseSVN.. 44.2. 认证..

  • css3做的好看的小便签,纯CSS3 便签条折角效果

    CSS语言:CSSSCSS确定html,body {padding: 0;margin: 0;font: 1em/1.4 Cambria, Georgia, sans-serif;color: #333;background: #fff;}header,hgroup {display: block;}a:link,a:visited {border-bottom: 1px solid #...

  • 响应式网格项目动画布局_响应式网格及其实际使用方式:常见的UI布局

    其中突出显示了列和元素 网格使用 (Grid usage) You can clearly see that WeWork is using grids in their designs because everything lines up despite being divided within each row. An easy giveaway is that...

  • firebase vue_使用Vue和Firebase,Pt 2构建Google Keep Clone

    firebase vueIn the previous part we created a simple Google Keep Clone where the notes are layed out nicely by the Masonry library. 在上一部分中,我们创建了一个简单的Google Keep Clone,其中的注释由...

  • shazam 算法_类似于Shazam的变形按钮效果

    为此,我们可以使用纯HTML和CSS在其中设置边框半径,宽度和高度等属性的动画。 但这并不是廉价的动画,它不允许我们使用任何可能的形状,因此我们决定对形状使用SVG并使用Snap.svg对其进行动画处理。 The shapes ...

  • 使用ASP.NET MVC构建笔记SAAS 5

    在本教程中,我将向您展示如何构建软件即服务(SaaS)最低可行产品(MVP)。 为了简单起见,该软件将允许我们的客户保存注释列表。 我将提供三种订阅计划:“基本”计划每位用户最多只能有100个便笺;“专业”...

  • Android解决:View.setTag(key,object)异常:The key must be an application-specific resource id.

    一.简介 setTag可以为控件增加一些附加信息,他是android中很有用的一个方法,setTag有两个方法,1.setTag(Object tag)方法比较简单,只需要放入你要设置的信息即可.2.setTag(int key,Object tag);如果你要添加的不是单独的一种信息,那么就要用第二种方法,第一个参数是key值,在获取对应信息的时候,需要以key来获取,第二参数和第一种一样,之所

  • 每日一题:

    题目描述: 请实现一个函数用来找出字符流中第一个只出现一次的字符。例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g"。当从该字符流中读出前六个字符“google"时,第一个只出现一次的字符是"l"。 代码解析: class Solution: # 返回对应char def __init__(self): self.s='' ...

  • visual studio 2008 快捷键 (Style:Visual C# 2005)(zz.IS2120@BG57IV3)

    //z 2012-11-29 11:24:18 IS2120@BG57IV3.T4196729265.K[T39,L363,R14,V344] Visual Studio Keyboard Shortcuts (排序版) Command Shortcut Build.BuildSolution #0 Global::Ctrl+Shift+B Buil

  • view传递多个传值java.lang.IllegalArgumentException: The key must be an application-specific resource id.

    有时候要利用view的tag进行传值,只需要传一个值时直接使用view.setTag(),如果多个值,就需要使用view.setTag(key,value); key不能直接写入数字,不然会出现一下错误 java.lang.IllegalArgumentException: The key must be an application-specific resource id. 应该在sty...

  • TCL基础教程——(5)TCL中的结构控制

    TCL中的控制结构是通过使用命令来实现的,命令中有循环命令:while,foreach和for。还有条件命令:if和switch。错误处理命令:catch。还有一些控制微调结构的命令,如:break,continue,return和error。一.if then else这个命令的语法为if espression then body1 else body2看这个程序:[pp

  • 这是我用Electron和React创建markdown应用程序的方式

    by Tzahi Vidas 由Tzahi Vidas 这是我用Electron和React创建markdown应用程序的方式 (Here’s how I created a markdown app with ...This article is a step-by-step tutorial on how to create a basic markdow...

  • adobe air 工程师_了解Adobe AIR,第I部分:构建Note存储应用

    adobe air 工程师The Adobe Integrated Runtime (AIR) platform changes the game for web developers, taking standard web technologies such as HTML, CSS, and JavaScript, and bringing them into a desktop ...

  • SitePoint Podcast#51:真正的Web设计师获得它

    凯文(Kevin): 2010年3月5日。新的浏览器更新,包括Web设计人员是否应该精通代码,以及从僵硬的手中撬开IE6。 我是Kevin Yank,这是SitePoint播客#51:真正的Web设计师。 With us today Brad Williams from ...

  • 我们最喜欢的技术:How-To Geek值得感谢的

    Original image by floodllama 原始图片由 Floodllama 洛厄尔·海丁斯(The Lowell Heddings) (Lowell Heddings (The How-To Geek)) I’m the guy behind this web site—if you’ve read an article written by ...

  • neo4j图形算法综合指南_网页设计中色彩使用的综合指南

    如果您可以在现场进行练习(我亲自为阿根廷和欧洲的客户在阿根廷以外的地方工作),那么请他们在便笺上写下每个属性。 然后收集所有便签纸并将其放在白板上。 很快,您将开始注意到模式。 整理并重新整理便签,以便将...

Global site tag (gtag.js) - Google Analytics