Scarecrow's Life

CSS Object Model View

2011-11-03T17:14:00.000+08:00

这些兼容性表为所有的现代浏览器对W3C CSSOM 视图规范的细节支持。
兼容性表的关键字在文末。

WindowView 属性(整个浏览器窗体的属性)

Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x
innerWidth & innerHeight 浏览器窗体显示区的高度和宽度，以像素计。不包括菜单栏、工具栏以及滚动条等。【只读，无默认值】 Test page	No				Yes	Yes				Yes		Yes		Yes			To be tested
	window.innerWidth window.innerHeight IE 不支持这些属性。它用 document.documentElement 或 ducument.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。
outerWidth & outerHeight 整个浏览器窗口(包括标题栏、地址栏、书签栏和窗框等)的尺寸。【只读，无默认值】 Test page	No				Yes	Yes				Yes		Yes		Yes			To be tested
	window.outerWidth window.outerHeight IE 不支持此对属性，且没有提供替代的属性。
pageXOffset & pageYOffset 整个页面滚动的像素值。【只读，无默认值】 Test page	No				Yes	Yes				Yes		Yes		Yes			To be tested
pageXOffset & pageYOffset 整个页面滚动的像素值。【只读，无默认值】 Test page	window.pageXOffset window.pageYOffset
screenX & screenY 浏览器窗口(左上角)在屏幕上的坐标，只读整数 Test page	No				Yes	Yes				Yes		Yes		Incorrect			To be tested
screenX & screenY 浏览器窗口(左上角)在屏幕上的坐标，只读整数 Test page	window.screenX window.screenY Opera计算相对于浏览器窗口的具体的标签窗口的坐标。这是可以理解的，由于在Windows工作的方式，但严格来说这是错误的。它应该给出浏览器窗口相对于屏幕的坐标。（但我测试发现，无论浏览器窗口时全屏还是正常大小，其值都是0！） IE、Chrome、Safari和 Opera 支持 screenLeft 和 screenTop； Firefox 8.0之前不支持 screenLeft 和 screenTop。
Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x

ScreenView 属性(显示器信息的属性)

Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x
availWidth & availHeight 显示器可用尺寸，不包括操作系统任务栏 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
availWidth & availHeight 显示器可用尺寸，不包括操作系统任务栏 Test page	screen.availWidth screen.availHeight
width & height 显示器屏幕的尺寸，包括操作系统任务栏 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
width & height 显示器屏幕的尺寸，包括操作系统任务栏 Test page	screen.width screen.height
colorDepth 显示器的颜色深度(位) Test page	Yes					Yes		Incorrect		Yes		Yes		Yes			To be tested
colorDepth 显示器的颜色深度(位) Test page	screen.colorDepth 当系统是32位时，FireFox 3.6 一直到FireFox 7.0.1 返回的仍是24。其他浏览器正常。 There was something about Firefox being “really” right because of an alpha channel or something, but as long as all other browsers on the same computer report 32 I continue to see Firefox as the culprit here. Besides, these properties are only ever used in web browser statistics programs, and there people have grown used to the “32” even though they don’t understand what it means. Nobody ever uses it in the wild.
pixelDepth 与colorDepth属性基本上一样 Test page	No				Yes	Yes		Incorrect		Yes		Yes		Yes			To be tested
pixelDepth 与colorDepth属性基本上一样 Test page	screen.pixelDepth pixelDepth和colorDepth的主要不同在于（不确定以前的是否也是这样？）：在Unix机器上，旧的X-客户端可能会允许应用程序定义自己的配色方案。如果是这样的话，colorDepth匹配应用程序的颜色深度，pixelDepth匹配显示器的颜色深度。在其他所有情况下，他们是相等的。
Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x

DocumentView 和 ElementView 方法

Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x
elementFromPoint() 返回给定坐标所在处的元素 Test page	Yes					Yes				Incorrect	Yes	Yes		Incorrect	Yes		To be tested
elementFromPoint() 返回给定坐标所在处的元素 Test page	document.elementFromPoint(100,100) Which coordinates does `elementFromPoint()` need? The standard seems to be `clientX/Y`. Safari 4 and Opera 10.10 need `pageX/Y`. This method is a godsend for drag and drop scripts. When the user drops the dragged element, figure out what element is located at the drop point and go on from there. No more complicated calculations necessary. However, you need to temporarily hide the dragged object. By definition it's the topmost element on the requested coordinates, and we need to know what's underneath it. The basic trick is: releaseElement: function(e) { // called onmouseup var evt = e \|\| window.event; draggedObject.style.display = 'none'; var receiver = document.elementFromPoint(evt.clientX,evt.clientY); if (receiver.nodeType == 3) { // Opera receiver = receiver.parentNode; } draggedObject.style.display = ''; Now `receiver` contains the element the user dropped the dragged element on.
getBoundingClientRect() 返回矩形元素x距离文档左上角的上下左右值的一个对象 Test page	Yes					Almost				Yes		Yes		Yes			To be tested
	x.getBoundingClientRect() 返回矩形元素x距离文档左上角的上、下、左、右的值的一个对象。从本质上讲，浏览器计算所有的矩形（见下文`getClientRects()`），并且`getBoundingClientRect()`将返回距离文档左上角的上、下、左、右的值。IE处理的是正确，个别的矩形计算不正确。 FireFox 无法计算其元素的top/bottom坐标。
getClientRects() 返回元素的几个矩形区域 Test page	Buggy			Yes		Almost				Yes		Yes		Yes			To be tested
getClientRects() 返回元素的几个矩形区域 Test page	x.getClientRects() Returns a list with Rectangle objects that contain the `top`, `left`, `right`, and `bottom` (all relative to the top left of the viewport) of the rectangles of element `x`. The trick here is, that an inline element such as an `<em>` contains one rectangle for every inline box (line), and that all these rectangles are returned. IE5-7 returns far too many rectangles for the first test paragraphs. The correct number is 5 (for 5 lines), but IE5.5 returns 9 and IE6/7 14. IE8b2 gets this right. Furthermore, IE5-7 also split up a block-level element such as a `<p>` into one rectangle per line. This is incorrect: a block-level element should be reported as one rectangle. Finally, in IE 5-7 the rectangles are off by about two pixels. According to John Resig this is caused by the (invisible, but nonetheless present) borders of the `<html>` element. Firefox doesn't round the top/bottom coordinates.
scrollIntoView() 让元素滚动到可视区域（不属于规范的方法）。 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
scrollIntoView() 让元素滚动到可视区域（不属于规范的方法）。 Test page	x.scrollIntoView() Essentially element `x` behaves as if it's the target of an `#hash`: it scrolls to the topmost, leftmost position allowed. iPhone上的Safari能正确处理Y坐标，X坐标它将滚动到页面的左边缘，当用户放大后很难使用。
Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x

ElementView 属性（这些属性提供关于元素节点(HTML标签)尺寸的信息）

Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x
clientLeft & clientTop 内容区域的左上角相对于整个元素左上角的位置（包括边框）。 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
	x.clientLeft x.clientTop
clientWidth & clientHeight 内容区域的宽度和高度，包括填充，但不包括滚动条和边框 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
	x.clientWidth x.clientHeight
offsetLeft & offsetTop 相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值 Test page	Incorrect			Yes		Yes				Yes		Yes		Yes			To be tested
	x.offsetLeft x.offsetTop 计算 `offsetLeft` 时，IE5-7 不将 `position: relative` 元素作为 offsetParents，而将到下一个定位元素作为offsetParent。但计算 `offsetTop` 是正确。
Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x
offsetParent 定位父元素（即用来计算上面 `offsetLeft/Top` 的元素）。 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
	x.offsetParent 当计算 `x` 的`offsetParent`时，浏览器沿着x的祖先DOM树移动，直到它遇到了以下元素之一。该元素变成 `x` 的 `offsetParent`。 `<body>` `position` 不是 `static` 的元素 `<table>`, `<th>` 或 `<td>`,但 `x` 必须要 `position:static` `<body>` 元素没有 `offsetParent`。尽管`<html>`元素有时会进入offsetParent链，但从来没有作为`<body>`的offsetParent。在IE和Opera浏览器下，`position:fixed` 的元素没有`offsetParent`。
offsetWidth & offsetHeight 整个元素的尺寸，包括边框 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
offsetWidth & offsetHeight 整个元素的尺寸，包括边框 Test page	x.offsetWidth x.offsetHeight
scrollLeft & scrollTop 元素滚动的像素值。可读可写。 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
scrollLeft & scrollTop 元素滚动的像素值。可读可写。 Test page	x.scrollLeft x.scrollTop x.scrollTop = 20
scrollWidth & scrollHeight 整个内容区域尺寸，包括隐蔽的部分。（如果元素没有隐藏的内容，它应该是等于clientX/Y？） Test page	Incorrect			Yes		Yes				Yes		Yes		Incorrect		Almost	To be tested
	x.scrollWidth x.scrollHeight 当你向下滚动滚动条时，`scrollHeight` = `scrollTop` + `clientHeight`。如果元素没有滚动时，`scrollWidth/Height` = `clientWidth/Height`。当元素没有滚动，IE中 `scrollHeight` 等于内容的实际高度，而不是元素的高度。 `scrollWidth` 是正确的（但在IE8中有5个像素关闭？）。 Opera 给出不正确的奇数值。经测试，Opera 11.50下已修复。
Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x

Mouse position（计算鼠标的位置）

Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x
clientX & clientY window 鼠标相对于window的坐标 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
clientX & clientY window 鼠标相对于window的坐标 Test page	event.clientX event.clientY 返回鼠标相对于 window的坐标在iPhone上，这对值返回的值等同于 `pageX/Y`。意思就是：在iPhone上, screen area = window area = document area。
offsetX & offsetY target 鼠标相对于事件目标元素的padding box左上角的坐标 Test page	Buggy			Yes		No				border box		border box		content box			To be tested
	event.offsetX event.offsetY 返回鼠标相对于该事件目标的坐标。但究竟哪一点作为参考点呢？按规范说，参考点为内容区域(padding box)（即内容和填充形成的框，不包括滚动条和边框）的左上角，如果有boder,可能出现负值。 IE8/9是唯一取值正确的浏览器。 layerX/layerY:W3C特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点；如果有,将改变参考坐标系,从触发元素盒子模型的border box的左上角为参考点。也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就几乎相等,唯一不同就是一个从border为参考点,一个以padding为参考点。在IE7以及更低的浏览器下，只有当目标元素为 `offsetParent` 时才计算坐标值，否则，它就会拿目标元素的 `offsetParent` 来计算。 Bug:当发现元素应用了 `position:relative` 后，IE会去寻找下一个 `offsetParent` 来计算 `offsetY` ，但计算 `offsetX` 不会。
Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x
pageX & pageY document 返回鼠标相对于文档的坐标 Test page	No				Yes	Yes				Yes		Yes		Yes			To be tested
pageX & pageY document 返回鼠标相对于文档的坐标 Test page	event.pageX event.pageY 返回鼠标相对于文档的坐标。大部分时间情况下，这是你想要的信息。为了在IE浏览器得到它，需要将 `scrollLeft/scrollTop` + `clientX/Y`。
screenX & screenY screen 返回鼠标相对于屏幕的坐标 Test page	Yes					Yes				Yes		Yes		Yes			To be tested
screenX & screenY screen 返回鼠标相对于屏幕的坐标 Test page	event.screenX event.screenY 返回鼠标相对于屏幕的坐标。在iPhone上，这是几乎等于`pageX/Y`，但通常有1或2个像素的差异。意思就是：在iPhone上, screen area = window area = document area。
x & y 等于 `clientX/Y` Test page	Yes			page X/Y		No				Yes		Yes		Yes			To be tested
x & y 等于 `clientX/Y` Test page	没有人可以解释为什么当我们有了 `clientX/Y`，还需要 `x/y`
Selector	IE 5.5	IE 6	IE 7	IE8	IE9 pr3	FF 3.0	FF 3.5	FF 3.6	FF 4b1	Saf 4.0 Win	Saf 5.0 Win	Chrome 4	Chrome 5	Opera 10.10	Opera 10.53	Opera 10.60	Konqueror 4.x

Mouse position 纠结表

clientX/clientY：　W3C+ IE+ Firefox+ Opera+ Safari+ chrome+ 
offsetX/offsetY：　W3C- IE+ Firefox- Opera+ Safari+ chrome+ 
layerX/layerY：　　W3C- IE- Firefox+ Opera- Safari+ chrome+ 
pageX/pageY：　　　W3C- IE- Firefox+ Opera+ Safari+ chrome+ 
screenX/screenY：　W3C+ IE+ Firefox+ Opera+ Safari+ chrome+ 
x/y：　　　　　　　W3C- IE+ Firefox- Opera+ Safari+ chrome+

兼容性表的关键字

Yes	完全支持且正确
Almost	支持完全且正确，除了一个小问题
Incomplete	正确的，但不完全支持
Alternative	以另一种方式支持
Untestable	取决于另一个是不支持的方法或属性
Minimal	勉强支持，但在实践中无法使用
Incorrect	返回不正确的对象或值，并成为严重可用
Buggy	没有的东西不应该做的
No	不支持
Crash	浏览器会崩溃

原文链接：http://www.quirksmode.org/dom/w3c_cssom.html

inline-block 总结

2011-08-09T16:08:00.014+08:00

一、inline-block 设置
IE6/7浏览器设置
如果是inline水平的元素，直接：
a {display:inline-block;}

如果是block水平的元素，方法有两个：
li { display:inline-block;}
li { display:inline;}
或者：
li{ display:inline; *zoom:1;}

二、列表布局
css
ul{
font-size:0; -webkit-text-size-adjust:none; //Chrome 最小字体限制
letter-spacing:-3px; //具体设值参考2
}

li {
font-size:12px; letter-spacing:0;
margin:5px 0; width:200px; min-height:250px; _height:250px; border:1px solid #000; display:inline-block; *display:inline; *zoom:1; vertical-align:top;}

PS：
1、如果元素间本身就没有间隔，无论letter-spacing的值多小，元素都不会重叠；如果有空格间隙存在，letter-spacing就会发生重叠；
2、block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
3、inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
4、font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
5、letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。

三、两端对齐布局(列表最好使用block水平的元素)
css
ul{ text-align:justify; *text-justify:distribute; 或*text-justify:inter-ideograph; 或*text-justify:kashida;}

li{ display:inline-block; *display:inline; *zoom:1; vertical-align:top;}

.justify_fix { width:100%; height:0; overflow:hidden;}

PS：
1、现代浏览器下列表标签间需留空或换行；
2、列表尾部需添加一个.justify_fix 元素，底部会额外的增加高度；
3、如尾行需左对齐，.justify_fix 需改为 .left_fix
.left_fix{ height:0; overflow:hidden;}
需添加多个.left_fix 元素(个数理应最好等于每行子列表的个数-1 )，底部会额外的增加高度

参考1：跨浏览器的inline-block
参考2：letter-spacing/空格间隙/字体/字体大小关系测试demo
参考3：text-justify实现更具语义化的图文列表布局

button按钮宽度兼容性

2011-08-02T15:40:00.025+08:00

项目中的需求：要求按钮左右边距为 5px；最小宽度为 50px(即按钮最小宽度为 60px)，兼容各浏览器。

效果
a标签撑开撑开撑开撑开

CSS
input{ margin:0; padding:0; border:0; font:normal 12px/20px "\5b8b\4f53"; vertical-align:middle; } //input css reset

.button{
padding:0 5px; //左右内边距 5px
display:inline-block; *display:inline; *zoom:1;
min-width:50px; width:auto !important; width:50px; //最小宽度 50px
height:20px;
white-space:nowrap; //解决ie6折行的问题
*overflow:visible; //设置这个属性IE6/7下padding才会生效
color:#fff; text-align:center; background-color:#327E33; cursor:pointer;
}

input.button{ min-width:60px; width:auto !important; width:60px;
min-width:50px\0; //ie8 hack
_line-height:15px; //ie6 hack
}

@-moz-document url-prefix(){
input.button{ padding:0 2px; min-width:60px;} //firefox input内左右文字有 3px的间距
}//火狐hack

“Firefox强行把按钮内文本的行高设置为normal，这个值在Firefox里默认为15px”

效果
按钮按钮

css
.btn_img{
padding:0 10px; //左右内边距为 10px
border:1px solid #ccc;
display:inline-block; *display:inline; *zoom:1;
min-width:68px; width:auto !important; width:68px; height:18px;
*vertical-align:middle; //修复按钮在 ie6/7下的垂直显示
font:normal 12px/18px "\5b8b\4f53"; color:#36c; text-align:center; background-color:#F5F5F5; cursor:pointer;
}

.btn_img img{
margin-right:5px;
margin-top:1px; vertical-align:top;
*margin-top:0; _padding-bottom:1px; *vertical-align:middle; //ie6/7中图片后面的文字也会显示问题
width:16px; height:16px;
}

.btn_img:hover{ color:#36c; text-decoration:none; background-color:#fff;}

文本框(input)垂直居中(未测试)
padding:3px 1px 0;font:16px/16px arial;vertical-align:middle;

padding:3px 1px 0;font:行高值px/行高值px arial;vertical-align:middle;

浏览器兼容性检查工具

2011-07-25T18:51:00.013+08:00

一、单独安装
依次安装IE6 Green、IE7 Standalone 及IE8 安装文件
相关参考：
IE6和IE7共存方法（别人是别人的，我是我的）
IE6、IE7、IE8共存方法

二、Multiple IE

三、IE Collection(可以登陆，支持flash，windows7下不能安装ie7)

四、Expression Web SuperPreview

五、IETester(无法登陆，不支持flash)
调试工具 DebugBar

六、Xenocode Browser Sandbox(推荐)
相关参考：
多浏览器测试工具Xenocode Browser Sandbox下载地址

七、VMWARE的虚拟化工具ThinApp运行ie6（推荐）

八、Windows XP Mode（推荐）
网络配置：
1、添加Microsoft loopback Adapter实现xp mode网络共享（“添加硬件向导”->“安装我手动从列表选择的硬件（高级）”->“网络适配器”->“Microsoft”->“Microsoft Loopback Adapter”）；
2.配置Microsoft loopback Adapter 和虚拟机系统里的Microsoft loopbak网络连接IP为同一网段。例如 Microsoft loopback Adapter10.1.10.1，虚拟机系统里的Microsoft loopbak10.1.10.2，网关同为255.255.255.0；
3、关闭win7和XP中的防火墙及杀毒软件的防火墙。
相关参考：
在win7下安装多个版本的ie

九、其他资源：

ie各版本官方下载地址

IE浏览器中文网站下载

IE Developer Toolbar
IE WebDeveloper

Win7下 IETester IE7无法打开本地文件的解决方法

2011-07-09T15:28:00.001+08:00

方法一：选项 -> 选项 -> 高级选项 -> 去掉 “以多进程模式运行” 选项；

方法二：先在IEtester的IE7地址栏中输入本地文件的URL hierarchy（上一级目录），IE7此时会打开这个文件所在的文件夹显示其中的文件，然后再把文件名输进去回车，这时IE7就会加载本地HTML文件了。
官网原版解决方案

Tunnelier、ProxySwitchy!设置

2011-07-03T20:52:00.006+08:00

配置Tunnelier：

在上图填好你的 SSH 主机域名（IP）、端口，登录名、密码

在上图选择 “Always reconnect automatically”，这样，一旦断网，程序会自动重新连接。顺便把右边的 “Open Terminal”、”Open SFTP”取消选择，这样就不会自动打开 SFTP端口。

如果要做穿墙代理，那么必须在 “Service” 标签，开启 “SOCKS / HTTP Proxy Forwarding “。地址就是 127.0.0.1，端口可以自定义。

配置Proxy Switchy!：

Proxy Profiles选项卡：建立Profile的时候，要选“Manual Configuration”，并且“HTTP Proxy”最好为空。默认它会先用HTTP Proxy，像Twitter这些网站用HTTP Proxy是不能浏览的，而目前的新版Chrome都支持Scokts，所以直接配置SOCKS Host即可(选择"SOCKS v5")。

Proxy Switchy!中“Rule List URL”的地址为：
http://autoproxy-gfwlist.googlecode.com/svn/trunk/gfwlist.txt

PS：Proxy Switchy!的Online Rule List下载有时会罢工，解决办法是手动删除SwitchyAuto.pac文件
该文件在XP下的路径是：C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\bgfkhjmcnkmegdmagboackgipbdpomke

Vista/Win7下的路径是：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions\bgfkhjmcnkmegdmagboackgipbdpomke
正常下载后，文件大小在200KB以上。

点击login即可建立tunnel，会跳出来一个终端和图形化的sftp界面（如果服务器关闭了sftp或shell则不会出现）。
如果想下次自动登录，点击保存起来即可。下次登录的时候，再login即可，十分方便。

PNG总结

2011-06-27T17:57:00.003+08:00

PNG8

8位的PNG和GIF看上去差不多，最多支持256种颜色，8位的PNG支持索引透明（即和GIF一样的那种只有全透和全不透两种效果）和 alpha透明（支持半透明）。

PNG24

24位的PNG支持2的24次方的颜色数量，但是没有透明信息。

PNG32

32位的PNG在24位的PNG基础上增加了8位的透明信息，因此支持不同程度的半透效果。

Gif、Jpeg、PNG区别

Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha 透明）。支持动画；256种颜色不适合照片，适合图形

Jpeg不支持透明、不支持动画。Jpeg是最适web上面的摄影图片和数字照相机中

PNG 大致可以分为256色的png和全色的png，完成可以用256色的png8代替gif，用全色的png代替jpeg

PNG8(索引透明)在创建的时候有个参数叫(PS杂边|FW色板),这个作用就是用杂边色加上像素点的透明度例如50%,生成伪透明的不透明像素点适用于固定底色的伪半透明,例子里用的杂边是黑色,在白背景下就很明显

链接：ooxx.me/png.orz

PNG各种格式如下表所示：

格式	位数	透明支持
PNG8	8	不支持
PNG8+索引透明	8	仅支持全透明
PNG8+alpha透明	8	支持半透明
PNG24	24	不支持
PNG32	32	支持半透明

		描述	标准浏览器	ie6及以下
FW: PNG8 (256色)	不透明	色板默认是画布的颜色（PS是没有画布色的，只有独立的层做背景），画布色一般是白色，所以在fw导出PNG 8的时候常常会遇到白色区域变成透明的情况。	(半)透明图片保存后背景为色板颜色
	索引色透明	一个像素点只有两种属性，一种是全透明，一种色素。通俗地说就是某像素是全透明还是全不透明	如果某色块颜色是色板的颜色，那么这个色块就是全透明的；如果图片存在半透明(alpha透明)，那么导出的时候，fw会将色板色和半透明区域叠加，展现出来的颜色加到色块上。
	Alpha透明度	这个透明模式非常奇怪，他秉承了png32的半透明属性（可指定透明度），又包含了png 8的布尔透明。	用这个方法导出的png 8，在现代浏览器中呈现的效果与png 32完全一样，同样可以呈现半透明效果。	在ie6及以下浏览器中，半透明的色块被表现成全透明色块，且不会出现灰色背景，但弊端就是不会呈现索引色透明那么自然的过渡，会出现毛边现象。要注意的是：这里的索引色是透明色块及半透明色块，并不是色板的颜色
FW: PNG24 PNG32 (全色PNG)	PNG24 不透明,但是颜色数很多,不止256色；Photoshop里导出的png24其实是png32； PNG32 比PNG24多了透明信息(支持Alpha透明)，缺点在于IE6支持不好,会把透明区域显示成蓝灰底色
PS: PNG	PNG8(索引透明)	Photoshop只能导出布尔透明的PNG8 Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8
PS: PNG	PNG24(其实是PNG32)

结论

PNG格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG 在24位基础上增加了8位透明通道，因此可展现256级透明程度。
Photoshop不支持也不能输出PNG8+alpha透明的PNG，32位PNG输出是由24位PNG加透明信息形式输出，而Fireworks对 PNG支持较好。
非IE6的浏览器都能正常显示包含透明信息的PNG图片，而IE6在滤镜的帮助下能够正常展示PNG8+索引透明以及32位的透明PNG图像，但是对 PNG8+alpha透明的图像支持不够好。

IE 问题总结

2011-06-27T17:55:00.012+08:00

1.:focus + selector {} 选择器失效，影响版本ie8，http://haslayout.net/css/Ignored--focus-Bug，
解决方法：在失效选择器后面添加一个空选择器 :focus{}

2.忽略'>'后有注释的选择器：selector> /**/ selector{}，影响版本ie6，http://haslayout.net/css/ie7-child-selector-comment-bug，解决方法：删除注释(官方DEMO有误)

3.ie7的坏的:hover 绝对定位bug，影响版本ie7, 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显示位置时将会不起作用，如果他们不在父元素的可视范围内，http://haslayout.net/css/ie7-broken-hover-absolute-bug
解决方法是给其加上margin-left:0%;

4.当:active时Button背景偏移，影响版本ie8，给button设置:active时背景会做偏移，可以通过设置:active时的 -ms-background-position-x和-ms-background-position-y来改变这个偏移。

5.:hover边框消失bug，影响版本ie8, 当设置了outline的元素后，再设置:hover的时候，如果设置边框的话，将会不显示

6.:first-line/:first-letter里的!important会忽略，影响版本ie8, 在:first-line/:first-letter里应用!important的规则会被忽略，http://haslayout.net/css/-first-line--important-Rule-Ignore-Bug

解决方法就是不用!important

7.:first-letter被忽略的bug, 影响版本ie6, 当:first-letter前面有逗号的时候ie6会忽略这条规则，http://haslayout.net/css/-first-letter-Ignore-Bug
解决方法是将:first-letter放到最后。

8.position:absolute元素中，a{ display:block}, 在非:hover时只有文本可点击

A:http://haslayout.net/css/Partial-Click-Bug，影响版本ie6，解决方法：设置layout

B:http://haslayout.net/css/Partial-Click-Bug-v2，影响版本ie6/7，解决方法：给a添加background, 如果背景透明，使用background:url('任何页面中已经缓存的文件链接')；不推荐backgroundurl(#)[官方的解决方法]，因为会增加一下HTTP请求

9.文档滚动bug，影响版本ie6/ie7，不在html标签上设置overflow或许会影响到body上面的overflow
具体请看  http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
解决方法：html{ overflow:visible;} body{ overflow:hidden;}

10.* html bug，影响版本ie6，* html [selector]在ie6下通常不会被忽略，这个bug通常被用来作ie6的hack使用。

11.!important bug, 影响版本ie6, 在important之后设置同样的规则后important会被忽略，这个bug也常被用来指定ie6的样式。

12.给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面，影响版本ie6，http://haslayout.net/css/Italics-Float-Bug
解决方法：给有斜体文字的元素添加overflow:hidden

13.不正确的浮动伸展布局，影响版本ie6/ie7，连续浮动的元素并且设置clear属性没法自动伸展
demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Demo.html
fix demo  http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Fixed-Demo.html
解决方法：给连续浮动元素加一个span然后设置display:inline-block和display:block

14.连续浮动元素bug，影响版本ie6/ie7，http://haslayout.net/css/Float-Squeeze-Weird-Gap-Bug

15.连续浮动字符出现重复字符，影响版本ie6/ie7, http://haslayout.net/css/Float-Squeeze-Duplicate-Last-Character-Bug
这个和14的解决方案都差不多，14是通过加一个宽度，而这个是通过给浮动字符加一个position:relative;

16.空元素高度bug，影响版本ie6/ie7，有layout的空元素获得了高度
http://haslayout.net/css/Empty-Element-Height-Bug

<div></div>
div {
background: blue;
width:100%; /* to give "layout"  */
}
解决办法：
div {
height: 0;
overflow: hidden;
}

17.ie7的1px dotted 边框变成dashed边框的bug,影响版本ie7, 当设置了1px dotted边框后，有一个边框的宽度大于1px 的话其它为1px边框会变为dashed的样式，具体请看http://haslayout.net/css/ie7-1px-Dotted-Border-Appears-As-Dashed-Bug

18.overflow bug,影响版本ie6/ie7，当设置了overflow:hidden或auto的元素，如果子元素设置了相对定位，overflow就不起作用了，表现的是visible的样式，http://haslayout.net/css/relative-overflow-failure-bug
解决方法是给父元素加一个position:relative;

19.th没有继承text-align属性的bug，影响版本ie8，当给table设置text-align时，th没有继承样式，http://haslayout.net/css/non-inherited-th-text-align-bug
解决方法:给th设置text-align:inherit;来解决ie8下这个丑陋的bug。

20.text-align bug, 影响版本ie6/7, 当容器外面设置了text-align，如果容器里面有文本和其他block的元素, block的元素也会继承text-align，这是不正确的，http://haslayout.net/css/Text-Align-Bug
解决方法是重新写出合理的有语义的markup，如文本外面加一个p.

21.32个style限制，影响版本ie6/7/8, 在32个"style"方法(style, link, @import)后浏览器会忽略后面的样式

22.浮动元素的阶梯bug, 影响版本ie6/7, 当给一系列<li>里面的浮动元素设置font-size后会出现阶梯效果，http://haslayout.net/css/staircase-bug
解决方案是给li设置display:inline;

23.浮动图片list标记错位bug，影响版本ie8, 当list里面有浮动的image时，list标记显示的位置跑在里面了，http://haslayout.net/css/Image-Float-Bullet-Chaos-Bug
解决方法:用背景图片代替list自带的标记

24.dt, dd, li背景消失bug, 影响版本ie6, 当给浮动的div里面的dt, dd, dl设置背景时不显示，http://haslayout.net/css/disappearing-list-background-bug
解决方案是给dt, dd, dl加上position:relative;

25.li内元素偏离 baseline 向下拉，影响版本ie8, 当给list里面的元素设置display和overflow属性后list标记会偏移，http://haslayout.net/css/list-drop-shift-bug
解决方法是给里面的元素加一个float:right; width:100% 或给li设置display:inline

26.ol数字标记不自增, 影响版本ie6/7, 当给li设置宽度时会触发这个bug，解决方法是给li设置display:list-item

27.ul/ol标记消失bug, 影响版本ie6/7, 当ul/ol触发了layout并且有margin-left会触发这个bug，http://haslayout.net/css/No-Bullets-on--ul--and--ol--Bug
解决方案是给li设置margin-left（不要加在ul/ol上）

28.图片不垂直居中，影响版本ie6/7, 当使用line-height来居中图片时在ie6/7下不会生效，http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug
解决方法是在img后加一个有layout的空白元素如<span></span>

29.图片label bug，影响版本ie6/ie7/ie8，当label中有img的时候无法触发点击选中form元素事件.
demo http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.html
fix demo http://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html
解决方案：通过给<label>内加入一个空的span标签，然后设置 position:absolute；background:url(#); 设置label float:left; position:relative;overflow:hidden;就可以解决了

30.使用filter处理的透明背景图片的透明部分不可点bug, 影响版本ie6/7/8，当给一个display:block元素使用filter来支持png透明的时候，透明区域无法点击，http://haslayout.net/css/no-transparency-click-bug
解决方法是不要使用 background:none;filter…，而是background:url(#);filter…

31.白色背景hover bug，影响版本ie7, 给hover设置background-color:#ffffff;时，背景不会改变，http://haslayout.net/css/hover-white-background-ignore-bug
解决方法是设置background:#ffffff;

32.png图片和背景颜色不一致，影响版本ie6/7/8, 设置背景颜色和png图片背景同样的颜色代码最后表现不一致，http://haslayout.net/css/PNG-Image-and-Background-Color-Mismatch
原来是因为ie支持"PNG Gamma profiles"，解决方案是通过一个pngcrush程序来优化图片。

33.没有背景图片bug, 影响版本ie6/7/8, 当使用background的时候如果在url()后没有加空格背景图片就不会显示。

34.背景溢出,拖动滚动条后显示正常 bug, 影响版本ie6, 一个容器里面有浮动元素并且通过加一个clear:both的额外div来清除浮动会产生此bug，http://haslayout.net/css/Leaking-Background-Bug
解决方案就是建议尽量不要通过增加一个 clear:both的div来清除浮动，可以通过在外层加上overflow:hidden;对于ie可以通过加上zoom:1；来触发ie的 layout

35.自定义鼠标bug, 影响版本ie6/7/8, 当自定义鼠标样式的时候，如果url()里面的路径是相对路径的话，ie会认为相对于当前文档而不会出现鼠标样式的图片，http://haslayout.net/css/Custom-Cursor-Bug
解决方法是采用绝对路径。

36.高度扩展bug, 影响版本ie6, 当高度很窄如小于12px时ie6会扩展高度，http://haslayout.net/css/Expanding-Height-Bug
解决方法是设置overlfow:hidden或font-size:0;

37.宽度扩展bug, 影响版本ie6, 当连续英文字符的时候设定宽度不起作用，http://haslayout.net/css/Expanding-Width-Bug
解决方法是设置overflow:hidden或word-wrap:break-word;

38.㈠ 3px间距bug, 影响版本ie6, 当几个连续浮动且有layout的元素排列时会有3px的间距，http://haslayout.net/css/3px-Gap-Bug-aka-Text-Jog-Bug
解决方法就是给这些元素设置3px的负margin或加上 overflow:hidden;

㈡ IE6/7 下li的3px间隙，解决方法：设置li的vertical-align，值可以为top ¦ text-top ¦ middle ¦ bottom ¦ text-bottom

39.noscript样式bug, 影响版本ie6/7/8, 当js可用的时候如果给noscript设置border和背景都可以显示，http://haslayout.net/css/noscript-ghost-bug
解决方法就是通过给noscript设置display:none;

40.百分比padding垂直margin bug，影响版本ie8,当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样，解决方法是给父元素加一个overflow:hidden/auto

41.auto margin居中bug, 影响版本ie6/7/8, 给block元素设置margin auto无法居中，http://haslayout.net/css/no-auto-margin-center-pseudo-bug
出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上<!DOCTYPE html>就可以了。

42.表单元素双margin bug,影响版本ie6/ie7,input和textarea或许会继承父元素的水平的margin
具体请看 http://haslayout.net/css/Form-Control-Double-Margin-Bug

43.浮动双margin，影响版本ie6, 当给一个浮动元素设置margin-left或margin-right时margin加倍，解决方法是加上一条display:inline;

44.负margin bug, 影响版本ie6/7, 当给一个有layout容器里面的元素设置负marin时内容会被截断，http://haslayout.net/css/Negative-Margin-Bug
解决方法是不让容器有layout或者给负marin的元素layout并设置 position:relative;

45.设置margin auto的button没有居中，影响版本ie8，ie8下如果给像button这样的标签（如button, input[type="button"], input[type="submit"]）设置{ display:block; margin-left:auto; margin-right:auto; }如果不设置宽度的话无法居中。
demo http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Fixed-Demo-CS.html
解决方案：可以给button加上宽度，或是通过js，
var buttons = document.getElementsByTagName('button'); for ( var i = 0; i < buttons.length; i++ ) {
buttons[i].style.width = buttons[i].offsetWidth + 'px';
}

46.ie6下li里有hover行为时li高度会增大。解决方法：重设li的padding-top为0或不要让li拥有layout。

47.在ie6中，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性在这些非文字的对象中就会失效。
解决方法：设置非文字的对象的样式：
_margin: (容器的line-height – 对象本身的高度)/2px 0;
vertical-align:middle;
或者对包含文字的标签设置layout。

48.ie中iframe会出现默认的白色背景及边框，而 Firefox和 Chrome默认背景色为透明色。
解决方法：首先，设置 iframe的 style="background-color:transparent; border:0;"；然后设置iframe属性 allowTransparency = true。

49.ie6/7中 a元素内嵌套一层或多层内联元素, 最终的内联元素包含一个img元素, 如果触发了a元素以内的 img元素的任何一个父元素的hasLayout, 那么超链接将失效。
解决方法：
1.不触发a元素下的内联元素的hasLayout；2.将img元素进行定位(不设置位置属性), 并将其z-index设置为负数。

[转]sony笔记本的VAIO键及Assist键的自定义应用

2011-06-27T17:53:00.002+08:00

VPCEB400C 上面有2个键....一个VAIO一个Assist....
VAIO是启动MediaGallery的....很少有人装这个东西...不装这个就是静音功能....其实Fn+F2也是静音功能....并且手感好于他
Assist是启动VAIO Care的....不开机就是直接进入恢复平台的....开机就是打开VAIO Care的奇慢无比.....换句话说就是一点用没有....

由此想到废物利用...SFEP.exe是Fn的驱动...VAIO Event Services(VES)是Fn的应用程序...
安装MediaGallery...VAIO键就好使....卸载MediaGalley....VAIO键就变静音
硬删MediaGallery...VAIO还是静音....
这说明SONY驱动没有访问注册表去找MediaGallery....
文件里也没有说明MediaGallery路径的文件....

于是测试一下 VAIO键和Assist键的工作原理就知道了
一按VAIO....VES就去找"C:\Program Files (x86)\Sony\Media Gallery\VRLP.exe"文件找到就执行找不到就静音
一按Assist...VES就去找"C:\Program Files\Sony\VAIO Care\VAIOCare.exe"文件找到就执行找不到不执行(这里很特殊不知道执行了什么,后面说)

这样想改VAIO键和Assist键的功能就变的很简单了....
把需要的功能文件改名放到那个位置自然就可以了....
原来的文件也改个名依然放在原地比如 VAIOCareApp.exe 注意在开始菜单上把快捷方式也改改....这样就不影响使用了....

说到功能...这个好像没有什么现成的工具...我们自己写....
我时间不是很多就写了2个有需要的就下载用....
程序大是因为用MFC了图方便其实可以写的很小....
微软MSE检查没有病毒....要不放心自己编译....代码也提供了....
开发环境是VS2005 VC MFC....

一个是关闭屏幕的按一下就黑屏和电脑3分钟不用一个效果...

MonitorCloser.rar (134.41 KB) MonitorCloser_Src.rar (20.82 KB)
后面的是代码

还有一个是切换电源方案的可以在节能平衡高性能之间切换
PowerSet.rar (144.24 KB) PowerSet_Src.rar (34.83 KB)
后面的是代码

效果图

本来想做的和调节声音和亮度一样来着,后来发现貌似没有win7 sdk作起来很难...
并且感觉那个好像是用钩子钩住屏幕画的...有的透明有的不透明...由下往上的过渡黑....抗锯齿的边缘...
我对作界面一直不是很在行短时间做不出来....有时间慢慢研究....也希望有高手出马....
这个就是一个程序有抢焦点的问题...不过问题应该不大...

实际使用的时候会发现...
VAIO键反映非常的快.....几乎是瞬间反应
Assist总迟钝....SONY在Assist执行文件的时候干了些什么....可能是取得管理员权限?...
不知道反正Assist不是很灵敏...可以抛弃不用....用的话还是关屏幕比较好...

禁用触摸板的软件
这个程序运行需要安装sony的Synaptics驱动就是那个Pointing.EXE....安装这个没坏处

这个是程序
TPCtrlApp.rar (134.83 KB)
这个是源码
TPCtrlSrc.rar (156.21 KB)

我个人的定义方法是 VAIO是关屏幕 ASSIST是关闭触摸板...
效果就是按一下ASSIST就是关闭再按就开再按就关闭再按就开.....不影响开机自动恢复功能....且能够记忆触摸板状态...
(建议把原有的VAIOCare.exe 改成 VAIOCareApp.exe 美观大方)

来源：http://goo.gl/xA3r4

SNS网站个人相关信息

2011-06-27T17:53:00.000+08:00

SNS网站个人相关的信息应该分两个部分，“账户信息”和“个人资料”

1、“账户信息”：账户（也有叫帐号）的相关属性。

1）“账户”的目的是为了让用户管理自己注册这个网站的信息，因此最基本就是要包括注册邮箱，用户名，真实姓名等信息；以及密码修改的功能。

2）“帐户”还应包括作为全站大平台上的功能的设置，如站内用户间通信的权限、不在站时自动回复、邮件提醒，以及手机/MSN绑定等。

3）“隐私设置”从某种意义上来讲也应该属于账户管理，但是一般为了强调对人隐私的尊重都会单独显示。

它包括三个部分：

一是用户的各种信息资料的访问权限，也就是哪些个人资料可以被哪些人查看；

二是用户操作行为动态的显示，也就是在好友的新鲜事中那些可以被显示；

三是以人为单位屏蔽，也就是黑名单功能或者防骚扰功能，列入黑名单的人不会看到用户任何资料和信息。

因此，账户信息一旦设置以后则很少会被修改，是一个使用不频繁但是对用户来讲非常重要的功能。

使用的场景主要就是：修改密码；跨平台（手机/MSN）绑定的修改。

2、“个人资料”：显示在用户的个人空间，都是与这个人密切相关的资料，是这个人之所以区别于其他人的属性。它很像一个目的不是为了找工作而是为了交朋友的个人简历（如果假设来SNS网站的人有社交的诉求的话）。它主要包括以下几块内容：

1）个人基本信息：

需要回答你是谁（who）？（真实姓名，昵称，性别、生日、星座、体型、身高、职业、学历）

需要回答你从哪里来？在哪里（where）？（家乡、现居住地）

当然，更深一步的将这里也应该包括“生活方式”，比如婚姻状况、宗教信仰、抽烟喝酒习惯等，但这都是比较隐私密的项目，可以在显示上不那么明显。

2）自我介绍&兴趣爱好

需要回答你是个什么样的人（what）？也就是你自己对自己的介绍，性格、人生态度以及你想与什么样的人结交朋友。还要说一下有什么兴趣爱好，喜欢什么书、电影、音乐和偶像等。

越详细的介绍自己，越能让别人了解自己，越能增加网络上的信任感；而且详细的兴趣爱好介绍也可以网罗到更多志趣相投的朋友。

3）工作、学习经历

个人的学习、工作经历能够反映一个人的生活经历，也能够方便人们找到校友或同行。

4）空间头像、空间音乐

头像（尤其是大头照）毋庸置疑能够一目了然的让他人对自己有一个概括的了解；

空间音乐也能够展示空间主人的偏好，特定的音乐常常能代表特定的心境。

以上四大块内容中是一般SNS网站中包括的项目，主要功能是可以告诉陌生人你是谁？你从哪里来？你是怎样变成现在的你的？你的兴趣爱好？以及你长啥样？从而增进用户间的了解。

想想你在看别人的空间时，目光主要集中在哪些项目上呢？

头像？

姓名？性别？年龄？学校/工作？现居住地？家乡？

自我介绍？兴趣？单身？

但是对一个人整体来讲，除了后天教育以及后天经历外，还应该包括先天的性格，这一方面尽管在自我介绍里会有涉及，但是不够详细，而是用人格测试的，现在也多是纯速配交友的网站，如百合、世纪佳缘等，并且他们以专业的心理学测试来寻找匹配的人作为主要的卖点。

那么，如果性格匹配可以帮助人们找到另一半，那是否也可以帮人们找到好朋友呢？

这种性格测试作为个人资料在SNS网站中需要吗？

人们注册SNS的目的理想的应该是：

“保持维系旧有社交网络，发展建立新的社交网络。”

于是“个人资料”的设置以及引导应该为以上的理想，且主要为“发展建立新的社交网络”服务。

那么新来的用户会填写吗？会认真填写吗？

在什么情况下才会认真填写呢？

baihe等可以提供某人做了测试就找到了Mr.Right的成功案例，那么我们提供认真填写个人资料的用户就会结交到真朋友的实例会有说服力吗？

--------------------------

以上看来个人资料很重要，那么在显示怎样显示才能便于填写和修改呢？

目前来讲主要有两种形式：

a）单页显示：friendster.com

优点：在一页内显示，一目了然，便于查找，点击一次保存即可；

缺点：注定项目不能过多，即使精简也会单页过长，且如有网页意外很容易填了很多一下子都没了，且用户看到长长的一页也会感到很绝望。

b）单页收缩展开，如facebook的account

优点：可以在一个页面了解所包含的子项，并可以在单页内的下拉框中编辑；

缺点：如果包含比较复杂的子项则需要打开新窗口

c）左侧多tab形式，如雅虎空间

优点：符合传统的左侧导航布局

缺点：对于已有左侧全站导航的网站则不适合。

d）顶部多tab形式,如myspace.cn

优点：将各子项分类放置，比较清晰，在填写时如果是step by step引导的形式，则单页内容不多，更能鼓励用户填写完整。

缺点：分类过细不方面用户确定某分类名是否包含某子项；用户填写时需要一个tab一个tab的点击填写，比较麻烦，在初次填写时如果没有step by step的引导，则用户很难主动完成。

因此，或许tab（且有step by step引导）的形式更适合首次的填写，而单页的列表形式则更适合后期的修改管理。

本文来自：http://www.5gme.com/space-3227-do-blog-id-14622.html

[转]Google Reader API

2011-06-27T17:52:00.001+08:00

Google Reader 是一个使用了大量JavaScript构建的feed聚合器，它能非常及时地抓取最新的feed数据。Google的Ajax前台调用到的数据采用了Atom格式，这种数据技术降低了Google Reader的开发难度，同时也使得第三方应用很容易对其进行扩展。接下来我将带你提前预览Google Reader API。

晚上10:40更新：Google Reader的产品经理Jason Shellen告诉我Google是先建立feed的API，然后才在这些数据之上建立的程序，这无疑是一个如何利用这些数据的典范。Jason肯定了我接下来这些文档的准确性，而且宣称Google计划“很快”（有可能是一个月内）将发布一个关于feed的API。同时，Google Reader的工程师Chris Wetherell也确认了这些说法。

对新的聚合器开发者来说，由第三方提供的稳定可靠的feed解析服务能有效地降低其入门难度。Google和他们的工程师、服务器集群能够处理各种不同格式和验证状态的feed，使得开发者能把精力集中到交互体验和其他功能上来。你可以建立基于大量用户的应用，获取和同步他们的feed订阅列表，并且给用户提供基于不同设备和平台的更好体验。Google Reader本身只是给这些有用的数据提供了一种视图而已。

Google Reader对使用其feed系统的用户分配了20位数字构成的用户ID，用户各种数据的获取，都需要利用到domain为google.com下的名叫SID的cookie字段。

Feed获取

/reader/atom/feed/

不管feed一开始采用了什么格式，Google都将其转化为Atom格式。所有的RSS feed包含一切在提要里边出现的所有元素，这一点和My Yahoo! backend不一样，Yahoo的不包含任何附加的元数据。

你可以一下的格式从Google Reader访问任何feed：

http://www.google.com/reader/atom/feed/ + [Feed地址]
Niall Kennedy’s Weblog (RSS 2.0)
Niall’s Flickr feed (Atom 0.3)
del.icio.us popular (RDF)

你可以通过参数n设置返回的文章数量，默认为20。

Google忽略掉在阅读器里边没有用的数据，它们包括命名空间（如Apple iTunes podcast、Yahoo! MediaRSS的命名空间）、作者信息（如email、主页地址等）、甚至于版权等内容。

订阅列表

/reader/atom/user/[user id]/pref/com.google/subscriptions

Google Reader的feed订阅列表包含用户当前订阅的和已经被删除的订阅。每个feed包含其地址、发布和更新时间、用户标记的标签（如果有的话）。当前订阅都被归类到阅读列表状态。通过设置complete为true，你还可以获取到所有的feed列表。

这里是我在Google Reader用户ID全部为0的账户的订阅列表。我没有订阅我自己的RSS feed，不过给我的Atom feed打上了标签。不管在原feed里边是否声明了作者，在每个列出的feed包含author元素都是空的。也许Google计划增加feed的认领服务，不过即使是他们自己的Google Blog，也还是没有任何额外的作者信息。

阅读列表

/reader/atom/user[user id]/state/com.google/reading-list

我最喜欢Google Reader的阅读列表功能，它能直接访问到我订阅feed中所有未读的文章，以一种“新闻流”的方式展现它们。

这里有一个我的阅读列表的例子，你同样可以通过参数n设置返回文章的数量。

已阅读文章

http://www.google.com/reader/atom/user/[user ID]/state/com.google/read

你可以通过这个API获取到用户在Google Reader里边已读的文章。如果想通过用户最近阅读的100篇文章分析其趋势或者实现对它们的查询，那么这个功能就很有用了。参数n同样可以设置返回的文章数量。

某标签下的文章列表

/reader/atom/user/[user id]/label/[tag]

你还可以查看指定标签下最近发表的文章。比如你把很多feed标记为“营销”，只是想访问有关营销的feed，这就很有用了。返回的内容中包含已读和未读的文章。已读的文章被归类到已读（state/com.google/read），你可以通过这判断是否将它们隐藏起来。返回的数量可以通过参数n来判断。

标星文章

/reader/atom/user[user id]/state/com.google/starred

Google Reader允许用户对文章标星。这些标星文章包括有feed地址、标签、发布/更新时间。你可以通过参数n指定返回的数量，默认为20。

Google将标星项目视作一种特殊的标签，因此输出的内容和标签下文章列表结构一致。

添加或删除订阅

/reader/api/0/edit-subscription

使用POST请求访问Google Reader的API，你可以添加任何feed到Google Reader的订阅列表。

/reader/api/0/edit-subscription -- 基本地址
ac=["subscribe" 或者 "unsubscribe"] -- 请求动作
s=feed%2F[feed URL] -- 请求的订阅
T=[命令标识] -- Google发布的具有时效性的标识，可以通过/reader/api/0/token获取。

添加标签

/reader/api/0/edit-tag

通过HTTP的POST请求可以给一个feed或单独的文章打上标签。

/reader/api/0/edit-tag -- 基本地址
s=feed%2F[feed URL] -- 你想打标签的feed地址
i=[item id] -- 出现在feed中的文章的id，可选，用来给个别的文章打标签。
a=user%2F[user ID]%2Flabel%2F[标签] -- 请求动作，添加标签给feed，文章，或者两者。
a=user%2F[user ID]%2Fstate%2Fcom.google%2Fstarred -- 标星文章。
T=[special scramble] -- 关于用户和新标签的信息。可能处于安全因素考虑，尚未公开。

总结

基于对Google上面这些和县官服务的请求，你有可能构建自己的feed阅读器。你可以把Google作为你的后台，创建具有全新体验的在线和离线的程序，利用Google的ID，略施小计，你还可以创建更加高级的功能。

Google已经在这些数据API之上建立了第一个程序——Google Reader，从他们对API地址的选择之上来看的话，Google Reader应该不是最后一个基于这些数据集的程序。我喜欢数据调用的开放，Google Reader 的API是如此简单，相信会引导Google和第三方开发者创建更多的新应用！

参考资料：http://code.google.com/p/pyrfeed/wiki/GoogleReaderAPI

来源:http://goo.gl/4DPjY

[转]通过GR API获取更多RSS条目

2011-06-27T17:51:00.000+08:00

有时候你看到了一个好的Blog，于是你订阅了它，但你会发现，如果直接访问订阅的RSS源，它只会返回最新的10-20条内容，这是由 Blog服务器决定的。如果偶们非常希望能够看到它以前所有的文章，怎么办呢？

订阅至Google Reader是个好办法，Google Reader发现你希望看到更多条目的时候，自动会获取更多的历史条目。这是怎么做到的呢？原来Google童鞋已经爬了多年的网络了，它所爬到的信息都存在它的数据库里，所以其实当Google Reader提供给你这些历史条目的时候，它实际上是从它所爬到的数据库中提取出来的。但有时候使用Google Reader也不够方便啦，因为它是增量式提供给你信息的，如果这时候希望获得所有的条目，用Google Reader一小段一小段地去取实在太过麻烦。今天发现了一个方法，很有效，很方便，推荐给各位童鞋。

假设现在希望获得所有的Visual C++ Blog的文章，它所提供的RSS链接是

http://blogs.msdn.com/vcblog/rss.xml

那么，召唤Google童鞋~

http://www.google.com/reader/atom/feed/http://blogs.msdn.com/vcblog/rss.xml?n=100

看清楚咯，http://www.google.com/reader/atom/feed/ + 你的RSS + ?n= + 你所需要的条目数量

通过这个API，Google Reader就会把它数据库里关于这个feed的条目根据你所需要的数量以Atom的格式返回给你。如果你想要所有的条目，很简单，设n=999999就行了...简单估计一下，一个Blog开20年每天100篇发布的话也不会超过这个数字的，所以放心吧~

当然这里还有个小问题，如果我的feed的url中含有一个问号"?"怎么办？比如这个feed

http://www.gmazars.info/conf/rss/rss_builder.php?feed=gmazars.xml

如果直接访问http://www.google.com/reader/atom/feed/http: //www.gmazars.info /conf/rss/rss_builder.php?feed=gmazars.xml?n=100这个url，Google会告诉你，内部服务器错误。解决方法也很简单，用HTML Encoding把"?"符号Encoding掉就好了，去查了一下编码表，"?"对应%3F，所以说，用这个url访问就OK啦

http://www.google.com/reader/atom/feed/http://www.gmazars.info/conf/rss/rss_builder.php%3Ffeed=gmazars.xml?n=100

拿到了这个xml之后你就可以用你喜欢的方式来显示它了，比如用一个xsl样式，或者自己写一个小程序就行啦~

特殊符号的显示

2011-06-27T17:49:00.000+08:00

空格的显示

在HTML/XHTML文档中空格被解释为分隔符，所以对于行首的空格会被忽略，行内的多个连续的空格会被合并为一个空格显示，所以对于文档中需要显示空格的地方需要进行特别处理。

方案一：使用全角空格。

全角空格被解释为汉字，所以不会被忽略，可以按照实际的空格数显示。

注：如果你要在网页中显示一段代码，最好不要使用全角空格，这种代码复制下来后是不能使用的。

方案二：使用替代符号。

替代符号就是在需要显示空格的地方加入替代符号，这些符号会被浏览器解释为空格显示。

空格的替代符号有以下几种：

名称	编号	描述
		不断行的空白（1个字符宽度）
&ensp;		半个空白（1个字符宽度）
&emsp;		一个空白（2个字符宽度）
		窄空白（小于1个字符宽度）

可以用名称或编号作为空格的替代符号，名称必须小写，末尾的";"不能省略。如：

代码	效果
欢 迎 光 临！	欢迎光临！
欢&ensp;迎&ensp;光&ensp;临！	欢迎光临！
欢&emsp;迎&emsp;光&emsp;临！	欢迎光临！
欢 迎 光 临！	欢迎光临！

特殊符号的显示

在HTML/XHTML中，有些符号已经有一定的意义，所以在需要显示它们时，可能会被浏览器解释为源代码而无法正常显示，如：<>&" 等符号。还有一些符号是很难用键盘输入的特殊符号，如：©®×÷∈™♥ 等。对于这些符号都可以用替代符号显示。

常用替代符号：

符号	描述	实体名称	实体编号
"	引号	"	"
&	&	&	&
<	小于	<	<
>	大于	>	>
©	版权	©	©
®	已注册	®	®
™	商标	™	™

可以用实体名称或实体编号作为替代符号，实体名称对大小写敏感，末尾的";"不能省略。

国内外DNS服务器地址

2011-06-08T08:59:00.001+08:00

全球路由DNS服务器
全球只有13台路由DNS服务器（Route Server),在13台路由服务器中，名字分别为“A”至“M”，其中10台设置在美国，另外各有一台设置于英国、瑞典和日本。下表是这些机器的管理单位、设置地点及最新的IP地址。http://koogou.net其中，IP地址等参考了“named.root”文件:
名称　　管理单位及设置地点　　　　IP地址
A INTERNIC.NET（美国，弗吉尼亚州） 198.41.0.4
B 美国信息科学研究所（美国，加利弗尼亚州） 128.9.0.107
C PSINet公司（美国，弗吉尼亚州） 192.33.4.12
D 马里兰大学（美国马里兰州） 128.8.10.90
E 美国航空航天管理局[NASA]（美国加利弗尼亚州） 192.203.230.10
F 因特网软件联盟（美国加利弗尼亚州） 192.5.5.241
G 美国国防部网络信息中心（美国弗吉尼亚州） 192.112.36.4
H 美国陆军研究所（美国马里兰州） 128.63.2.53
I Autonomica公司（瑞典，斯德哥尔摩） 192.36.148.17
J VeriSign公司（美国，弗吉尼亚州） 192.58.128.30
K RIPE NCC（英国，伦敦） 193.0.14.129
L IANA （美国，弗吉尼亚州） 198.32.64.12

Google DNS
8.8.8.8
8.8.4.4

OpenDNS
208.67.222.222
208.67.220.220

NortonDNS
198.153.192.1
198.153.194.1

国外DNS服务器地址

美国
4.2.2.1
4.2.2.2
165.87.13.129
165.87.201.244
205.171.3.65
205.171.2.65
198.41.0.4
198.41.0.4
198.32.64.12
192.33.4.12
192.203.230.10
192.5.5.241
192.112.36.4
192.36.148.17
192.58.128.30
192.9.9.3
193.0.14.129
128.9.0.107
128.8.10.90
66.33.206.206.
208.96.10.221
66.33.216.216
208.67.222.222
208.67.220.220
205.171.3.65
205.171.2.65
165.87.13.129
165.87.201.244

加拿大
209.166.160.36
209.166.160.132

泰国
202.44.8.34
202.44.8.2

印度
202.138.103.100
202.138.96.2

英国
193.0.14.129

日本
202.12.27.33
202.216.228.18

韩国
164.124.101.31
203.248.240.31
168.126.63.60
168.126.63.61

新西兰
202.27.184.3

加拿大
209.166.160.36

泰国
209.166.160.132
202.44.8.34
202.44.8.2

全国各地电信DNS服务器地址
北京：
202.96.199.133
202.96.0.133
202.106.0.20
202.106.148.1
202.97.16.195
202.138.96.2

上海：
202.96.199.132
202.96.199.133
202.96.209.5
202.96.209.133

天津：
202.99.96.68
10.10.64.68
广东：
202.96.128.143
202.96.128.68
202.96.128.110
深圳：
202.96.134.133
202.96.154.8
202.96.154.15
黑龙江：
202.97.229.133
202.97.224.68
219.150.32.132
河南：
202.102.227.68
202.102.245.12
202.102.224.68
广西：
202.96.128.68
202.103.224.68
202.103.225.68
福建：
202.101.98.54
202.101.98.55
厦门：
202.101.103.55
202.101.103.54
湖南：
202.103.0.68
202.103.96.68
202.103.96.112
江苏：
202.102.15.162
202.102.29.3
202.102.13.141
202.102.24.35
江苏省南京（中国电信）
首选DNS为：218.2.135.1
备用DNS为：61.147.37.1
江苏南京（联通）
dns.jsnj.cnuninet.net 211.90.88.129
陕西：
202.100.13.11
202.100.4.16
西安：
202.100.4.15
202.100.0.68
湖北：
202.103.0.68
202.103.0.117
202.103.24.68
山东：
202.102.154.3
202.102.152.3
202.102.128.68
202.102.134.68
浙江：
202.96.102.3
202.96.96.68
202.96.104.18
辽宁：
202.98.0.68
202.96.75.68
202.96.75.64
202.96.69.38
202.96.86.18
202.96.86.24
安徽：
202.102.192.68
202.102.199.68
10.89.64.5
重庆：
61.128.128.68
10.150.0.1
河北：
202.99.160.68
10.17.128.90
保定：
202.99.160.68
202.99.166.4
吉林：
202.98.5.68
202.98.14.18
202.98.14.19
江西：
202.101.224.68
10.117.32.40
202.109.129.2
202.101.240.36
山西：
202.99.192.68
202.99.198.6
新疆：
61.128.97.74
61.128.97.73
贵州：
202.98.192.68
10.157.2.15
云南：
202.98.96.68
202.98.160.68
四川：
202.98.96.68
61.139.2.69
重庆：
61.128.128.68
61.128.192.4
成都：
202.98.96.68
202.98.96.69
内蒙古：
202.99.224.68
10.29.0.2
青海：
202.100.128.68
10.184.0.1
海南：
202.100.192.68
202.100.199.8
宁夏：
202.100.0.68
202.100.96.68
甘肃：
202.100.72.13
10.179.64.1
香港：
205.252.144.228
208.151.69.65
202.181.202.140
202.181.224.2
台湾：
168.95.192.1
168.95.1.1
澳门：
202.175.3.8
202.175.3.3

各大网站DNS列表

天府热线DNS：61.139.2.69

长春163　　：202.98.0.68
202.98.3.68

263在线　　：211.100.2.130
211.100.1.10

中国万网　：210.79.232.248
DNS　　：210.192.103.50　　 (dns1.hichina.com)
DNS　　：202.106.169.100　　(dns2.hichina.com)

新网　　　：211.99.199.194
：211.99.199.195

263IDC　　：211.100.2.130　　(NS.263IDC.COM)
：211.100.1.10 　　(NSB.263IDC.COM)

教育网内的DNS服务器
202.114.64.2武大DNS1 （一区）
202.114.96.1 武大DNS2 （二区）
202.114.96.2 武大DNS3 （二区）
202.114.112.13 武大DNS4 （三区）
202.114.0.242 server20.hust.edu.cn 华工DNS
202.112.0.35 dns.hust.edu.cn 华工DNS2
202.112.20.131 dns.whnet.edu.cn 华中地区网络中心DNS
166.111.8.28 dns-a.tsinghua.edu.cn清华DNS1
166.111.8.29 dns-b.tsinghua.edu.cn清华DNS2
166.111.8.30 dns.tsinghua.edu.cn 清华DNS
166.111.168.12清华DNS
202.117.0.20 dec3000.xjtu.edu.cn 西交DNS1
202.117.0.21 ns2.xjtu.edu.cn 西交DNS2
202.112.26.34上交
202.112.112.100 人大
162.105.129.27北大
202.203.128.33 cernet云南中心主dns
202.203.128.34
202.115.64.33 and 202.115.64.34 西南交大
202.201.48.1 and 202.201.48.2 nwnu
210.33.116.112 浙江电大
202.116.160.33 华南农业
202.114.240.6 wust
202.194.48.130 ytnc
202.112.0.33 and 202.112.0.34 cernet 华北网

教育网段IPv6用户可以更改DNS为
2001:4860:4860::8888
2001:4860:4860::8844

让IE支持RGBa的背景色

2010-11-23T20:44:00.005+08:00

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#FFAABBCC', endColorstr='#FFAABBCC');

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。

RGBa颜色可以用于border，不过，不同的浏览器对于border的RGBa支持不太一样，不过唯一的不同是，FF在border的拐角处会出现叠加，比如透明度是0.4，那么在FF中，四个角的透明度会变成0.8，而支持RGBa的非FF浏览器不会出现这种情况。

参考：
RGBa色彩的浏览器支持
让IE支持RGBa的背景色
工具：CSS背景颜色属性值转换

Opacity兼容性
.opacity {

/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width:100%;

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity:0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity:0.5;
}

常用的JavaScript验证正则表达式

2010-11-23T20:43:00.000+08:00

匹配中文字符的正则表达式： [u4e00-u9fa5]

评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在内)：[^x00-xff]

评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式：ns*r

评注：可以用来删除空白行

匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? />

评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^s*|s*$

评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式



匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^s]*

评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

评注：表单验证时很实用

匹配国内电话号码：d{3}-d{8}|d{4}-d{7}

评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]{4,}

评注：腾讯QQ号从10000开始

匹配中国邮政编码：[1-9]d{5}(?!d)

评注：中国邮政编码为6位数字

匹配身份证：d{15}|d{18}

评注：中国的身份证为15位或18位

匹配ip地址：d+.d+.d+.d+

评注：提取ip地址时有用

匹配特定数字：

^[1-9]d*$　　 //匹配正整数

^-[1-9]d*$ 　 //匹配负整数

^-?[1-9]d*$　　 //匹配整数

^[1-9]d*|0$　 //匹配非负整数（正整数 + 0）

^-[1-9]d*|0$　　 //匹配非正整数（负整数 + 0）

^[1-9]d*.d*|0.d*[1-9]d*$　　 //匹配正浮点数

^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配负浮点数

^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮点数

^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）

^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$　　//匹配非正浮点数（负浮点数 + 0）

评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：

^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串

^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串

^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串

^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串

^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串

在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:

只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，

只能包含字符、数字和下划线。

验证是否含有^%&’,;=?$”等字符：“[^%&',;=?$x22]+”

只能输入汉字：“^[u4e00-u9fa5],{0,}$”

验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”

验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”

验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”

正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，

“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。

验证身份证号（15位或18位数字）：“^d{15}|d{}18$”

验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”

验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”

正确格式为：“01”“09”和“1”“31”。

匹配中文字符的正则表达式： [u4e00-u9fa5]

匹配双字节字符(包括汉字在内)：[^x00-xff]

匹配空行的正则表达式：n[s| ]*r

匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/

匹配首尾空格的正则表达式：(^s*)|(s*$)

匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?

(1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^x00-xff]/g,”aa”).length;}

(2)应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现

String.prototype.trim = function()

{

return this.replace(/(^s*)|(s*$)/g, “”);

}

(3)应用：利用正则表达式分解和转换IP地址

function IP2V(ip) //IP地址转换成对应数值
{
re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error(”Not a valid IP address!”)
}
}

(4)应用：从URL地址中提取文件名的javascript程序
s=”http://www.9499.net/page1.htm”;
s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ; //Page1.htm

(5)应用：利用正则表达式限制网页表单里的文本框输入内容

用正则表达式限制只能输入中文：onkeyup=”value=”/blog/value.replace(/["^u4E00-u9FA5]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^u4E00-u9FA5]/g,”))”

用正则表达式限制只能输入全角字符： onkeyup=”value=”/blog/value.replace(/["^uFF00-uFFFF]/g,”) ” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^uFF00-uFFFF]/g,”))”

用正则表达式限制只能输入数字：onkeyup=”value=”/blog/value.replace(/["^d]/g,”) “onbeforepaste= “clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”))”

用正则表达式限制只能输入数字和英文：onkeyup=”value=”/blog/value.replace(/[W]/g,””) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”

搞定IE的最重要CSS技巧

2010-11-23T20:42:00.000+08:00

众所周知道，IE向来是我们在制作网页时最难搞定的对手。但又迫于其用户群数量之多，我们不得不想法设法搞定它。下面，将介绍的将是利用其特点而被发现/创造出来的CSS技巧。让你轻松搞定这个难对付的家伙。

IE注释：最安全的HACK IE的途径
这应该是我最常用的方法了，一般情况下，我们现在已经不用考虑IE5或者以下的浏览器了，这个注释让我们可以轻松HACK IE，并且它是最安全的方法，因为别的浏览器不会显示/识别它（这里应该感谢微软的细心，即使他精粗心在先）。
至于IE8 beta，以其为主浏览器的用户算起来应该不到K级，也暂时不是我们应该搞定的对象（当然，搞定它是最好不过的事）。或者我们应该把希望放在他正式版对CSS完美的支持，而现在我们把最重要的放在搞定IE6
/IE7，区分它们，我最常用的是下面的代码：
#forieothers{...} // 用这个搞定IE7
*html #forie6{…} // 当然，这是写给IE6的
而你需要注意的就是，别把它们的顺序写倒了，因为#forieothers这个是会被IE6看到的，而根据CSS书写顺序的优先性，应该把让*html #forie6写在后面，让浏览器最终显示它，但IE7又看不到。
让IE6支持PNG透明图片
#regular_logo{
background:url(‘test.png’); width:150px; height:55px;
}
/* \ */
*html #regular_logo{
background:none;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.png’, sizingMethod=’scale’);
}
注："test.png"是相对于html文档的路径。
让IE6支持min-width/max-width
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}
这应该是非常重要的技巧，也是比较常用的。就像，你以前可能用了太大的图片，但现在又想用一个栏比较小的主题，这时，这个方法就显得异常重要。抑或是，如果你想创建一个流体布局，这个代码对你来说是必不可少的。

当然，这三个并不能让你搞定所有IE的问题。不过，这应该是最重要的。IE注释通常被CSS新手忽略，而IE6显示透明PNG和IE6支持最小/最大宽度是难点。好吧，我想，看到这里，或许你已经学会了，或者，至少知道这是解决方法。但或许还有一句话你应该记住：少骂IE，完善自己！

link:http://www.happinesz.cn/archives/475/

//ie6 max-width max-height
if( $.browser.msie && $.browser.version == 6.0){
var maxWidth = parseInt($(".hot-album .photo-figure a img").css("max-width"));
var maxHeight = parseInt($(".hot-album .photo-figure a img").css("max-height"));
$(".hot-album .photo-figure a img").each(function(){
if ($(this).width() > maxWidth){$(this).width(maxWidth);}
else if ($(this).height() > maxHeight){$(this).height(maxHeight);}
});
}

my CSS Reset

2010-11-23T20:40:00.004+08:00

/** CSS Reset **/
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, th, td { margin:0; padding:0; vertical-align:baseline; }
body {width:100%; font:normal 12px/18px tahoma, arial, \5b8b\4f53, sans-serif; color:#333; background-color:#F5F5F5; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
table { border-collapse:collapse; border-spacing:0; }
:link, :visited { text-decoration:none; }
a { color:#005eac; text-decoration:none; outline:none; cursor:pointer; }
a:hover { color:#08a5bb; text-decoration:none; }
img { border:0; vertical-align:middle;}
ul, ol { list-style-type:none; }
caption, th { text-align:left; }
html { overflow-y:scroll; }
textarea { resize:none; }
:focus{ outline:0;}
input[type=text]:focus, input[type=password]:focus, textarea:focus { border:1px solid #ccc; }
input[type=text],input[type=password],textarea { border:1px solid #ccc; }
/** CSS Lib **/
.clear { clear:both; height:0; line-height:0; font-size:0; }
.clearfix:after { content:" "; display:block; height:0; line-height:0; font-size:0; clear:both; visibility:hidden; }
.clearfix { zoom:1;}
/* site */
.l { float:left; }
.r { float:right; }
.cl { clear:both; }
.clr { clear:right; }
.dib{ display:inline-block; *display:inline; zoom:1;}
.dib img{ *display:block;}
.dno{ display:none;}
.vat{ vertical-align:top;}
.vam{ vertical-align:middle;}
.b { font-weight:bold; }
.bwn { font-weight:normal; }
.alL{ text-align:left;}
.alC{ text-align:center;}
.alR{ text-align:right;}
.f10{ font-size:10px;}
.f12{ font-size:12px;}
.f14{ font-size:14px;}
.f16{ font-size:16px;}
.lh22{ line-height:22px;}
.lh30{ line-height:30px;}
.cf00{ color:#f00;}
.cfff{ color:#fff;}
.pr{ position:relative; }
.pa { position:absolute; }
.f0 { font-size:0; line-height:0;}
.m0 { margin:0; }
.m1 { margin:1px; }
.ml1 { margin-left:1px; }
.mr1 { margin-right:1px; }
.mt1 { margin-top:1px; }
.mb1 { margin-bottom:1px; }
.m2 { margin:2px; }
.ml2 { margin-left:2px; }
.mr2 { margin-right:2px; }
.mt2 { margin-top:2px; }
.mb2 { margin-bottom:2px; }
.m3 { margin:3px; }
.ml3 { margin-left:3px; }
.mr3 { margin-right:3px; }
.mt3 { margin-top:3px; }
.mb3 { margin-bottom:3px; }
.m5{ margin:5px;}
.mr5 { margin-right:5px; }
.ml5 { margin-left:5px; }
.mt5 { margin-top:5px; }
.mb5 { margin-bottom:5px; }
.m10{ margin:10px;}
.ml10 { margin-left:10px; }
.mr10 { margin-right:10px; }
.mt10 { margin-top:10px; }
.mb10 { margin-bottom:10px; }
.m15{ margin:15px;}
.ml15 { margin-left:15px; }
.mr15 { margin-right:15px; }
.mt15 { margin-top:15px; }
.mb15 { margin-bottom:15px; }
.m20{ margin:20px;}
.ml20 { margin-left:20px; }
.mr20 { margin-right:20px; }
.mt20 { margin-top:20px; }
.mb20 { margin-bottom:20px; }
.m25{ margin:25px;}
.ml25 { margin-left:25px; }
.mr25 { margin-right:25px; }
.mt25 { margin-top:25px; }
.mb25 { margin-bottom:25px; }
.m30 { margin:30px; }
.ml30{ margin-left:30px; }
.mr30 { margin-right:30px; }
.mt30 { margin-top:30px; }
.mb30 { margin-bottom:30px; }
.m35 { margin:35px; }
.ml35{ margin-left:35px; }
.mr35 { margin-right:35px; }
.mt35 { margin-top:35px; }
.mb35 { margin-bottom:35px; }
.m40 { margin:40px; }
.ml40{ margin-left:40px; }
.mr40 { margin-right:40px; }
.mt40 { margin-top:40px; }
.mb40 { margin-bottom:40px; }
.p0 { padding:0; }
.p1 { padding:1px; }
.p2 { padding:2px; }
.p3 { padding:3px; }
.p4 { padding:4px; }
.pl3 { padding-left:3px; }
.pt3 { padding-top:3px; }
.pr3 { padding-right:3px; }
.pb3 { padding-bottom:3px; }
.p5 { padding:5px; }
.pl5 { padding-left:5px; }
.pt5 { padding-top:5px; }
.pr5 { padding-right:5px; }
.pb5 { padding-bottom:5px; }
.p10 { padding:10px; }
.pl10 { padding-left:10px; }
.pt10 { padding-top:10px; }
.pr10 { padding-right:10px; }
.pb10 { padding-bottom:10px; }
.p15 { padding:15px; }
.pl15 { padding-left:15px; }
.pt15 { padding-top:15px; }
.pr15 { padding-right:15px; }
.pb15 { padding-bottom:15px; }
.p20 { padding:20px; }
.pl20 { padding-left:20px; }
.pt20 { padding-top:20px; }
.pr20 { padding-right:20px; }
.pb20 { padding-bottom:20px; }
.p25 { padding:25px; }
.pl25 { padding-left:25px; }
.pt25 { padding-top:25px; }
.pr25 { padding-right:25px; }
.pb25 { padding-bottom:25px; }
.p30 { padding:30px; }
.pl30 { padding-left:30px; }
.pt30 { padding-top:30px; }
.pr30 { padding-right:30px; }
.pb30 { padding-bottom:30px; }
.p35 { padding:35px; }
.pl35 { padding-left:35px; }
.pt35 { padding-top:35px; }
.pr35 { padding-right:35px; }
.pb35 { padding-bottom:35px; }
.p40 { padding:40px; }
.pl40 { padding-left:40px; }
.pt40 { padding-top:40px; }
.pr40 { padding-right:40px; }
.pb40 { padding-bottom:40px; }

IE滤镜：Glow,Shadow

2010-11-23T20:40:00.003+08:00

Glow:环绕对象内容边缘添加辉光制作发热效果

/* hack for ie */
background:#fff;

/* gte ie8 */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#eeeeee,strength=3)"; 

/* lte ie7 */  
*filter:progid:DXImageTransform.Microsoft.Glow(color=#eeeeee ,strength=3);

Shadow:为对象内容建立阴影效果
/* hack for ie */
background-color:#fff;

/* gte ie8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";

/* lte ie7 */
*filter:progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);

假如对象内有文本而无背景( background )和图片，则每个文本字符将会被辉光环绕。
假如对象内有背景( background )或图片，则整个对象容器会被辉光环绕。
假如对象的子对象定位超出了对象边界，则仅仅在对象容器内的内容会被辉光环绕。

border-radius

2010-09-06T21:17:00.000+08:00

浏览器参照基准：Firefox3.6+, Chrome5+, Safari5+, Opera10.53+, IE系列不做参考

全圆角（四个圆角的大小相同,每个圆角的半径都为10px）

#border-radius-one{
 -moz-border-radius:10px;               /* For Firefox3.6+ */
 border-radius:10px;                    /* For Latest Opera, Chrome, Safari */
}

左上圆角（左上圆角半径为10px）

#border-top-left-radius{
 -moz-border-radius-topleft:10px;       /* For firefox3.6+ */
 border-top-left-radius:10px;           /* For Latest Opera, Chrome, Safari */
}

两个值（第1个值代表左上和右下圆角，第2个值代表右上和左下圆角）

#border-radius-two{
 -moz-border-radius:10px 20px;      /* For firefox3.6+ */
 border-radius:10px 20px;          /* For Latest Opera, Chrome, Safari */
}

三个值（第1个值代表左上圆角，第2个值代表右上圆角和左下圆角，第3个值代表右下圆角）

#border-radius-three{
 -moz-border-radius:10px 30px 20px;   /* For firefox3.6+ */
 border-radius:10px 30px 20px;       /* For Latest Opera, Chrome, Safari */
}

四个值（4个值分别代表：左上，右上，右下，左下圆角）

#border-radius-four{
 -moz-border-radius:10px 20px 30px 40px;    /* For firefox3.6+ */
 border-radius:10px 20px 30px 40px;        /* For Latest Opera, Chrome, Safari */
}

不规则圆角(第一个值是水平半径。第二个值是垂直半径,如果省略,则它等于第一个值)

#border-irregular-radius{
 -moz-border-radius-topleft:30px 50px;    /* For firefox3.6+ */
 border-top-left-radius:30px 50px;        /* For Latest Opera, Chrome, Safari */
}

圆角的一个小变通（画圆）：border-radius/-moz-border-radius

上圆代码

#border-circle-radius{
 width:100px;
 height:100px;
 -moz-border-radius:50px;               /* For Firefox3.6+ */
 border-radius:50px;                    /* For Latest Opera, Chrome, Safari */
}

CSS3 动画技术

2010-09-05T19:23:00.000+08:00

变形(transformation)、变换(transition)和动画(animation)

CSS 变形(Transformation)

transform

rotateRotate(旋转)允许你通过传递一个度数值来转动一个对象。
scaleScale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
translateTranslate就是基于X和Y 坐标重新定位元素
skew顾名思义，skew就是要将对象倾斜，参数是度数
matrixtransform支持矩阵变换，就是基于X和Y 坐标重新定位元素

Rotate(旋转)

#nav{
    -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
 -o-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

请注意在IE8中(非标准模式)它需要你写成"-ms-filter"而不是"filter"。

scale(缩放)

#nav{  
 /* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */
   -webkit-transform:scale(-2, 1);
   -moz-transform:scale(-2, 1);
   -o-transform:scale(-2, 1);
}

负数值并不会缩小元素，而是翻转它(比如，文字被反转)然后相应的缩放它。

translate(重新定位)

#nav{
 /* 这会将nav元素向左移动10像素并向下移动20像素 */
 -moz-transform:translate(10px, 20px);
 -webkit-transform:translate(10px, 20px);
 -o-transform:translate(10px, 20px);
}

Skew(倾斜)

#nav{
 /* 这会将nav元素向左移动10像素并向下移动30像素 */
 -moz-transform:skew(30deg, -10deg);
 -webkit-transform:skew(30deg, -10deg);
 -o-transform:skew(30deg, -10deg);
}

Matrix(矩阵变换)

链式变形

#nav{
 -moz-transform:translate(10, 25) rotate(90deg) scale(2, 1);
 -webkit-transform:translate(10, 25) rotate(90deg) scale(2, 1);
 -o-transform:translate(10, 25) rotate(90deg) scale(2, 1);
}

transform-origin(用来指定transform的起点)

transition(变换)

变换通过改变不同元素状态之间的一个时间段内的样式来起作用

动态伪类	起作用的元素	描述
:link	只有链接	未访问的链接
:visited	只有链接	访问过的链接
:hover	所有元素	鼠标经过元素
:active	所有元素	鼠标点击元素
:focus	所有可被选中的元素	元素被选中
None	所有元素	所有元素的默认状态

transition-property指定变换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。
transition-duration定义变换花费的时间（从旧属性换到新属性花费的时间）
transition-timing-function可以理解为过度效果。指定变换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out。

名称	如何工作
cubic-bezier(x1, y1, x2, y2)	X 和 Y 值在0到1之间，以定义用于Time function的贝塞尔曲线的形状。
linear	均速
ease	逐渐慢下来
ease-in	加速(渐入)
ease-out	减速(淡出)
ease-in-out	加速然后减速

transition-delay这个比较容易理解，就是变换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，变换的动作会从该时间点开始显示，之前的动作被截断。

多重变换可以在同一个变换属性定义中用逗号隔开。如果在同一个CSS规则中添加多个变换实例，那么最后的那个将会覆盖前面的。

a:hover {
 color: red;
 background-color: rgb(235,235,185);
 -webkit-transition: color .25s linear;
 transition: color .25s linear;
 -webkit-transition: background-color .15s linear .1;
 transition: background-color .15s linear .1;
}

可以赋予变换的CSS属性列表，附带转变的对象，高亮了一些比较有用的属性

CSS属性	改变的对象
background-color	色彩
background-image	只是渐变
background-position	百分比，长度
border-bottom-color	色彩
border-bottom-width	长度
border-color	色彩
border-left-color	色彩
border-left-width	长度
border-right-color	色彩
border-right-width	长度
border-spacing	长度
border-top-color	色彩
border-top-width	长度
border-width	长度
bottom	百分比，长度
color	色彩
crop	百分比
font-size	百分比，长度
font-weight	数字
grid-*	数量
height	百分比，长度
left	百分比，长度
letter-spacing	长度
line-height	百分比，长度，数字
margin-bottom	长度
margin-left	长度
margin-right	长度
margin-top	长度
max-height	百分比，长度
max-width	百分比，长度
min-height	百分比，长度
min-width	百分比，长度
opacity	数字
outline-color	色彩
outline-offset	整数
outline-width	长度
padding-bottom	长度
padding-left	长度
padding-right	长度
padding-top	长度
right	百分比，长度
text-indent	百分比，长度
text-shadow	阴影
top	百分比，长度
vertical-align	百分比，长度，关键词
visibility	可见性
width	百分比，长度
word-spacing	百分比，长度
z-index	正整数
zoom	数字

全部变换

*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
 color .25s linear,
 background-color .25s linear,
 border-color .25s linear;
transition:
 color .25s linear,
 background-color .25s linear,
 border-color .25s linear;
}

Animation(动画)

animation-name动画的名称。
animation-duration定义动画播放一次需要的时间。默认为0；
animation-timing-function定义动画播放的方式，参数设置类似transition-timing-function
animation-delay定义动画开始的时间
animation-iteration-count定义循环的次数，infinite即为无限次。默认是1。
-webkit-animation-direction动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

#rotate {
 margin:0 auto;
 width:600px;
 height:400px;
 /* 确保我们是在一个 3-D 空间 */
 -webkit-transform-style:preserve-3d;
 /*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
 -webkit-animation-name:x-spin;
 -webkit-animation-duration:7s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:linear;
} 
/* 定义要调用的动画 */
 @-webkit-keyframes x-spin {
 0% { -webkit-transform:rotateX(0deg); }
 50% { -webkit-transform:rotateX(180deg); }
 100% { -webkit-transform:rotateX(360deg); }
}

Link:http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html

http://www.qianduan.net/css-transitions-101.html

Blogger 模板优化

2009-12-12T17:56:00.000+08:00

步骤一: 首先在样式表中添加代码：

.post-body2{
border:0;
width:auto;
max-height:160px;
overflow:hidden;
text-overflow:ellipsis;
}

步骤二:找到代码<data:post.body/>，改为：

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div class='post-body2'>
<data:post.body/>
</div>
<p><a expr:href='data:post.url' title='阅读全文'><b>[阅读全文]</b></a></p>
</b:if>

文章标题优化：(更改后文章名在前，Blogger名称在后)
将 <title><data:blog.pageTitle/></title>

替换为：

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

去除上方横条
在/* Content */ 後面加上如下的CSS
.navbar {visibility:hidden;display:none;}

Alpha,Beta,RC 等版本号含义

2009-12-12T03:30:00.000+08:00

版本号：
V（Version）：即版本，通常用数字表示版本号。
Build：编译号，用以区分不同的测试包,一般用数字或日期标示。
SP：Service　Pack，升级包。如:Windows　XP　SP3

授权和功能划分：
Trial：试用版，通常都有时间限制，有些试用版软件还在功能上做了一定的限制。可注册或购买成为正式版。
Unregistered：未注册版，通常没有时间限制，在功能上相对于正式版做了一定的限制。可注册或购买成为正式版。
Demo：演示版，仅仅集成了正式版中的几个功能，不能升级成正式版。
Lite：精简版。
Full version：完整版，属于正式版。

语言划分：
SC：Simplified　Chinese简体中文版。
CN　：　简体中文版
GBK：简体中文汉字内码扩展规范版。
TC：Traditional　Chinese繁体中文版。
CHT　：　繁体中文版
BIG5：繁体中文大五码版。
EN　：　英文版
Multilanguage　：　多语言版
UTF8：Unicode　Transformation　Format　8　bit，对现有的中文系统不是好的解决方案。

开发阶段划分：
α（Alpha）版：内测版，内部交流或者专业测试人员测试用。Bug较多，普通用户最好不要安装。
β（Beta）版：公测版，专业爱好者大规模测试用，存在一些缺陷，该版本也不适合一般用户安装。
γ（Gamma）版：相当成熟的测试版，与即将发行的正式版相差无几。
RC版：是 Release Candidate 的缩写，意思是发布倒计时，候选版本，处于Gamma阶段，该版本已经完成全部功能并清除大部分的BUG。到了这个阶段只会除BUG，不会对软件做任何大的更改。从Alpha到Beta再到Gamma是改进的先后关系，但RC1、RC2往往是取舍关系。
Final：正式版。

对于商业软件，还有一下版本：
RTM版：全称为Release to Manufacture。工厂版。改版程序已经固定，就差工厂包装、光盘印图案等工作了。
OEM版：厂商定制版。
EVAL版：评估版。就是有30或者60天等使用期限的版本。
RTL版：Retail.(零售版)，这个版本就是真正发售的版本，有漂亮的包装、光盘、说明书等东西和高昂的价格。

另外，对于商业软件，还有一下版本：
RTM版：全称为Release to Manufacture。工厂版。改版程序已经固定，就差工厂包装、光盘印图案等工作了。
OEM版：厂商定制版。
EVAL版：评估版。就是有30或者60天等使用期限的版本。
RTL版：Retail.(零售版)，这个版本就是真正发售的版本，有漂亮的包装、光盘、说明书等东西和高昂的价格。
其它的软件名称后缀，一般都是其功能上的说明。如：
Enhance　：增强版或者加强版，属于正式版
Free　：自由版
Full version：完全版属于正式版
Release　：发行版，有时间限制，一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号(R)。
Upgrade　：升级版
Retail　　：零售版
Stable：稳定版。在开源软件中，都有stable版，这个就是开源软件的最终发行版，用户可以放心大胆的用了。
Shareware ：共享版　(这个一般是要掏银子买的)
Cardware　：属共享软件的一种，只要给作者回复一封电邮或明信片即可（有的作者并由此提供注册码等），现已不多见。
Plus　：属增强版，不过这种大部分是在程序界面及多媒体功能上增强。
Preview　：预览版
Corporation　&　Enterprise　：企业版
Standard　：标准版
Mini　：迷你版也叫精简版只有最基本的功能
Premium　：　贵价版
Professional　：　专业版
Express　：　特别版
Deluxe　：　豪华版
Regged　：　已注册版

Rip　：是指从原版文件（一般是指光盘或光盘镜像文件）直接将有用的内容（核心内容）分离出来，剔除无用的文档，例如PDF说明文件，视频演示之类的东西，也可以算做是精简版…但主要内容功能是一点也不能缺少的！另：DVDrip是指将视频和音频直接从DVD光盘里以文件方式分离出来。

RTM版　：这基本就是最终的版本，英文是　Release To Manufactur，意思是发布到生产商。
OEM（Original　Equipment　Manufacturer）软件是给电脑生产厂的版本。　

FPP(Full　Packaged　Product)/Retail　就是零售版（盒装软件），这种产品的光盘的卷标都带有”FPP”字样，比如英文WXP　Pro的FPP版本的光盘卷标就是WXPFPP_EN，其中WX表示是Windows　XP，P是Professional（H是Home），FPP表明是零售版本，EN表明的是英语。获得途径除了在商店购买之外，某些 MSDN用户也可以得到。

Volume　Licensing　for　Organizations　(VLO)
团体批量许可证（大量采购授权合约），这是为团体购买而制定的一种优惠方式。这种产品的光盘的卷标都带有”VOL”字样，取”Volume”前3个字母，以表明是批量，比如英文WXP　Pro的VOL版本的光盘卷标就是WXPVOL_EN，其中WX表示是Windows　XP，P是 Professional（VOL没有Home版本），VOL表明是团体批量许可证版本，EN是表明是英语。获得途径主要是集团购买，某些MSDN用户也可以得到。