TwaMix

网页设计中的配色

TwaMix — Mon, 05 Sep 2011 15:35:47 +0800

按色相的搭配分类

本节将网页设计中常见的色彩搭配按照色相的顺序归类。每类都以该色相为主，配以其他色相或者同色相的，应用对比和调和的方法，并按照从轻快到浓烈的顺序排序。

红色

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFCC99

#FFCCCC

#FF9999

#996699

#FFCCCC

#CC9999

#FFFFCC

#CCCC99

#FFCCCC

#FFFF99

#CCCCFF

#0099CC

#CCCCCC

#FF6666

#FF9966

#FF6666

#FFCCCC

#CC9966

#666666

#CC9999

#FF6666

#FFFF66

#99CC66

#CC3333

#CCCCCC

#003366

#993333

#CCCC00

#663366

#CCCC99

#666666

#CC9999

#FF6666

#FFFF00

#0066CC

#CC0033

#333333

#CCCC00

#336633

#990033

#FFCC99

#993333

#CC9966

#003300

#FF0033

#333399

#CCCC00

#CC0033

#000000

#003399

#000000

#99CC00

#CC0033

#999933

#993333

#333300

橙色

#FFCC99

#FFFF99

#99CC99

#FFCC99

#CCFF99

#CCCCCC

#FFCC99

#FFFFCC

#99CCFF

#FF9966

#FFFFCC

#99CC99

#FF9900

#FFFFCC

#336699

#CCCC33

#FFFF99

#CC9933

#996600

#FFCC33

#FFFFCC

#CC9933

#336666

#FF9900

#FFFF00

#0099CC

#99CC33

#FF9900

#FFCC00

#FF9933

#99CC33

#CC6699

#FF9933

#FFFF00

#3366CC

#FF9933

#FFFFCC

#009966

#FF6600

#FFFF66

#009966

#990033

#CCFF66

#FF9900

#FF9966

#996600

#CCCC00

#CC6600

#999999

#CCCC33

#CC6600

#CCCC33

#336699

#000000

#FF9933

#999966

#663300

#FF9933

#FFFF66

黄色

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF00

#FFFFFF

#CCCC00

#99CCFF

#FFCC33

#FFFFCC

#FFFF33

#99CCFF

#CCCCCC

#FFFF00

#FFFFFF

#9933FF

#99CCFF

#FFCC33

#FFFF33

#FFCC00

#66CC00

#FFFF99

#FF9900

#FFFF00

#0099CC

#FFCC00

#0000CC

#FFFF99

#CC9999

#FFFFCC

#6666CC

#999933

#FFFFCC

#CC99CC

#CCCC00

#666600

#FFFF66

#FF9966

#FFFFCC

#99CC99

#FFCC33

#FFFFCC

#999966

#FFCC99

#FF6666

#FFFF66

#FFCC99

#999966

#FFFF00

#FFFF99

#99CC99

#666600

#999966

#FFFF99

#333333

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

黄绿色

#33CC33

#6666CC

#FFFFFF

#CCCC33

#FFFFFF

#CCFFCC

#FFCC99

#CCFF99

#CCCCCC

#CCCC00

#999966

#FFFFCC

#CCCC33

#FFFFFF

#336699

#CCCC33

#999999

#CCFFFF

#00CC00

#0066CC

#99CCCC

#99CC33

#FF9900

#FFCC00

#99CC33

#CCCCFF

#663300

#CCCC33

#993399

#000000

#CC6600

#999999

#CCCC33

#CC9933

#FFFF99

#99CC99

#669933

#CCCC33

#663300

#99CC33

#CCCCCC

#000000

#CC6600

#CCCC33

#336699

#666600

#CCCC66

#CCFFCC

#333366

#99CC33

#336699

#666666

#99CC33

#003366

#003333

#99CC33

#999999

#996633

#FFFF99

#99CC66

绿色

#009966

#FFFFFF

#FFFF00

#339933

#FFFFFF

#9933CC

#339933

#FFFFFF

#000000

#339933

#99CC00

#FFFFCC

#CCCC66

#336666

#99CC33

#FFFF66

#336600

#339933

#CC9900

#666666

#339966

#CCCCCC

#003366

#669933

#CCCCCC

#000000

#339933

#CCCCCC

#6699CC

#006633

#CCCC33

#CC9933

#339933

#666633

#CCCC66

#339933

#FFCC33

#336699

#006633

#669933

#99CC99

#336666

#996633

#CCCC33

#003300

#669933

#CCCC99

#006633

#990033

#FF9900

#006633

#333300

#CCCC99

#006633

#663300

#CCCC66

#993333

#CC9966

#003300

青绿色

#CCFF99

#FFFFFF

#66CCCC

#339999

#FFFFFF

#99CCFF

#66CC99

#FFFFFF

#666699

#009999

#66CCCC

#CCFFFF

#66CCCC

#CCFF66

#FF99CC

#339999

#FFFF00

#336699

#CC9933

#339999

#FFCC33

#FFCC00

#009999

#CC3333

#669999

#CCCCCC

#CC99CC

#339999

#CCCCCC

#000000

#339999

#666699

#CCCCCC

#003333

#99CC99

#FFFFCC

#669999

#CCFFCC

#996699

#CCCC99

#669999

#999966

#CCCC99

#339999

#336666

#669999

#CCCC99

#999999

#003366

#669999

#663333

#339999

#CCCC66

#333333

#339999

#CCFFCC

#336666

#3399CC

#666666

蓝色

#FFFFCC

#CCFFFF

#FFCCCC

#99CCCC

#FFFFFF

#3399CC

#CCFFCC

#99CCCC

#FFFFCC

#CCCCFF

#FFFFFF

#99CCFF

#FFCC99

#FFFFCC

#99CCFF

#336699

#FFFFFF

#99CCCC

#FFFFFF

#CCFF99

#CCCCFF

#FFFFCC

#CCFFFF

#99CCCC

#FFFFFF

#336699

#99CCFF

#CCFFFF

#6699CC

#99CC33

#FFFFFF

#3399CC

#0099CC

#FFFFCC

#666699

#CCCCCC

#003366

#99CCFF

#0099CC

#FFFFFF

#666666

#CCCCCC

#6699CC

#666666

#336699

#CCCC99

#003366

#3399CC

#003366

#CCCCCC

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#999933

#336699

#333333

蓝紫色

#CCFFFF

#FFFFFF

#CCCCFF

#CCCCCC

#FFFFFF

#666699

#99CCFF

#FFFFFF

#333399

#6666CC

#FFFFFF

#FF9999

#9999FF

#FFCC33

#FFFFCC

#0099CC

#FFFFCC

#666699

#0000FF

#6699FF

#CCFFFF

#6666FF

#66CCFF

#CCFF66

#669999

#FFFFCC

#6666CC

#9999CC

#FF9999

#666699

#003399

#FFCCCC

#6699CC

#CC6666

#333399

#CCCC00

#000066

#6666FF

#CCCCCC

#003399

#CCFF99

#333333

#333366

#CC0033

#CCCCCC

#336699

#CCCC66

#333300

#003399

#FFFF99

#000000

#990066

#CCCC33

#003399

#CC3333

#000000

#003399

#333366

#999966

#333333

紫色

#FFFFCC

#FFFF99

#CCCCFF

#9999CC

#99CC99

#FFFFFF

#FFCCCC

#CCCCFF

#CCCC99

#9999CC

#FFFFCC

#FFCCCC

#FF99CC

#CCCCFF

#660066

#FFFFFF

#663333

#CCCC99

#333333

#9966CC

#CCCC00

#FF9966

#663399

#996699

#FFCCCC

#CC99CC

#996666

#CC99CC

#FFCCCC

#FFCC99

#FF9933

#663366

#333399

#CCCCFF

#CC99CC

#663366

#CCCCCC

#CC99CC

#996699

#9999CC

#CCCCFF

#CC9966

#999999

#663366

#330033

#666666

#669999

#CCCCCC

#999999

#663366

#FF33CC

#CCCC99

#663366

#999999

#CCCCFF

#999966

#993333

#330033

紫红色

#FFCCCC

#FFFFFF

#99CC00

#FF99CC

#FFFFFF

#993366

#66CC99

#FFFFFF

#CC6699

#CC9999

#FFCCCC

#CC99CC

#FFCCCC

#FFFF99

#CCCCFF

#FFFF99

#993399

#FF99CC

#66CCCC

#CCFF66

#FF99CC

#003399

#CCCC00

#FFCCCC

#FF99CC

#CCCCFF

#FF9999

#FFCCCC

#FF99CC

#669966

#CC6699

#FFCCFF

#CCCCCC

#CC99CC

#CC3399

#FFCC99

#FF6666

#FF3399

#CCCC99

#663366

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#990066

#FFCC00

#CC0033

#990066

#CCCCCC

#006699

#999900

#990033

#000000

#990066

#000000

#009966

按印象的搭配分类

色彩搭配看似复杂，但并不神秘。既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象可以用加减法来近似估算。如果每种色彩都是高亮度的，那么它们的叠加，自然会是柔和、明亮的；如果每种色彩都是浓烈的，那么它们叠加，就会是浓烈的。当然在实际设计过程中，设计师还要考虑到乘除法，比如同样亮度和对比度的色彩，在色环上的角度不同，搭配起来就会得到千变万化的感觉。因此本书除了要列举出按色相的搭配，也要将印象作为重点的搭配分类列举出来，以供读者参考。

柔和、明亮、温柔

亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼，设计师一般会用低亮度的前景色调和，同时色彩在色环之间的距离也有助于避免沉闷。

#FFFFCC

#CCFFFF

#FFCCCC

#FFFF99

#CCCCFF

#FF9966

#FF6666

#FFCCCC

#FFCC99

#CCFF99

#CCCCCC

#FFCCCC

#CCCCFF

#CCFFCC

#CCFFFF

#CCCCCC

#CCFF99

#FFCCCC

#FFFFFF

#99CC99

#99CCCC

#FFCC99

#FFCCCC

#CCCCFF

#FFCCCC

#CCFFFF

#FFCC99

#FFFFCC

#99CCCC

柔和、洁净、爽朗

对于柔和、清洁、爽朗的印象，色环中蓝到绿相邻的颜色应该是最适合的。并且亮度偏高。可以看到，几乎每个组合都有白色参与。当然在实际设计时，可以用蓝绿相反色相的高亮度有彩色代替白色。

#CCFF99

#FFFFFF

#99CCFF

#99CCCC

#FFFFFF

#CCFF99

#CCFFCC

#FFFFFF

#66CCCC

#CCCCFF

#FFFFFF

#99CCCC

#CCFFCC

#99CCCC

#FFFFCC

#CCFFFF

#FFFFFF

#CCCCFF

#CCFFFF

#FFFFFF

#99CCFF

#66CCFF

#FFFFFF

#CCFFFF

#6699CC

#FFFFFF

#99CCFF

#CCCCFF

#FFFFFF

#99CCFF

可爱、快乐、有趣

可爱、快乐、有趣印象中的色彩搭配特点是，色相分布均匀，冷暖搭配，饱和度高，色彩分辨度高。

#66CCCC

#CCFF66

#FF99CC

#FF9999

#FFFFFF

#FFCC99

#FF6666

#FFFF66

#99CC66

#666699

#FFFFFF

#FF9999

#99CC33

#FF9900

#FFCC00

#FF0033

#FFFFFF

#FF9966

#FF9900

#CCFF00

#CC3399

#99CC33

#FFFFFF

#FF6600

#993366

#CCCC33

#666633

#66CCCC

#FFFFFF

#666699

活泼、快乐、有趣

活泼、快乐、有趣相对前一种印象，色彩选择更加广泛，?最重要的变化是将纯白色用低饱和有彩色或者灰色取代。

#CC9999

#FFFF99

#666699

#FF9900

#FFFF00

#0099CC

#CCCC99

#CC3399

#99CC00

#FF6666

#FFFF00

#3399CC

#CC6600

#999999

#CCCC33

#FF9933

#FFFFCC

#009933

#0099CC

#CCCCCC

#FF6666

#FF6600

#FFFF66

#009966

#CC6633

#FFCC99

#CC6600

#CC0066

#009999

#FFCC33

运动型、轻快

运动的色彩要强化激烈、刺激的感受，同时还要体现健康、快乐、阳光。因此饱和度较高、亮度偏低的色彩在这类印象中经常登场。

#FF6666

#FFFF00

#006699

#FF9966

#FFFFFF

#0066CC

#339933

#FFCC33

#336699

#FF9900

#FFFFCC

#336699

#CC6600

#CCCC44

#336699

#99CC33

#FFFFFF

#0099CC

#99CC33

#FF6666

#336699

#FFFFFF

#99CCCC

#FF0033

#333399

#CCCC00

#33CC99

#FFFF00

#336699

轻快、华丽、动感

华丽的印象要求页面充斥有彩色，并且饱和度偏高，而亮度适当减弱则能强化这种印象。

#990066

#FFCC00

#CC0033

#FFCC33

#333399

#FF0033

#666699

#FFFF00

#FF0033

#006699

#FFFF33

#FFCC00

#009999

#CC3366

#FF0033

#CCCC00

#006699

#CCCC00

#FF9933

#663399

#FF9933

#FFFF00

#336699

#CC3333

#FFCCCC

#99CC00

#003399

#FFFF00

#FF6600

狂野、充沛、动感

狂野的印象空间中少不了低亮度的色彩，甚至可以用适当的黑色搭配。其他有彩色的饱和度高，对比强烈。

#990066

#FFFF00

#003399

#CC0033

#000000

#003399

#FFFF00

#F00000

#CC3333

#CCCCCC

#003366

#CC0033

#333333

#CCCC00

#000000

#99CC00

#CC0033

#FF0033

#333333

#FF9900

#990066

#000000

#009966

#666666

#FF6600

#333333

#993333

#CCCC00

#663366

华丽、花哨、女性化

女性化的页面中紫色和品红是主角、粉红、绿色也是常用色相。一般它们之间要进行高饱和的搭配。

#FFFF99

#993399

#FF99CC

#FF6666

#FFFFFF

#339999

#FF99CC

#003399

#CCFF00

#66CC99

#FFFFFF

#CC6699

#CC3399

#FFCC99

#FF6666

#FFCCCC

#FFFFFF

#993366

#CC6699

#FFFF00

#666699

#CC6699

#99CC66

#663366

#FF33CC

#CCCC99

#663366

#CC3399

#FFCC99

#FF6666

回味、女性化、优雅

优雅的感觉很奇特，色彩的饱和度一般要降下来。一般以蓝、红之间的相邻，调节亮度和饱和度进行搭配。

#CCCCCC

#CC99CC

#CC3399

#FFCCCC

#FF99CC

#CCCCFF

#CC3399

#9933CC

#CC99CC

#9999CC

#FFFFCC

#FFCCCC

#663366

#CCCCCC

#CC99CC

#FF9999

#FFCCCC

#FF99CC

#996666

#CC99CC

#FFCCCC

#CC9999

#CCCCCC

#FFCCCC

#FF9999

#996699

#FFCCCC

#996699

#FFCCCC

#CC99CC

高尚、自然、安稳

高尚一般要用低亮度的黄绿色，色彩亮度降下去，注意色彩的平衡，页面就会显得安稳。

#CCCC33

#FFFF99

#CC9933

#CC9966

#CCCC66

#669999

#FF9966

#996600

#CCCC00

#CCCC66

#660033

#CC6600

#CCCC00

#666600

#CCCCFF

#CC9933

#009999

#FFCC33

#999966

#CCCC99

#339999

#99CC99

#669933

#336633

#666633

#999933

#CC9966

#660000

#CC9900

#CCCC99

冷静、自然

绿色是冷静、自然印象的主角，但是绿色作为页面的主要色彩，容易陷入过于消极的感觉传达，因此应该特别重视图案的设计。

#FFFF99

#99CC99

#666600

#996633

#FFFF99

#99CC66

#006600

#66CC66

#CCFF99

#666600

#CCCC66

#CCFFCC

#669933

#CCCC33

#663300

#666633

#999933

#CC9966

#003300

#669933

#CCCC99

#006633

#663300

#CCCC66

#666600

#FFFFCC

#999999

#006633

#333300

#CCCC99

传统、高雅、优雅

传统的内容一般要降低色彩的饱和度，特别是棕色很适合。前面介绍紫色也是高雅和优雅印象的常用色相。

#999933

#FFFFCC

#CC99CC

#CC9966

#666666

#CC9999

#CCCC99

#333333

#9966CC

#CCCC99

#666666

#CC9999

#996699

#CCCC99

#669999

#CC9966

#999999

#666666

#339966

#CCCCCC

#996699

#663366

#999999

#CCCCFF

#996699

#9999CC

#CCCCFF

#CCCC99

#999999

#663300

传统、稳重、古典

传统、稳重、古典都是保守的印象，色彩的选择上应该尽量用低亮度的暖色，这种搭配符合成熟的审美。

#6699CC

#663366

#CCCC99

#990033

#CCFF66

#FF9900

#666699

#660033

#99CC99

#663300

#FF9933

#FFFF66

#990033

#006633

#CCCC00

#660033

#999933

#660099

#993366

#CCCC33

#666633

#996600

#CCCC66

#666600

#009933

#CC9900

#666666

#666633

#CCCC33

#CC3366

忠厚、稳重、有品位

亮度、饱和度偏低的色彩会给人忠厚、稳重的感觉。这样的搭配为了避免色彩过于保守，使页面僵化、消极，应当注重冷暖结合和明暗对比。

#FFFFCC

#CC9933

#336666

#996633

#CCCC33

#336633

#990033

#FFCC99

#333366

#669999

#996600

#993333

#CC9966

#003300

#336633

#CCCC99

#333366

#663300

#999933

#333333

#663366

#666666

#333366

#999900

#990033

#CC99CC

#333366

#990033

#CCCCCC

简单、洁净、进步

简单、洁净的色彩在色相上可以用蓝、绿表现，并大面积留白。而进步的印象可以多用蓝色，搭配低饱和甚至灰色。

#CCCCCC

#FFFFFF

#666699

#CCFF66

#FFFFFF

#003366

#99CCFF

#FFFFFF

#336699

#CCCC33

#FFFFFF

#336699

#0099FF

#FFFFCC

#666699

#99CC33

#CCCCCC

#000000

#CCCCCC

#003366

#99CCFF

#0099CC

#CCFF66

#666666

#3399CC

#003366

#CCCCCC

#ABCDEF

简单、时尚、高雅

灰色是最为平衡的色彩，并且是塑料金属质感的主要色彩之一，因而要表达高雅、时尚，可以适当使用，甚至大面积使用。但是要注重图案和质感的构造。

#99CCFF

#FFFF66

#666666

#336666

#FFFFFF

#999999

#0099CC

#FFFFFF

#666666

#999999

#CCCCCC

#336666

#CCCCCC

#999999

#663366

#666666

#CCCCCC

#6699CC

#999999

#FFFFFF

#333366

#669999

#CCCCCC

#666666

#999999

#CCCCCC

#333333

#ABCDEF

简单、进步、时尚

表现进步的色彩主要以蓝色为主，搭配灰色。而色彩的明度统一、色相相邻，在色彩上会显得简洁。

#333366

#99CC33

#336699

#999999

#003366

#669999

#003399

#CCFF99

#333333

#999933

#336699

#333333

#666666

#99CC33

#003366

#999999

#336699

#333333

#3366CC

#CCCC66

#333300

#6699CC

#006699

#000000

#003366

#CCCCCC

#006699

#000000

#999999

#003366

域名间歇性被墙解决方案

TwaMix — Sun, 28 Aug 2011 22:40:32 +0800

最新TwaMix经常会抽风，感谢伟大的长城，表现特点是：

时而能访问，时而不能访问；
同一时间部分地区能访问，部分地区不能访问；
不同电信运行商能否访问互不协同；
挂代理，永远都能访问；

可能出现的三种情况：

域名被墙：域名ping的通却打不开网站（排除服务器宕机），用代理可以打开。

解决方案：把域名转回国内，正常做备案开通网站。

域名被间歇性屏蔽：如果间歇性的可以打开，打不开的时候用国外代理可以打开，说明域名被间歇性的屏蔽（当然这个情况也可能是域名DNS解析不稳定造成的）

解决方案：检查网站内容，删除敏感信息词条关键字。

IP被封：如果ping不通，使用国外代理可以打开一般可以确定是ip被封。

解决方案：更换主机空间商。

备：目前Godaddy的DNS解析，也经常出现域名间歇被墙，遇到这种情况，可以通过修改域名的nameservers来解决。

Chrome模拟iPhone浏览网页

TwaMix — Sat, 20 Aug 2011 17:37:44 +0800

最近要为一款主题做好IOS移动端的优化，因此需要在PC端模拟IOS测试移动页面，无论使用chrome或者firefox，我想这也不尽是我一个人的需求吧。
本文向大家介绍firefox、safari、chrome模拟出iPad、iPhone、Android、Symbian等移动浏览器浏览网页的方法。

实现原理

User Agent：一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。网站常常通过判断 UA 来给不同的操作系统、不同的浏览器发送不同的页面，因此可能造成某些页面无法在某个浏览器中正常显示，但通过伪装 UA 可以绕过检测。

使用方法

插件：User Agent Switch：安装User-Agent Switcher插件——选项——Custom User-Agent List——加入各种User Agent ；

以chrome为例，格式是chrome.exe+user-agent，可以通过在运行里直接运行下面的代码，也可以通过修改浏览器快捷方式-目标栏实现上述效果。

chrome.exe –user-agent=”Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10″

常用的user-agent

iPad：

–user-agent=”iPad”
chrome.exe –user-agent=”Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16″

iPhone：

–user-agent=”iPhone”
–user-agent=”Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10″

Android：

–user-agent=”Android”
–user-agent=”Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1″

Symbian：

–user-agent=”Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124″

其他各种手机各种浏览器的User Agent见这里：

http://www.zytrax.com/tech/web/mobile_ids.html

LightBox图片展示效果JS

TwaMix — Fri, 12 Aug 2011 22:17:06 +0800

本文将为你介绍15款优秀的Lightbox和Modal Dialog特效，供网站开发者参考。

1. Facebox

facebox是一个jquery为基础的Lightbox，可显示图像，divs，或者远程页面。它的使用很简单。

下载地址：http://defunkt.io/facebox/

2. Colorbox

ColorBox是一个轻量级，可定制的Lightbox插件，可以在jQuery 1.3 和1.4中使用，ColorBox支持照片，照片组，幻灯片，ajax，内联和 iframe 框架。

下载地址：http://colorpowered.com/colorbox/

3. jQuery Lightbox Plugin

jQuery LightBox plugin是一个简洁优雅的插件，不需额外扩展代码就可以把当前页面上的图片通过一个遮罩显示出来，这主要是通过jQuery强大灵活的选择器来实现的。

下载地址：http://leandrovieira.com/projects/jquery/lightbox/

4. prettyPhoto

prettyPhoto是jQuery Lightbox的一个“克隆”。实际上它不仅能显示图片，还能显示许多的类型，比如在可能弹出的层窗口中加载视频、Flash动画、一个已布局好的网页、一个框架页等等。

下载地址：http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

5. jQuery Dialog

这是一个 jQuery 的对话框插件，可以根据你的喜好很方便地自行定制对话框。

下载地址：http://jqueryui.com/demos/dialog/

6. Prototype Window

你可以把它用到ASP.NET，Ajax，Java等等所有网页上，可以实现改变窗口大小、最小化、最大化窗口、模型对话框、渐入渐出的渐变效果，支持皮肤等功能。现有的实例包括：模仿MAC OS的对话框，在对话框中打开一个网页，警告框，确认对话框，信息对话框，登录对话框，Ajax对话框等等。
它的原型基于对话框插件。

下载地址：http://prototype-window.xilinus.com/samples.html

7. MochaUI

MochaUI 是一个用于开发Web应用的用户界面库，基于Mootools的JavaScript框架。

下载地址：http://mochaui.com/

8. Boxy

Boxy是一个可灵活实现类似Facebook风格对话框的jQuery插件，支持对对话框进行拖拉和改变大小等操作。

下载地址：http://onehackoranother.com/projects/jquery/boxy/

9. ModalBox

Modalbox可用来增强Web应用中的用户交互，开发它的灵感来自Mac OS X的模块动态对话。

下载地址：http://www.wildbit.com/labs/modalbox/

10. Shadowbox

Shadowbox是一个在线媒体展示应用，支持绝大多数的网络媒体常用格式。Shadowbox完全是基于JavaScript和CSS编写的，高度可定制化。

下载地址：http://www.shadowbox-js.com/

11. jqModal

jqModal是jQuery的一个插件，用来在浏览器中显示通知，对话框和模型窗口。它简直如瑞士军刀一般灵活和小巧，而且它为通用目的窗口框架奠定了基础。

下载地址：http://dev.iceburg.net/jquery/jqModal/#examples

12. Highslide

Highslide是一个用Javascript写的图片影像特效浏览器，外观简洁优雅。

下载地址：http://highslide.com/

13. PiroBox

风格时尚且现代的Lightbox控件，采用jQuery开发。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。

下载地址：http://www.pirolab.it/pirobox/#howto

14. imgBox

imgBox是一个可以实现图片平滑放大效果的jQuery插件。

下载地址：http://jqueryglobe.com/labs/imgbox/

15. jQuery Tools

jQuery Tools是一个当前网站开发中最常用的UI组件集合。

下载地址：http://flowplayer.org/tools/overlay/index.html

分享设计精美的网站

TwaMix — Mon, 01 Aug 2011 19:05:10 +0800

设计的灵感源于对自然的感悟，也需要不断的刺激和借鉴，也许对于业余的我们一些好的设计方案可供我们参考，也是不错的一种选择！今天我们分享些优秀的网站，也许你会发现你所需要的！不过我却一直喜欢简约的。

The Best Designs

CSS Bay

CSS Nature

WP Inspiration

Design Bombs

CSS Exchange

ArsCSS3Gallery

The Fwa

Boxed CSS

Teespiration

Creative Adawards

CSS Remix

CSS Blaze

Web Design Showcase

CSS Design Yorkshire

Best Web Gallery

CSS WebSites

SiteInspire

Web Creme

CSS Perk

Minimal Exhibit

Inspiration King

CSS Mayo

Cart Frenzy

Designer Source

CSS Gallery

Selected WebDesign

First Hand Web

Design Shack

CSS Collection

Urban Trash

CSS Brigit

Swell Css

Blazing Gallery

My3w

设计路上

博客离线更新方法

TwaMix — Sat, 23 Jul 2011 11:39:19 +0800

你还是一如既往的守旧？

你还在用Wordpress后台更新博客吗？

那如蜗牛般的速度的后台你还在一直容忍吗？

—————— 也许离线更新博客是个不错的选择。

关于离线更新博客的优点，本文不再复述，再此仅仅推荐两款工具，是时下应用最为普遍的，基本是各具特色，各有各的用户群。

Windows live Writer

这款软件被评为微软最出色的小软件之一，是各位博主的最爱。

优点：

插件支持；
多博客共同管理；
自带图片上传功能；
支持众多博客程序；
有编辑、预览、HTML三个界面；
功能强大，可以设置日志类别、Ping设置、作者、发布日期、标签等。

缺点：

与Windows产片粘合性较高；
打开速度较慢；

绿色版：

无论本机是否已经安装Writer，当你运行绿色Writer是都会首先读取该文件夹里面的注册表设置；
使用绿色版Writer，保存的草稿在绿色版文件夹里，而不是在我的文档里；

正因为上述的原因，所以该版本才是便携的，一直受大家追捧。

下载地址：点此下载

ScribeFire

一款出色的离线博客发布工具，支持大部分博客系统。ScribeFire支持Firefox 、Chrome、 Opera和Safari浏览器扩展。

优点：

支持快捷键（crtl+）；
文档自动保存；
设置永久链接、按时发布等；
保存草稿到你的wordpress；
支持TAGS；
启动飞速；
方便一稿多投；
……

请按照你目前所使用的浏览器分别安装：

WM(PPC)联系人同步Android安全方法

TwaMix — Mon, 11 Jul 2011 11:15:21 +0800

本文将为大家介绍最简单、最安全的同步方法。

最近单位发了一部Android系统电信合约版手机，以前Android OS只是在我的HTC HD上模拟（详细看这里），因为速度过慢和耗电巨大的原因，一直都无法把Android的优点发挥的淋漓尽致，如今则可以好好把玩一番。摆在面前的首要问题就是在两部设备（WM——Android）把几百位联系人同步，手工输入无疑是最愚蠢的方法，而本文列举出众多网络上已有的方法，通过比较，最后介绍一种我本地测试最简单、最安全的同步方法。

手工输入

方法：用手指通过智能输入法，把众多联系人一一输入手机。

优点：增加智能输入法词库、熟悉新增联系人等操作、感受Android输入体验等。

缺点：愚蠢。

网络依赖

1、WM自带的ActiveSync → Goolge服务器 → Android OS（需要Google账户支持）。

按照上图所示在WM下操作，需要输入的就是你的Gmail用户名和密码，（需填写完整GMail地址，包含@gmail.com)，“域”空白。
在 Android OS上添加一个Google账户，在设置里选择同步联系人即可。

2、借助第三方工具，如91手机助手或者豌豆荚等。

WM里的联系人 → 手机助手WM版 → 计算机 → 手机助手Android版 → Android OS。

缺点：繁琐、需网络支持、不安全。

本地同步

1、SIM卡中介：WM里的联系人 → SIM卡 → Android OS。

前提是两部机器都要支持同一运营商如移动，想TwaMix这种情况，一张移动卡，一张电信卡，对这个方法表示很无奈。

2、蓝牙同步（强烈推荐）。（备：网络上一直没有推荐这个方法是因为没有发现哪，还是故意不发）

打开两部手机的蓝牙，并且配对好；
在联系人页面，全选联系人，选择无线收发；

搜索到Android设备，并且发送；

众多联系人会集体存放在Android OS的sdcard/bluetooth文件夹里，这里我们并不需要合并众多文件，让这个繁重的劳动交给Android OS；
直接在Android OS的联系人页面选择-从SD卡导入即可，系统会遍历SD卡上所有以vcf结尾的文件，然后导入。

TwaMix强烈推荐这个方法！！！

优秀的jQuery幻灯片分享

TwaMix — Tue, 05 Jul 2011 17:53:00 +0800

jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入漂亮的效果，其中之一就是幻灯片，一种在有限的网页空间内展示系列项目时非常好的方法。今天要给大家分享的是60款很酷的 jQuery 幻灯片，一起欣赏。