阅读更多

7顶
1踩

Web前端

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

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

 

这个演示中,你可以创造一个新的便笺,它会保持到本地的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的广泛应用。

发表评论

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

相关推荐

  • 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. 认证..

  • 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...

  • 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个便笺;“专业”...

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

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

  • Using SystemTap

    Using SystemTapI work at Joyent – a cloud computing company – doing performance analysis of small to large cloud environments. Most of our systems have DTrace: the first widely used impleme...

  • 这是我用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图形算法综合指南_网页设计中色彩使用的综合指南

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

  • angular mvc_Angular MVC-入门

    每个便笺都有一个ID ,一个标题和一个文本 。 在Angular中,模型被编码在所谓的services中 。 ng命令可让您创建新服务。 ng generate service Notes This will create two new files, src/app/notes.service.ts and...

  • 小程序typescript_16天:从概念到实现的TypeScript应用程序

    小程序typescript This screenshot is only a subset of what's been implemented here. On the right are additional links associated with projects and ... 右侧是与项目和任务关联的其他链接: 目录 (Tab...

  • mvc 右下角 弹框_角世界中的MVC

    每个便笺都有一个ID ,一个标题和一个文本 。 在Angular中,模型被编码在所谓的services中 。 ng命令可让您创建新服务。 ng generateservice Notes This will create two new files, src/app/notes.service.ts and ...

Global site tag (gtag.js) - Google Analytics