Play Google 玩转谷歌,Karry的技术博客

国产JS框架--Como JS 1.0 正式发布

vinehoo@gmail.com (karry) — Wed, 23 Dec 2009 10:31:41 +0800

综合了多个框架的优势，希望能给各位开发人员带来更大的方便。

由于框架刚发布，会存在很多不足之处，我们会在后续不断推出新的版本，也希望大家有任何意见或建议与我们联系。

Email/Gtalk/MSN: KevinComo@gmail.com

Como 是一款代码简易而功能强大的Javascript框架，这也是开发者在工作过程中的经验总结，实用性强；通过它，能够简化Javascript代码开发，增强代码重用性，能够异步按需加载js和css文件，增强page的加载速度；

Como完全兼容市场目前的主流浏览器：Internet Explorer6+, Firefox 2, Safari 2+, Chrome, Opera 9+, 及其他基于IE内核的浏览器如Maxthon、360、Sogou等

待Como完善成一套框架体系后，我们将提供出一套基于BSD协议的开源方案，供大家学习和分享。我们也将逐步推出一些扩展组件，比如编辑器等。

继续阅读《国产JS框架--Como JS 1.0 正式发布》的全文内容...

递归练习,做个奥数题 (2009-10-28 16:24:29)

javascript中的memoization(memoizing) 技术介绍 (2009-8-5 19:22:19)

javascript链式调用的设计 (2009-7-29 22:19:31)

onbeforeunload与a标签在IE中的冲突 (2009-7-25 14:57:51)

基于jQuery UI的图片截取(圈人)功能 (2009-7-21 15:0:11)

递归练习,做个奥数题

vinehoo@gmail.com (karry) — Wed, 28 Oct 2009 16:24:29 +0800

今天有个朋友问我一个小学生的奥数题，酒1元钱1瓶，2个空瓶子可以换一瓶酒，问20块钱可以喝多少瓶酒。我OUT了，我被鄙视了。

我不会，但是谁让我是写代码的呢，写了个小程序用来鄙视他。告诉他，我不仅知道20块能买多少酒，你就是20000块我也能算出来。

点击查看

继续阅读《递归练习,做个奥数题》的全文内容...

国产JS框架--Como JS 1.0 正式发布 (2009-12-23 10:31:41)

javascript中的memoization(memoizing) 技术介绍 (2009-8-5 19:22:19)

javascript链式调用的设计 (2009-7-29 22:19:31)

onbeforeunload与a标签在IE中的冲突 (2009-7-25 14:57:51)

基于jQuery UI的图片截取(圈人)功能 (2009-7-21 15:0:11)

收藏：图片格式详解

vinehoo@gmail.com (karry) — Wed, 16 Sep 2009 11:25:36 +0800

Gif格式图片的特点:

透明性

Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha 透明）。

动画

Gif这种格式支持动画。

无损耗性

Gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。

水平扫描

Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

间隔渐进显示

Gif支持可选择性的间隔渐进显示

由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。

Jpeg

透明性

它并不支持透明。

动画

它也不支持动画。

损耗性

除了一些比如说旋转（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。

隔行渐进显示

它支持隔行渐进显示（但是ie浏览器并不支持这个属性，但是ie会在整个图像信息完全到达的时候显示）。

由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。

Png

类型

Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg

透明性

Png是完全支持alpha透明的(透明，半透明，不透明)，尽管有两个怪异的现象在ie6(下面详细讨论)

动画

它不支持动画

无损耗性

png是一种无损耗的图像格式，这也意味着你可以对png图片做任何操作也不会使得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式

水平扫描

像GIF一样，png也是水平扫描的，这样意味着水平重复颜色比垂直重复颜色的图片更小

间隔渐进显示

它支持间隔渐进显示，但是会造成图片大小变得更大

更多关于PNG

PNG8

256色PNG的别名

PNG24

全色PNG的别名

PNG32

全色PNG的别名

其它图片格式与PNG比较

众所周知GIF适合图形，JPEG适合照片，PNG系列两种都适合。

相比GIF

PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，你都应该用PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。

相比JPEG

JPEG比全色PNG具有更加好的压缩，因此也使得JPEG适合照片，但是编辑JPEG过程中容易造成质量的损失，所以全色PNG适合作为编辑JPEG的过渡格式.

Png8的在ie中的怪异表现:

1.半透明的png8在ie6以下的浏览器显示为全透明。

2.Alpha透明的全色PNG(png32）在ie6中会出现背景颜色(通常是灰色)。

由上面可以总结:

(a)全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不需要特殊对待，因为在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的加强版。

(b)第二个bug没有什么好的方法解决，只能通过影响性能的方法AlphaImageLoader与需要加特殊标签（VML）。

因此得出结论就是:请使用PNG8。

Png8的软件问题

1.Photoshop只能导出布尔透明的PNG8。

2.Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.

3.pngquant与pngnq这两个命令行软件可以转换全色png为256色的png8。

继续阅读《收藏：图片格式详解》的全文内容...

找不到相关文章，请发表流言

Python学习笔记(2)

vinehoo@gmail.com (karry) — Fri, 04 Sep 2009 18:01:02 +0800

Python中没有 switch case语句，只有if elif else
字符串、数字、元组是不可变的，改变其值会创建新的对象（这也是为什么大量字符串的拼接会导致效率降低的原因）
字符串模版（直觉是这个功能做WEB的时候很有用，可以轻易的实现根据模版生成静态页面的功能）：
from string import Template
s = Template("There are ${test}")
print s.substitute(test="python") ==>输出 There are python
substitute中参数如果没有对应声明字符串模版中的
Template 对象还有另外一个方法save_substitute(),该方法在没有声明key的情况下不会报错，直接输出
浅拷贝与深拷贝。
在拷贝一个列表时，有两种拷贝方式。浅拷贝，就是新创建了一个类型跟原类型一样，其内容是原来对象的引用，也就是说这个拷贝本身是新的，但是它的内容不是。而深拷贝则是建了一个与原对象独立的，但值一模一样的新对象。
如何实现浅拷贝？
通常有三种方式，(1)完全的切片操作[:](2)利用工厂函数，比如list(),dict()等。(3)使用copy模块的copy函数。
a 前拷贝的示例：

person = ["name",['male',19]]
girl = person[:] # 将人这个列表浅拷贝到girl
boy = person[:] # 将人这个列表浅拷贝到boy
gilr[0] = "lily" #修改名字
gril[1][0] = "female"
boy[0] = “john”
boy[1][0]="male"
boy[1][1]=22
例认为打印出girl 和boy结果是什么？
boy ====> ["johu",['male',22]]
girl ====> ["lily",['male',22]]
为什么名字相互之间没有影响，而性别和年龄之间有影响呢？这是因为该列表中的第一个元素是一个字符串，是一个不可变的对象，一旦对其修改，就会独立生成一个新的对象。因此当拷贝的时候，字符串被显示的拷贝了，而列表只是拷贝了一个引用。
那么，如何实现深拷贝？
在copy模块，有一个deepcopy()方法，可以轻松实现深拷贝。

继续阅读《Python学习笔记(2)》的全文内容...

Python学习笔记(1) (2009-8-28 16:56:30)

Python学习笔记(1)

vinehoo@gmail.com (karry) — Fri, 28 Aug 2009 16:56:30 +0800

由于公司的服务器端用的是Python，所以决定抽点时间熟悉一下，也好在以后的工作中能和其他同事有比较好的配合。

我主要是把Python和其他语言(特别是Javascript和c#,因为我熟悉)一些不一样的特性列出来。

首先说一下对Python的大体印象,Python和Javascript一样是解释性的语言，也是~~弱类型的语言~~。同时也是面向对象的一种语言，一切皆是对象：甚至字符串，变量，函数，都是对象。Python的设计也非常酷，用起来很灵活，习惯使用Javascript的人，一定会爱上Python

没有大括号，靠缩进来控制代码块的开始与结束。语句结束不用分号，但一行中有多个语句，用分号隔开。
// 运算符和 ** 运算符
//特殊的除法运算（千万别以为是注释代码的，Python的代码注释用#），运算符对整型和浮点型都会取整。如：2.0//3.0=0 **是就幂，如：2**3 表示2的3次方。
不等号有两种写法！= 和<>
逻辑操作符的关键字是 and or not
三引号(三个连续的单引号或者双引号)中的特殊字符自动转义
Python中没有数组，只有列表，但其特性跟js中的数组一样，也就是长度可变的数组。
列表可以用引号（：）来获取元素
如：a = [0,1,2,3] a[1:4] =[1,2,3] a[:3]=[0,1,2] a[1:] = [1,2,3]
for 循环就相当于c#中的foreach ,有一个range函数来提供索引.

#遍历数组
a = [1,2,3]
for(item in a):
print item
#另外一个例子
for eachNum in range(3)
print eachNum
这里 range(obj1,obj2)为内建函数。obj1不提供默认为0，obj2不提供默认为1，返回一个从obj1到obj2的数组
可以多元赋值
x,y= 1,2 等价于 x=1 y=2 x,y = y,x 交换x和y的值（很好很强大，哈哈）
布尔值为False的对象有
None(相当于js中的null)，False,所有值为0的数,空字符串''(注：'0'为True),空元组（）,空列表[],空字典{}
多个比较操作符可以在同一行中进行
3<4<5 等同于（3<4 and 4<5)
用 is 来判断两个变量是否指向同一个对象。
a is b 等同于id(a) is id(b) id()是获取对象的内存编号。但是要注意的是 Python为了提高性能会对整型和字符串类型进行缓存。但对浮点型不会。
例如 a =2 ;b = 2; a is b 返回True，a=2.0;b=2.0 a is b 返回False
逻辑操作符的优先级 not 高于 and 高于 or
几个标准内建函数
type(obj) 获取obj的类型，类似Javascript中的type of
str(obj) 将obj 转换为字符串类型
repr(obj)是奖obj 序列化，转换为字符串，但是可以通过eval()还原，所以obj == eval(repr(obj))
与Javascript一样，Python 不支持方法和函数的重载（弱类型语言的特点）
字符串和列表、元组统称为序列，可以进行 in 、not in、+、*操作
obj in seq 判断obj 元素是否包含在seq中，在返回True，不在返回False
+ 操作符可以把两个序列连接起来。 [1,2,3] +[4,5,6] == [1,2,3,4,5,6]
* 操作符把一个序列拷贝多分。 [1,2]* 2 == [1,2,1,2]
列表的下标可以是负数，负数标识从结束点往左找。
[1,2,3][-2]==2

今天先到这里，未完待续

12/29 更正:感谢butterinsect ，我确实没有弄清楚，python是强类型的语言，确切的说是，python是隐式类型的强类型语言。也就是说，在声明变量的时候，不需要显式说明它的类型，但是在Python里，是有明确的类型的概念，而且不同类型的对象不能相互替代和操作，比如：

>>> 10 + '20'

会出现错误 TypeError: unsupported operand type(s) for +: 'int' and 'str'

继续阅读《Python学习笔记(1)》的全文内容...

Python学习笔记(2) (2009-9-4 18:1:2)

收藏：淘宝DPL-Design Pattern Library

vinehoo@gmail.com (karry) — Tue, 25 Aug 2009 16:42:00 +0800

Taobao DPL

Basic Specification & Usage Guide

Basic Style Platform

Taobao Common Styles

Taobao Common Icons

Modules

页头和页尾过渡版本v2 简头v2
反馈页面
旺旺点灯
日历
弹出框
卡盘
排行榜
标签云
自动完成
协议
搜索
级联列表
就地编辑
...

Misc

2008年Icons年终汇报

继续阅读《收藏：淘宝DPL-Design Pattern Library》的全文内容...

初识DPL（Design Pattern Library） (2009-3-25 21:24:3)

三栏布局，左右固定宽度，中间自适应的一种解决方案

vinehoo@gmail.com (karry) — Tue, 18 Aug 2009 13:42:28 +0800

如图所示，三栏布局中，左右固定宽度，中间自适应有很多总解决方法，之前也看过一篇文章In Search of the Holy Grail ，不过，就我个人而言，跟喜欢通过margin的负值来达到这种效果。

核心CSS代码：

#content{background:#ff6;}
#left,#right{width:200px;background:#fc0;float:left;}
#middle{float:left; width:100%;margin:0 -200px;}
#middle .inner{margin:0 200px;background:#ccc;}
#right{float:right;}

DOM 结构：

点击查看示例

继续阅读《三栏布局，左右固定宽度，中间自适应的一种解决方案》的全文内容...

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks (2009-8-10 10:47:28)

让IE6瞬间崩溃的5种方式 (2009-6-22 10:39:33)

【收藏】CSS技巧教程资源大全 (2009-6-17 13:29:55)

【收藏】字体、排版简明入门 (2009-4-1 10:58:52)

WebKit私有属性介绍 (2009-3-13 21:32:5)

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

vinehoo@gmail.com (karry) — Mon, 10 Aug 2009 10:47:28 +0800

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks：

.test{
   color:/*\**/#00f\9; /* IE8 */
}
.test,
.test:-moz-any-link{
   color:#f60; /* Firefox2 */
}
.test,
.test:default{
   color:#000; /* Firefox3 */
   *color:#f00; /* IE7 */
   _color:#0f0; /* IE6 */
}

可同时区分IE8、IE7、IE6、Firefox的CSS hacks：

.test{
   color:#000; /* Firefox */
   color:/*\**/#00f\9; /* IE8 */
   *color:#f00; /* IE7 */
   _color:#0f0; /* IE6 */
}

关于IE8的hacks：

.test{
color:/*\**/#00f\9; /* IE8 only */
color:#00f\9; /* 适用于所有IE版本 */
}

继续阅读《可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks》的全文内容...

三栏布局，左右固定宽度，中间自适应的一种解决方案 (2009-8-18 13:42:28)

让IE6瞬间崩溃的5种方式 (2009-6-22 10:39:33)

【收藏】CSS技巧教程资源大全 (2009-6-17 13:29:55)

【收藏】字体、排版简明入门 (2009-4-1 10:58:52)

WebKit私有属性介绍 (2009-3-13 21:32:5)

javascript中的memoization(memoizing) 技术介绍

vinehoo@gmail.com (karry) — Wed, 05 Aug 2009 19:22:19 +0800

最近在读《JavaScript 设计模式》一书，其中工厂模式中提到了memoizing技术，今天仔细整理了一下memoization 相关的资料，与大家共享。

Memoization的定义：

memoization 一词是Donald Michie 根据拉丁语memorandum杜撰的一个词。相应的动词、过去分词、ing形式有memoiz、memoized、memoizing.

Memoization 是一种将函数返回值缓存起来的方法，Memoization 原理非常简单，就是把函数的每次执行结果都放入一个键值对(数组也可以，视情况而定)中，在接下来的执行中，在键值对中查找是否已经有相应执行过的值，如果有，直接返回该值，没有才真正执行函数体的求值部分。很明显，找值，尤其是在键值对中找值，比执行函数快多了。现代 JavaScript 的开发也已经大量使用这种技术。

一个简单的使用memoization的例子

我们知道，在不同的浏览器中，xmlHttpRequest对象的具体实现都不同。需要判断何种浏览器以执行具体的方法。这里就有一个使用memoization来实现的例子。

function createXHRObject = function(){
//先把三个匿名函数缓存起来。
var methods = [
function(){return new XMLHttpRequest();},
function(){return new ActiveXObject("Msxml2.XMLHTTP");},
function(){return new ActiveXObject("Microsoft.XMLHTTP");}
];
for(var i=0,len=methods.length;i
try{//这里用try catch来代替了条件判断，通常我不赞成这种写法
methods[i]();
}
catch(e){
continue;//如果报异常，则执行下一次循环
}
// 把createXHRObject 与能正常执行的匿名函数对应起来，再调用createXHRObject不用再检测浏览器了
createXHRObject = method[i];
return method[i];
}
}

以上是一个简单的例子，第一次执行createXHRObject（）的时候，会循环判断methods 中的方法，获取一个能正确执行的，并将createXHRObject的引用指向这个方法。以后再使用这个方法的时候，不用去判断，直接自动获取正确的方法。这省去了频繁的ajax调用中浏览器的检测。

当然，这个方法看上去效率的提升不是特别明显，我之所以写上来，是因为能比较清晰的理解memoization是如何实现的。在递归调用的时候，memoization的威力才能更好的显现。

一个递归的例子：

function fib(n) {
if (n < 2) {
return n;
}
return fib(n - 1) + fib(n - 2);
}

这是一个经典的斐波纳契序列，fib(20) 会把fib这个方法执行21891次，如果是fib(40),这会执行331160281次。

再看看如何使用memoization来实现，由于fib的参数就是一个自然数，这里用一个数组来缓存fib函数执行的结果。数组的下标用来标识参数，该小标对应的值用来表示函数执行的结果。

var iterMemoFib = (function() {
var cache = [1, 1];
var fib = function(n) {
if (n >= cache.length) {
//将一个递归转换成了一个遍历
for (var i = cache.length; i <= n; i++) {
cache[i] = cache[i - 2] + cache[i - 1];
}
}
return cache[n-1];
}
return fib;
})();

将Function的原型扩展memoize 和unmemoize 方法，这样你可以对任何函数实现memoize和解除memoize,当然，这个方法要慎重，对一些不是频繁执行的函数，没必要缓存：

Function.prototype.memoize = function() {
var pad = {};
var self = this;
var obj = arguments.length > 0 ? arguments[i] : null;
var memoizedFn = function() {
// 把参数作为数组保存，作为键，把函数执行的结果作为值缓存起来
var args = [];
for (var i = 0; i < arguments.length; i++) {
args[i] = arguments[i];
}
if (!(args in pad)) {
pad[args] = self.apply(obj, arguments);
}
return pad[args];
}
memoizedFn.unmemoize = function() {
return self;
}
return memoizedFn;
}
Function.prototype.unmemoize = function() {
alert("Attempt to unmemoize an unmemoized function.");
return null;
}

使用方法：

fib.memoize();

参考文档：

继续阅读《javascript中的memoization(memoizing) 技术介绍》的全文内容...

国产JS框架--Como JS 1.0 正式发布 (2009-12-23 10:31:41)

递归练习,做个奥数题 (2009-10-28 16:24:29)

javascript链式调用的设计 (2009-7-29 22:19:31)

onbeforeunload与a标签在IE中的冲突 (2009-7-25 14:57:51)

基于jQuery UI的图片截取(圈人)功能 (2009-7-21 15:0:11)

ASP.NET中如何防SQL注入

vinehoo@gmail.com (karry) — Wed, 05 Aug 2009 10:50:28 +0800

防SQL 注入是一个系统工程,在项目开发中就要系统的考虑SQL 注入的问题。一般做到以下4点，能比较好的控制SQL 注入：

严格验证用户的一切输入，包括URL参数。
将用户登录名称、密码等数据加密保存
不要用拼接字符串的方式来生成SQL语句，而是用SQL Parameters 传参数或者用存储过程来查询
严格验证上传文件的后缀，exe、aspx、asp等可执行程序禁止上传。

这里介绍一个简单通用的方法，用来验证字符串中是否有敏感字符，参数可以是一个字符串，也可以是一个字符串集合，敏感字符可以在Lawlesses数组中定义：

public static string[] Lawlesses = { "=", "'" };
///
/// 敏感字符检测
///
///
///
public static bool CheckParams(params object[] args)
{
if (Lawlesses == null || Lawlesses.Length <= 0) return true;
//构造正则表达式,例:Lawlesses是=号和'号,则正则表达式为 .*[=}'].*
//另外,由于我是想做通用而且容易修改的函数,所以多了一步由字符数组到正则表达式,实际使用中,直接写正则表达式亦可;
string str_Regex = ".*[";
for (int i = 0; i < Lawlesses.Length - 1; i++)
{
str_Regex += Lawlesses[i] + "|";
}
str_Regex += Lawlesses[Lawlesses.Length - 1] + "].*";
//
foreach (object arg in args)
{
if (arg is string)//如果是字符串,直接检查
{
if (Regex.Matches(arg.ToString(), str_Regex).Count > 0)
return false;
}
else if (arg is ICollection)//如果是一个集合,则检查集合内元素是否字符串,是字符串,就进行检查
{
foreach (object obj in (ICollection)arg)
{
if (obj is string)
{
if (Regex.Matches(obj.ToString(), str_Regex).Count > 0)
return false;
}
}
}
}
return true;
}

参考文档：http://msdn.microsoft.com/zh-cn/library/ms998271(en-us).aspx

继续阅读《ASP.NET中如何防SQL注入》的全文内容...

ASP.NET 缓存技术 (2008-7-12 8:43:57)

javascript链式调用的设计

vinehoo@gmail.com (karry) — Wed, 29 Jul 2009 22:19:31 +0800

用过jQuery的朋友一定对jQuery中方法的链式调用印象深刻，最近发布的YUI3也支持了方法的链式调用。这是一个非常不错的语法特性，能让代码更加简洁、易读。很多时候链式调用可以避免多次重复使用一个对象变量，从而减少代码，而js是一种客户端执行的脚本语言，减少代码就减少了js文件的大小，减少了服务器的压力。链式调用这么多优点，它是如何实现的呢？这篇文章就是想探讨一下这个问题。

链式调用例子如：$("p").append("test").fadeIn("fast");

看一段jQuery的源码：

append: function() {
        return this.domManip(arguments, true, function(elem){
            if (this.nodeType == 1)
                this.appendChild( elem );
        });
    }

以上是jQuery中append方法的实现。append方法是向每个匹配的元素内部追加内容的方法，很明显，属于赋值操作，但是却有返回值，返回的是当前操作的dom(通常返回this指针)。这是链式调用的关键，你会发现这不过是个语法小技巧而已。

很明显，在赋值器方法中(或者本身没有返回值的方法中)很容易实现链式调用，而取值器相对来说不好实现链式调用，因为你需要取值器返回你需要的数据而不是this指针(当然，如果你坚持要实现链式方法，也可以用回调函数来实现)。

设计一个简单的支持链式调用的类：

使用方式：

var dog = new Dog();
dog.setName("旺财").setColor("白色").yelp();

取值器你也想支持链式调用？
那就用回调函数来实现，将本来应该返回的值直接传给回调函数，而return仍然返回this指针。接着上面的Dog类写一个方法：

Dog.prototype.getName(callback){
callback.call(this,this.name);
return this;
}

使用方式：

function showName(name){
alert(name);
}
dog.setName("旺财").getName(showName).setColor("白色");

继续阅读《javascript链式调用的设计》的全文内容...

国产JS框架--Como JS 1.0 正式发布 (2009-12-23 10:31:41)

递归练习,做个奥数题 (2009-10-28 16:24:29)

javascript中的memoization(memoizing) 技术介绍 (2009-8-5 19:22:19)

onbeforeunload与a标签在IE中的冲突 (2009-7-25 14:57:51)

基于jQuery UI的图片截取(圈人)功能 (2009-7-21 15:0:11)

MSSQL2005 孤立用户的解决方法

vinehoo@gmail.com (karry) — Wed, 29 Jul 2009 15:08:47 +0800

Vinehoo.com近日经常遭到攻击，好几次数据库挂马，前几天把论坛升级了，今天又升级了数据库，把之前的MSSQL 2000 升级到MSSQL 2005，用的是数据库还原功能还原的,遇到了这个帐号孤立的问题。

什么是孤立用户的问题？

比如，以前的数据库的很多表是用户test建立的，但是当我们恢复数据库后，test用户此时就成了孤立用户，没有与之对应的登陆用户名，哪怕你建立了一个test登录用户名，而且是以前的用户密码，用该用户登录后同样没办法操作以前属于test的用户表。

Google 了一下，有很多解决方案，不过很多方案没办法实现，因为MSSQL 2005的权限的关系。这里介绍一个经过我验证的解决方法：

我们在建立了同样名称的数据库登录用户后，数据库中的表我们照样不能使用时因为sid的不同，就是系统登录表和数据库用户表中的用户名相同，单是sid字段，数据库中的还是以前旧系统的sid值，所以我们就要把它对应成我们新建的，数据库靠sid来识别用户。

这里可以使用存储过程sp_change_users_login。它有三种动作，分别是report，update_one和auto_fix。运行下面的代码，系统会列出当前数据库的孤立用户数。sp_change_users_login 'report'我们只需要选择当前数据库为testdb，然后运行

sp_change_users_login 'update_one','test','test'

系统就会提示修复了一个孤立用户。如果没有建立test的登录用户，还可以用

sp_change_users_login 'Auto_Fix', 'test', NULL, 'testpassword'

来创建一个登录用户名为test，密码为testpassword的用户与之对应。通常情况下，数据库对象得到访问问题已经解决了。如果有多个数据库中有同一个用户的数据表，只需要选择不同的数据库，执行update_one的那个就行了。

继续阅读《MSSQL2005 孤立用户的解决方法》的全文内容...

牢记！SQL Server数据库开发的二十一条军规 (2008-8-25 10:4:33)

onbeforeunload与a标签在IE中的冲突

vinehoo@gmail.com (karry) — Sat, 25 Jul 2009 14:57:51 +0800

onbeforeunload 是window的一个事件，用来提示用户是否真的要离开该页面，通常在一些比较重要的数据提交之前，防止用户误操作导致数据丢失。典型的应用如gmail中，在写邮件的时候，如果刷新页面或者关闭页面，会出现提示：

今天在项目中发现在IE中点击一些按钮ajax时，在IE中，也会出现这个框，百思不得其解。开始以为是IE中的ajax操作会触发这个事件，后来逐一排查，发现是由于那些按钮是用标签实现的，虽然在href里面写的是“javascript:void(0)”,但还是会触发onbeforeunload事件，以后用a标签做按钮的时候要注意了，避免出现这种冲突。

点击测试：onbeforeunload-test.html

继续阅读《onbeforeunload与a标签在IE中的冲突》的全文内容...

国产JS框架--Como JS 1.0 正式发布 (2009-12-23 10:31:41)

递归练习,做个奥数题 (2009-10-28 16:24:29)

javascript中的memoization(memoizing) 技术介绍 (2009-8-5 19:22:19)

javascript链式调用的设计 (2009-7-29 22:19:31)

基于jQuery UI的图片截取(圈人)功能 (2009-7-21 15:0:11)

基于jQuery UI的图片截取(圈人)功能

vinehoo@gmail.com (karry) — Tue, 21 Jul 2009 15:00:11 +0800

现在的SNS网站相册都拥有圈人的功能，也就是在图片上指定的地方画一个框，然后指定该框里是谁。这和裁剪图片的原理是一样的。也就是拖拽功能和resize功能合理的配合。由于jQuery UI 里这两个功能都有比较好的实现，而且效率很不错，所以，我就用jQuery UI 整合实现了一个。

1.准备工作

该功能既然基于jQuery UI 功能，当然需要引入相关的js组件。在这里使用的是jQuery-1.3.3 、jQuery UI 1.7.1中的ui.core.js、ui.dragdrop.js、ui.resize.js

2.DOM结构与样式的编写

上图所示，虚线框和8个小的拖拽按钮如何实现？我采用的是绝对定位的方式。虚线由于有一点动画效果，我用一个小的gif图片来实现的，这里要注意的是，由于使用的是jQuery UI 的组件来实现，在resize 组件中，resize拖拽的按钮的DOM结构已经固定写在了JS里面，所以，只能在依照其规则来写。具体的DOM结构如下：

其中，标签表示的是四条虚线。后面的8个div表示的是8个拖拽按钮。全部采用绝对定位，这样在改变大小了之后，能够确保样式正确。其中

标签是为了解决IE里面绝对bottom无法正常显示加的hack。

另外，由于拖拽和resize都要求不能超过图片的范围，所以，我将图片和marker标签使用的DOM放在同一个父容器下，父容器的高度和宽度根据图片的大小自动适应，所以，父容器要采用浮动定位或者绝对定位，具体需要考虑整体的需求。另外，Dom是JS生成的。

测试 DOM 结构

3.js的编写

js我还是按照以往的风格，写成了一个类以方便调用和扩展。其中关键的是jQuery UI 中的两个组件（drag、resize）的调用，的代码如下：

其中containment:"parent",是为了控制其多拽范围。也就是只能在父容器中拖拽。 handles:"n,e,s,w,se,sw,ne,nw"是对其拖拽方向的控制，这里表示可以在8个方向上任意拖拽。我写了4个回调函数：drag,resize,dragStop, resizeStrop分别在拖拽中、大小缩放时、拖拽结束时、大小缩放结束时调用。通常可以用来实时获取当前截取框的位置。

我有一个公开的方法：getPosition() 获取当前位置。获取是一个对象，分别是左上角点的坐标和右下角点的坐标。

测试完整功能

我只写了前端部分的代码，如果要完成圈人或者截图的功能，是需要后台来支持的。前台把当前框选的位置和大小传给后台，后台再来处理剩下的事。

继续阅读《基于jQuery UI的图片截取(圈人)功能》的全文内容...

国产JS框架--Como JS 1.0 正式发布 (2009-12-23 10:31:41)

递归练习,做个奥数题 (2009-10-28 16:24:29)

javascript中的memoization(memoizing) 技术介绍 (2009-8-5 19:22:19)

javascript链式调用的设计 (2009-7-29 22:19:31)

onbeforeunload与a标签在IE中的冲突 (2009-7-25 14:57:51)

整理：详解javascript function中的caller,callee,call,apply

vinehoo@gmail.com (karry) — Sat, 04 Jul 2009 11:41:33 +0800

caller

返回一个对函数的引用，该函数调用了当前函数。也就是说，返回的是调用该函数的函数。
functionName.caller
functionName 对象是所执行函数的名称。

说明
对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。值得注意的一点是，事件的触发总是带着一个匿名的函数。

点击查看--caller测试示例

callee

返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文,他是arguments对象的一个属性。[function.]arguments.callee，可选项 function 参数是当前正在执行的 Function 对象的名称。

说明
callee 属性的初始值就是正被执行的 Function 对象。

callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时候用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

点击查看--callee测试示例

apply and call
它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别：
apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);
即所有函数内部的this指针都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的

apply的说明
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisArg任何一个参数，那么 Global 对象将被用作 thisArg，并且无法被传递任何参数。

call的说明
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg指定的新对象。如果没有提供 thisArg参数，那么 Global 对象被用作 thisArg

相关技巧：
应用call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的
函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为“继承”。

点击查看--call 和 apply 测试示例

继续阅读《整理：详解javascript function中的caller,callee,call,apply》的全文内容...

国产JS框架--Como JS 1.0 正式发布 (2009-12-23 10:31:41)

递归练习,做个奥数题 (2009-10-28 16:24:29)

javascript中的memoization(memoizing) 技术介绍 (2009-8-5 19:22:19)

javascript链式调用的设计 (2009-7-29 22:19:31)

onbeforeunload与a标签在IE中的冲突 (2009-7-25 14:57:51)

让IE6瞬间崩溃的5种方式

vinehoo@gmail.com (karry) — Mon, 22 Jun 2009 10:39:33 +0800

经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章，我整理整理发上来，以后开发的时候要注意了。

鉴于国内IE6的市场份额还在主流的情况，一定要避免出现以下情况。

IE6真脆弱啊

1.设置scrollbar-base-color，css里给table做了定位，再通过js改变其定位IE6就崩溃了。

关键代码：

用IE6点击测试：ie6崩溃测试一

2.document.write

在FF和Chrome中，都会打印出“prototype”字符，在IE6中立即崩溃。

用IE6点击测试：ie6崩溃测试二

3.在CSS中使用通配符*,在HTML的table标签中直接放置内容（而不是标签之类）

aaabbbccc

用IE6点击测试：ie6崩溃测试三

4.CSS中出现@+任意字符+/* 立即崩溃

用IE6点击测试：ie6崩溃测试四

5.onload="window()"

用IE6点击测试：ie6崩溃测试五

原文网址：http://www.catswhocode.com/blog/6-html-and-javascript-codes-to-crash-ie6

注：原文中有6个导致崩溃的问题，我装的是IETester,有一个没有测出来。所以没写上来。

继续阅读《让IE6瞬间崩溃的5种方式》的全文内容...

三栏布局，左右固定宽度，中间自适应的一种解决方案 (2009-8-18 13:42:28)

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks (2009-8-10 10:47:28)

【收藏】CSS技巧教程资源大全 (2009-6-17 13:29:55)

【收藏】字体、排版简明入门 (2009-4-1 10:58:52)

WebKit私有属性介绍 (2009-3-13 21:32:5)

jQuery的不足之处

vinehoo@gmail.com (karry) — Sat, 20 Jun 2009 20:54:04 +0800

使用Jquery一年多了，对Jquery轻便、易学易用、方便的DOM操作以及这个框架的设计思想都由衷的赞叹。但是Jquery在设计过程中也有一些不合理的地方（当然，有些东西见仁见智，可能你并不觉得这不合理），今天看到了一篇文章，觉得写的挺有道理的，我做了一下整理。并不是说Jquery很差，让大家不要用，而是通过这些内容来更好的了解和使用jQuery。

1.each工具的回调函数参数的设计。

jQuery.each(obj,callback)

通用遍历方法，可用于遍历对象和数组。

不同于遍历 jQuery 对象的 $().each() 方法，此方法可用于遍历任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

很明显，这个参数的设计不合理。应该将参数的顺序对调。原因很简单，通常做遍历的时候，我们只需要获取当前对应的变量或内容就可以了，大多数情况下是不需要索引的。如果索引参数在后面，在不使用的情况下就可以省略。也许你觉得我在鸡蛋里面挑骨头,你看看jQuery的另外一个工具的设计就清楚了：

jQuery.grep(array,callback,[invert])

这个工具是对对象和数组做遍历用的，但是这个工具的callback函数的两个参数中第一个为对应变量或内容，第二个为对象的成员或数组的索引。正好与jQuery.each相反。

2.this指针的变换

在jQuery中this指针的变换是非常频繁的，可能稍不留神，就会出错。特别是在OO编程的时候。例如：

function Dog(){
this.name="旺财";
}

Dog.prototype.eat=function(){
        $("div").click(function(){
                  alert(this.name+"在啃骨头");
         });
};

你会发现这段代码并不会像你想象的那样执行，因为this指针已经变换，指代的是当前的div对象，而不是Dog的实例。

3.jquery.inArray(value,array)工具的设计

就字面意思来说，这个函数应该返回true or false,事实上返回的是value在array第一次出现的位置。若不存在，返回-1。若你当作true或false来处理，就郁闷了，-1是true。

4.对OO的支持不够

jquery的DOM操作的支持很好很强大，但在OO方面却没有做任何工作。而且，就jQuery的编码风格也和OO有点格格不入。而其他框架如prototype,MooTools都有比较好的支持。

参考文章网址：http://blog.thinkrelevance.com/2009/1/12/why-i-still-prefer-prototype-to-jquery

继续阅读《jQuery的不足之处》的全文内容...

国产JS框架--Como JS 1.0 正式发布 (2009-12-23 10:31:41)

递归练习,做个奥数题 (2009-10-28 16:24:29)

javascript中的memoization(memoizing) 技术介绍 (2009-8-5 19:22:19)

javascript链式调用的设计 (2009-7-29 22:19:31)

onbeforeunload与a标签在IE中的冲突 (2009-7-25 14:57:51)

【收藏】详解CSS的优先权

vinehoo@gmail.com (karry) — Fri, 19 Jun 2009 10:47:54 +0800

转自：怿飞

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

元素的 style 样式属性，加 1,0,0,0。
每个 ID 选择符（#id），加 0,1,0,0。
每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
其他选择符（例全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

!important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
如果优先权一样，则按源码中“后来者居上”的原则。
由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例全局选择符 * ）。

范例分析：

h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ，后者胜出*/

h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素，结果是 0,0,0,1 */
/*0,0,1,1 大于 0,0,0,1 ，前者胜出*/

html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
/*0,0,1,7 小于 0,1,0,1，后者胜出*/

节选 old9 的《CSS的优先权》（无法穿越 GFW）

继续阅读《【收藏】详解CSS的优先权》的全文内容...

找不到相关文章，请发表流言

【收藏】CSS技巧教程资源大全

vinehoo@gmail.com (karry) — Wed, 17 Jun 2009 13:29:55 +0800

一，Web 标准

要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是个啥玩意儿)。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及XHTML或其它代码，跟你能做出什么质量的网页有很大的关系。

其实我自己对Web标准也不甚了解，尽管我看过不少关于Web标准的文章和书。(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到Web标准，我头里就会有一堆问号:

Web标准真的有利于SEO吗？ Web标准的动机难道就是SEO? 出于SEO动机的Web标准是否会失去一些Web标准真正的本质?
如何才算符合Web标准? 仅仅是通过W3C的代码验证，你就觉得自己符合Web标准了?
Web标准是为了提升用户体验，而一个对用户友好的网站其代码应该写得非常简洁实用，而一个使用简洁实用代码的网站是有利于SEO的。这个逻辑似乎合情合理，但在实际运用中却又总有这样那样的冲突…
…

我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?

我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。

你已经花了50%的时间完成了一个项目的90%，如果余下的10%又需要你花50%的时间去弄，是否值得? 尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览，而那10%仅仅是为了通过W3C代码验证。这时候你或许该考虑下，你千辛万苦的通过W3C验证是为了符合Web标准还是为了满足自己小小的虚荣心?
特喜欢跟别人争论”DIV+CSS”的说法是错误的，应该是”XHTML+CSS”，你有没有做过类似这样的事儿? 还打心里为自己科学家般严谨的态度而感到自豪。但事实上，叫”DIV+CSS”的人，没有哪个傻到整个页面的元素都使用DIV。这就像当你说”吃饭”时，你也不光是吃白花花的大米。

呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关Web标准的东西吧，有助于你了解这个东西。

一些有Web标准的文章

验证HTML，CSS及RSS源的14个免费工具

这篇译文里介绍了14个工具可以方便的验证你的CSS以及HTML和RSS源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。

二， CSS布局和定位

我不是什么Web前端观察家，我个人发现的两个可能并不正确的网页布局趋势是: 两栏和水平条。

说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋势得益于Web 2.0的流行，你很少会看到一个Web 2.0网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻麻，Magazine的非常厉害。这恐怕也不能说谁前卫谁落后，好的Magazine布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。

水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是960像素固定宽度，我的电脑分辨率是1440*990像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。

还是让我们看一些关于CSS布局的技巧吧。

15款网格布局生成器

网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计/Minimalist Design，32个网格布局的网页设计欣赏和960网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。

9个永不过时的CSS 3栏布局技巧

我喜欢3栏布局的网页设计，尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系，我们是非非非主流。但是3栏布局相对来说就比较复杂，有些难以控制，Noupe发表一篇文章，收集了9个号称永不过时的三栏布局设计技巧(9 Timeless 3 Column Layout Techniques)。

五种方法让CSS实现垂直居中

使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。本文里介绍了使对象垂直集中的5种不同方法，以及它们各自的优缺点。

CSS布局口诀

网络上有朋友把CSS BUG编成了顺口溜了！是否有效不好说，但至少是蛮有趣的。

使用CSS创建三列固定布局结构

讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一，一些互联网公司面试题中也会出现这类题目。本文分享一个由aka Yuh?发明完美通过CSS实现垂直居中的方法。

渐进增强式布局探讨（上）、（下）

经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。

CSS布局大全

这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。 Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和HTML验证，且不需要Hack，兼容各大主流浏览器。

43个PSD转xHTML+CSS网页布局及导航教程

推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做PSD2XHTML。如果你是以为网页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML+CSS处于懵懂状态，希望大家通过这43 个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。

CSS Position

这篇文章详细介绍了CSS定位属性Position的各个值的用法，和一些实例说明，以及相关的绝对定位布局和清除浮动列等CSS技巧。

详解css定位与定位应用

定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。

跨浏览器的CSS固定定位{position:fixed}

使用Position:fixed属性可以实现固定元素于窗口某位置，比如帕兰映像的头部工具栏和底部工具栏就是使用这种效果, 但IE6并不支持这个属性，帕兰映像里使用的方法是利用IE的条件注释让IE6下非固定，显示不同样式。如果你想实现高度统一，可以看看这篇文章教你如何实现。

32个网格布局的网页设计欣赏

这些设计里面，有紧凑型的网格布局设计，同样也有使用大量空白间距的网格布局。

三，CSS Sprites(CSS图片合并技术)

最初知道CSS Sprites的时候，大家都还不知道该如何恰当的翻译这个技术名词，有人称其为CSS妖精，CSS小鬼等，听上去是蛮可爱蛮特别的，但会让人纳闷这倒底是个什么东西。最近发现大家开始把这项CSS技术称为图片合并，感谢还是蛮贴切的。

CSS Sprites目前已经成为非常流行的CSS技术应用，你随便到一个经常逛的著名网站看看，会发现大家都在使用这项技术，比如淘宝、谷歌、豆瓣、土豆等等等等。简单的说，CSS Sprites主要就是提高网页载入速度和防止图片加载延迟，这对于大流量的网站来说是非常重要的。

学习CSS Sprites是件很简单的事情，比较麻烦的是合并图片和写CSS时的定位，更麻烦的后期的维护管理。但不管怎样，做为一项有效实用的CSS技术来说，如果你是一个Web前端开发者，你很有必要掌握这项小技术。

CSS Sprites的一些技巧 | 前端观察

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

CSS 前景图片合并技术 | 芒果

不只背景图片可以合并，前景图片同样可以合并，本文介绍了Google网页里是如何对两个元素进行定位和溢出截断，来实现前景的图片合并。

P.S 其实才学习CSS Sprites的时候，就想着前景图片也一定是可以合并的，可自己却又一下子想不出来什么方法。看过这篇文章后，才发现是如此的简单，不禁为自己的智商挫败了好几秒

CSS Sprites(CSS图像拼合技术)教程、工具集合

非常非常全面的一篇文章，详细介绍了什么是CSS Sprites, 哪些著名网站使用了CSS Sprites，使用更好的使用CSS Sprites等等。

CSS Sprites + 圆角

我知道现在有成千上万个关于用CSS处理圆角的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

CSS Sprites, 图片切割与优化技术

这篇文章不是告诉你什么是CSS Spries，也不是告诉你如何使用CSS Sprites，而是 —— 为什么要使用CSS Sprites?

四，CSS优化

我个人对CSS优化的看法是:

在语义化的前提下，对代码进行精简。如果是大型网站，则又考虑CSS的结构化和模块化

。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。

至于CSS与SEO一说，倒还真不敢苟同。不过，不管它们是否有关联，你都应该尽量去学着写出一份拥有良好语义并尽量简洁高效的CSS样式表。

8款在线CSS优化工具/组织和压缩CSS

CSS的优化通常包括两方面: 格式化CSS和精简CSS。精简CSS的办法是把具有相同属性的元素合并在一起，但这会降低代码的可读性，使代码的后期维护很麻烦，稍不注意就出错。格式化CSS一般就是多行模式或单行模式的选择。本文里面介绍了8款工具能让你方便的优化和格式化CSS的在线工具。

CSS代码精简工具和技巧

管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页文件有利于缩短页面的载入时间. 更重要的是, 相同的页面排版和结构, 能用最简洁的代码来实现, 也应该是每个网页设计师对自己的一种要求.

17款加速效率的CSS工具

作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。

10个CSS简写技巧让你永远受用

CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

注重SEO搜索优化的div+css命名规则 | 知更鸟

CSS的命名规则入手会有意想不到的收获，最基础的就是最有效的。下面从前端设计的角度整理的DIV+CSS的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做你懂，搜索引擎也懂，何乐而不为呢。

W eb UI 设计(网页设计)命名规范

Web UI设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。

目前比较全的CSS重设(reset)方法总结

收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

CSS代码命名惯例语义化的方法

CSS代码的命名惯例一直是大家热门讨论的话题。本文通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

模块化 CSS – 更有效地管理CSS | 幸福收藏夹

关于如何模块化CSS来实现更有效管理CSS的一些见解。

编写具有良好结构的CSS文件

这是一篇关于如何编写具有良好结构的CSS文件的帖子。我已经讲过CSS文件的代码可读性，但在讨论之后，一些更具体的要求被提出（主要是关于一些读者在管理具有大量布局元素CSS文件时的困难之处），所以我决定在这些案例中说明我自己的开发流程。

CSS中属性的书写顺序

我个人是觉得讨论CSS属性的书写顺序有点没意义，或者说即使有意义，一定要弄一套书写顺序去框住自己，实在又是一件自己为难自己的事儿。只要保证每一个属性和值都有用，当冲突时，该前的在前，该后的在后，也就好了。

五，CSS、IE和Hacks

想一想，我们花上一大把的时间去研究CSS Hack，研究IE为何如此的叛逆，做项目时可能就因为某个兼容问题给卡死个半天，这些时间如果用来学一门其它技术，可能早已修炼成该技术的专家了，并且是有用的。而精通Hacks并不是件值得骄傲的事情，而是所有开发者的无奈和悲哀。

没关系，我是这么安慰自己的:当年没有CSS的时候，多少站长花了比现在10倍甚至百倍的辛苦来建站和维护，当有CSS后，他们默默的选择过渡，而不是难过的去自杀。那个不是说了嘛，往往都是事情改变人，人改变不了事情，我们能做的，只能是适应每个过程。

10个实用但IE不支持的CSS属性

本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack。

修正IE6的bug的10个技巧

我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。

IE6 BUG大全

一个系列文章，包含了很多IE6 BUG的详细介绍，比如IE6中奇数宽度的BUG，PNG Alpha透明，像素BUG的实例，IE6文字溢出BUG等等。

目前非常全面的CSS兼容问题资料汇集

CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。本文里面收集了非常详细的CSS兼容问题。

IE6方程式

Web 开发人员的使命就是面对不同的浏览器。自 Web 标准运动的诞生起，有个宿命从 Netscape Navigator 4 开始就被延续着，就是那些过时的浏览器拒绝死亡。它们顽强的存在，阻碍了现代标准的发展。而今天，这个宿命降落到了 Internet Explorer 6 身上。

六，你可能不知道的一些CSS技巧

就像本文开头所说的，CSS像魔方一样，有数不清的玩法，即使你是高手，永远都有你不了解的地方。有一些CSS技巧并不常用，一些CSS技巧完全是实验性质的，还有一些完全甚至是代码写错误打误撞搞出来的结果，比如本站之前介绍的CSS实现的标签云远视效果。

CSS content, counter-increment 和 counter-reset详解

你很可能没有听过上面这些CSS术语？事实上，我在这之前也不了解，但你可能看到过conten:after和content:before这样的 CSS代码，利用这样一些CSS属性可以实现内容的渲染。尽管这些属性存在浏览器兼容性和W3C验证的问题，但了解一下还是蛮有趣的。

使用CSS选择器创建个性化链接样式

zip文档链接前面显示显示一个zip文档图标，PDF则显示PDF图标，以此类推，听上去很酷吧。更酷的是，你只需要使用CSS而不是JS就能实现这项功能。这篇教程告诉你如何通过CSS的属性选择器来制作个性化链接样式。

CSS Sticky Footer: 完美的CSS绝对底部

当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。

没有div没有float没有clear没有hack的超强CSS布局

一个超强的CSS 布局，没有div，没有float, 没有clear, 没有hack，没有和你开玩笑，确实是一个CSS 布局。出自TJKDesign 之手，你可以查看DEMO 演示或阅读该布局设计师的文章说明。

一个关于透明度继承的问题

在前端开发的时候，经常用到板块背景的透明度，但当父层透明时，其中嵌套的子层也会继承其透明性。而这并不是我们想要的，比如，我们只是想要某个块状元素背景透明，而背景层里面的文本子层则非透明。

使用CSS为图片添加更多趣味的5种方法

为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。本文要介绍的CSS技巧将帮助你从痛苦中解脱出来！

101个CSS技术高级应用教程(上) (下)

一些比较高阶的CSS技术应用介绍，全学完这些教程，你的CSS水平将提高很多，废话

53种网页设计师必备的高级CSS技巧

都说了必备了，你不看看实在对不住自己千万的Web开发同胞了…

七, CSS 3

CSS2的出现让web顿时丰富起来，特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展，CSS2已经不能满足web开发的需求，例如属性选择、AJAX出现后与JS的交互等，因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段，但是其某些特征已经让人兴奋不已。

目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中，多数是单篇的文章和访谈记录等，可见这方面的资源还是比较少的，作为一个真正的CSS开发者，走在别人的前面提前了解、运用、研究CSS3也是十分必要的。

CSS3.0相关资源和参考手册收集整理

一些有关CSS 3技巧和教程的资源整理。

CSS 3入门

如果你关注CSS，那么你一定听说过CSS3,它是本应该在几年前问世的下一代样式表语言。是的，CSS 3样式文档至今还没有最终完成。如果你已经急不可待了，那么你也不必感到孤独。虽然这它还没有最终定型但是很多浏览器厂商已经开始支持其中的一些新特性了。

20个对学习CSS3大有裨益的资源

本文列出了20个对你学习CSS3大有帮助的网站资源。

使用CSS3和RGBa创建超酷的按钮

不需要图片，只需要充分利用CSS3的圆角、盒子阴影和文字阴影效果，同时使用RGBa色彩，就能实现非常漂亮、非常流行的文字阴影圆角按钮效果。

你应当了解的5个CSS3新技术 | 彬Go

CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。本文向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

25个高级CSS技巧教程

能用CSS实现的效果，就尽量不要使用JS。但如果使用CSS需要很繁琐的代码，那用CSS也不见得是好事儿。这里是25个高级CSS技巧，有助于你提高你的CSS水平，让你对CSS的掌握更上一个台阶。

继续阅读《【收藏】CSS技巧教程资源大全》的全文内容...

三栏布局，左右固定宽度，中间自适应的一种解决方案 (2009-8-18 13:42:28)

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks (2009-8-10 10:47:28)

让IE6瞬间崩溃的5种方式 (2009-6-22 10:39:33)

【收藏】字体、排版简明入门 (2009-4-1 10:58:52)

WebKit私有属性介绍 (2009-3-13 21:32:5)

Play Google 玩转谷歌,Karry的技术博客

国产JS框架--Como JS 1.0 正式发布

相关文章:

最新评论:

推荐一本书--《从零到百亿Facebook创业故事》

最新评论:

递归练习,做个奥数题

相关文章:

最新评论:

收藏：图片格式详解

Python学习笔记(2)

相关文章:

Python学习笔记(1)

相关文章:

最新评论:

收藏：淘宝DPL-Design Pattern Library

Basic Specification & Usage Guide

Basic Style Platform

Taobao Common Styles

Taobao Common Icons

Modules

Misc

相关文章:

三栏布局，左右固定宽度，中间自适应的一种解决方案

相关文章:

最新评论:

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

相关文章:

javascript中的memoization(memoizing) 技术介绍

相关文章:

最新评论:

ASP.NET中如何防SQL注入

相关文章:

最新评论:

javascript链式调用的设计

相关文章:

最新评论:

MSSQL2005 孤立用户的解决方法

相关文章:

onbeforeunload与a标签在IE中的冲突

相关文章:

最新评论:

基于jQuery UI的图片截取(圈人)功能

相关文章:

最新评论:

整理：详解javascript function中的caller,callee,call,apply

相关文章:

让IE6瞬间崩溃的5种方式

相关文章:

最新评论:

jQuery的不足之处

相关文章:

最新评论:

【收藏】详解CSS的优先权

【收藏】CSS技巧教程资源大全

一，Web 标准

我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?

一些有Web标准的文章

二， CSS布局和定位

渐进增强式布局探讨（上）、（下）

三，CSS Sprites(CSS图片合并技术)

四，CSS优化

五，CSS、IE和Hacks

六，你可能不知道的一些CSS技巧

七, CSS 3

八，更多CSS相关资源

相关文章:

最新评论: