随笔档案「2012年5月」 - zoho

CSS3 的 calc() 长度计算

摘要：在 CSS3 中引入了一个 calc() 方法，可以对各种长度作四则运算。如果将计算的结果设定为元素的大小，将比每次窗口大小改变时用 JavaScript 来计算方便很多。例如我们需要这样的三栏布局：中间宽度固定为 40px，两边宽度各占其它宽度的一半。用 calc() 方法来处理非常容易和直观（查看效果）：html, body { height: 100%;}#left, #right { width: -moz-calc(50% - 20px); width: -webkit-calc(50% - 20px); width: calc(50% - 20px); float: le... 阅读全文

posted @ 2012-05-28 20:02 zoho 阅读(850) 评论(0) 推荐(0)

CSS 的水平居中和垂直居中

摘要：在 CSS 中，文本的水平居中可以简单地用 text-align: center 来实现。因此，再加上 margin: auto 就可以实现 DIV 元素的水平居中。例如：horizontal center in css Hello World! Hello World! Hello World! Hello World! Hello World!垂直居中稍微麻烦一些，因为 margin-top 和 margin-bottom 为 auto 在大多数情形等同于 0。但我们还是有不少办法的。例如：vertical center in css Hello World! He... 阅读全文

posted @ 2012-05-28 19:38 zoho 阅读(287) 评论(0) 推荐(0)

在浏览器中保存本地文件2

摘要：利用 W3C 草案中的 Blob，我们有了新的方法来保存本地文件。例如（查看效果）：function doSave(value, type) { var blob; if (typeof window.Blob == "function") { blob = new Blob([value], {type: type}); } else { var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlo... 阅读全文

posted @ 2012-05-27 20:20 zoho 阅读(4812) 评论(0) 推荐(1)

在浏览器中打开本地文件2

摘要：在 W3C 草案中的 File API 中，提供了 FileReader 对象。利用 FileReader，不和服务器交互我们也可以在浏览器中打开本地文件，而且这种方法更加优雅。我们来看最简单的例子（查看效果）：<html><body><input type="file" id="openselect"/><textarea id="showresult"></textarea><script>function doOpen(evt) { var files = 阅读全文

posted @ 2012-05-27 19:10 zoho 阅读(2406) 评论(0) 推荐(1)

CSS3 的文字阴影效果

摘要：使用 CSS3 的 text-shadow 属性，可以给网页某元素内的文本添加阴影效果。例如：text-shadow: 2px 2px 1px #afb7cc;其中前两个参数分别表示阴影文本相对于原始文本向右和向下的位移。第 3 个可选参数表示模糊位移，在这个例子中，阴影文本将和向右和向下模糊地移动 1px 后的结果叠加，从而得到稍微模糊的阴影效果。而第 4 个可选参数指明阴影文本的颜色。最后一个参数也可以放在最前面。当然，也可以文本指定多个阴影效果，只需将多个阴影效果用逗号隔开就可以了。例如：text-shadow: -1px 0 black, 0 1px black, 1px 0 blac 阅读全文

posted @ 2012-05-27 17:12 zoho 阅读(323) 评论(0) 推荐(0)

CSS3 的线性渐变背景

摘要：在 CSS3 中有可以使用 linear-gradient 记号得到线性渐变的背景。例如background: linear-gradient(top, #FFFFFF 0%, #E6F3FF 100%);这是最简单的两种颜色之间线性渐变的情形。第1个参数的 top 表示自上而下的渐变，而后面的两个参数表示在刚上边的颜色是#FFFFFF而最下边的颜色是 #E6F3FF。上面所说的是 W3C 标准中的写法。由于现在这个 linear-gradient 记号还不是正式标准，在各个浏览器中都需要加上前缀才能使用它的。例如：/* firefox */background: -moz-linear-gr 阅读全文

posted @ 2012-05-26 21:31 zoho 阅读(337) 评论(0) 推荐(0)

ECMAScript 5 的严格模式

摘要：JavaScript 的设计有一些糟粕，常常带来问题。ECMAScript 作为 JavaScript 的标准化，在 5.0 版本中增加了严格模式（strict mode），试图解决 JavaScript 存在的一些问题。要使用严格模式，可以在文件开始或者函数开始加上这一句代码："use strict";如果这句代码放在文件的开始，将对后面所有的代码启用严格模式，而放在函数内部将只对该函数启用严格模式。我们来看看严格模式有那些限制。1. 变量的声明必需使用 var 关键字。例如：a = 1; // wrongvar a = 1; // right2. 如果函数调用时没有所属阅读全文

posted @ 2012-05-25 21:16 zoho 阅读(227) 评论(0) 推荐(0)

让人迷惑的 this 关键字

摘要：JavaScript 的 this 关键字非常让人迷惑。实际上，对于一个函数，如果它是某个对象的方法，在该函数内部 this 就指向这个对象，否则 this 指向 window 对象。具体情形我们在下面一一列举出来。注意 this 的指向和函数的作用域没有必然联系，例如见下面的第 4 种情形。（1）如果不在任何函数内部的话，this 指代的是 window 对象。例如：var x = 1;alert(this.x) // 1（2）如果在某个函数内部，this 指代该函数执行时所属的对象。例如：var x = 1;function a() { alert(this.x);}a(); // 1.. 阅读全文

posted @ 2012-05-10 17:40 zoho 阅读(344) 评论(0) 推荐(0)

网页设计学习笔记

05 2012 档案