Cutsin受难记

IE中opacity与png图像alpha通道冲突2例及解决办法

2010-04-28T14:40:00.001+08:00

1、

现象：在包含alpha通道的png图像/背景元素上应用alpha(opacity)滤镜，会将透明区域显示为黑色

涉及环境：IE6/7/8

解决办法：使用alphaimageloader载入png；

2、

现象：如果一个元素同时应用了alpha(opacity)滤镜、并使用alphaimageloader载入png，那么在此元素的实际显示区域中，所有元素的背景/背景色都会失效

涉及环境：IE6/7/8

解决办法：为被"吃掉"背景的元素增加alpha(opacity=100)

xhtml mp浅析

2010-03-01T16:06:00.002+08:00

很早以前就想了解一下wml和wcss，借助春节假期的间隙，阅读了nokia xhtml指南和相关文献，感慨良多，这真是一次迟来的阅读。
网上的各种重复资料太多了，写一点自己的感想和总结：

一、基础概念
wap的发展基本上也是经过了一个从私有到规范的过程，目前的wap2.0应该说是从协议到描述语言，逐渐在向有线互联网靠拢，它终端的基本构成是xhtml mp和wcss，二者的关系就像html之于css；
xhtml mp基于xhtml basic的定义并扩展（包括支持wcss）、wcss则是css2的子集并进行私有扩展；
最大的优势是向规范靠拢，这样wap站点任何支持规范的终端都可以正常访问并应用。

二、xhtml mp
既然靠拢了规范，它势必摒弃了一些"不规范"的旧有特性，如：
1、deck、card、do、anchor、timer、等其他xhtml不允许的标签和应用逻辑
2、不支持非标准事件、变量、客户端脚本、锚点数据
3、必须要有xml声明，这一点不是很确定，从web得来的经验告诉我们：教条不可信，需要更多的测试和阅读。
总之，可以说xhtml mp是完全遵照w3对web的成熟定义，熟悉web开发的人可以很快上手，几乎不需要什么过渡过程，可能在不同终端的处理上尚需经验，但的确是门槛甚低。

三、wcss
除了语法相同，它提供了可和web媲美的大多数属性（包括float和支持有限的position），并且提供不少相当有用的私有属性，这些属性和值以"-wap-"为前缀，例如：
1、-wap-accesskey：3（*、#、0-9），它使用规范的方式代替了之前的<do>
2、-wap-input-format 它可以定义输入格式
3、-wap-marquee 它可以按照相应的规则卷动元素
看起来这些属性并不和表现相关，仿佛违背了分离的思想，不过讽刺的是：css提供的这些属性，实际上是相当实用，而我们却只能通过className去模块化地使用它们。

四、兼容性
wap平台的浏览器对比pc更加杂乱，除了几大厂商五花八门的浏览器，还得考虑诸如MTK等山寨os的私有浏览器；
对前端而言最直接的影响就是：
1、font-family、font-style等字体属性显得无用，因为不少终端只有1-2种字体并且兼容性不好
2、各种布局属性（包括基本的width、height）的支持千差万别
3、js的支持比例一半一半
4、一切全靠测试、折腾...
复杂的终端导致我们只能从GUI设计阶段着手简化，用尽量简洁的设计生成尽量简洁的页面，以尽量小的容量提供给尽量小带宽的下载用户，这就引出此文的第五部分：

五：设计优化、可访问性、可用性
这套流程看起来很熟悉：
1、压缩xhtml、css，缩短各类明明，减小页面大小，这主要是因为终端的缓存限制，以MTK为例（我的山寨机就是），似乎超过20KB的页面就会导致报"下载页面过大"之类的错误，根本无法浏览；
2、图片压缩，尽可能采用jpg、gif、png-8，尺寸也不宜过大，在小屏幕终端上进行横向卷动是非常困难的事情；
3、屏幕尺寸以及导航的设计需要考量，尽量减少装饰性图片或背景；
4、灵活可变的布局，减少卷动
5、导航清晰、减少主要功能死角
总之，一切为了accessibility和usability

值得深思的是：nokia文档中有许多关于用户习惯、可用性、可访问性的描述，甚至包括许多类似"根据可用性研究，用户不太热衷于那些由于图像传输而中断他们任务流的服务"的细节，而此文档的初稿时间是2002年7月，译文时间是2004年5月，04年同期事件是：国内web标准化的呼声刚刚崭露头角，而当时国内的UCD研究亦处于起步阶段...

六、其他
1、关于css的放置
有不少资料建议将css放置在页面中，不要使用外部链接，理由是link会产生额外的请求，而且全站的css如果都在这一个文件中的话，文件会比较大，影响速度；
不过我觉得，如果每个页面都带有css，如果用户浏览了2、3页，那和使用link没什么区别，而且浏览得越多，下载的多余样式越多，而link一般会进入缓存；
再者，wap站点和web站点不同，它没有类似门面主页的存在，除非特别需要首页打开速度（比如资讯类等不需要登录的站点），选择将link放入页面相对较小的首页反倒是个不错的选择。

2、xhtml mp的未来及展望
xhtml诞生以来的最大意义就在于它提出的一种标准、一种强制规范，几乎不会有什么终端、设备会尝试以xml的方式读取xhtml，它的xml特性几乎从未被我们所用到，html5的出现更是令xhtml非常尴尬，那未来的移动设备会采用什么方式呢？我觉得随着终端机能的增强和带宽的提高，除了xml源及阅读器，仍然会是提供富交互的html和脚本，互联网跨平台的日子不远了……

3、关于builder、ria的必要性
从第五条关于设计的优化原则可以看出，根本不需要什么builder、js，所有的页面、逻辑都和程序环环相扣，3G时代又如何？我们不可能无视一半的用户比例，所以，在很长一段时间内，wap页都会长得大同小异，更丰富的无线应用，只能暂时在无线客户端中绽放……

X-UA-Compatible迷局

2010-01-06T13:51:00.002+08:00

一般说IE流行着这几个版本：6、7、8以及未来的IE9，而事实上随着X-UA-Compatible的出现又增加了“IE8 as EmulateIE7”、“IE8 as Standard IE7”；

让人困扰的是：后2者仍然有着和纯IE7不同的表现，而微软总会用各种方法引诱你去打开兼容性视图：
1、让开发者们增加X-UA-Compatible强制指定
2、如图：

我们很难（不愿）通过hack再去区分它们，绝不能用错误的方式去解决错误的问题，还好微软同时提供了禁止兼容性视图的办法：
http://msdn.microsoft.com/zh-cn/library/cc817575.aspx
如果说IE8是IE向行业标准靠拢的里程碑，那没有理由不使用：
<meta http-equiv="X-UA-Compatible" content="IE=edge">

如果原来使用Emulate有千百种理由，那么在新产品、新项目中不使用edge无异于自找麻烦，愚以为如此……

业内？业内……

2009-11-11T11:29:00.001+08:00

今天花了不少时间看reader，从华尔街到枣报，又从枣报到业内博客……

然后就看到51js和蓝色的人在互喷，牵涉非常多的老版主、"业内名人"等等，主要是围绕一本书的推介，而关于主角"css8"，刚好我曾在蓝色web标准区多次遇到，对此人的技术和言语浅有了解，遂来了兴趣……

看这个文章可知始末：《炮轰<JavaScript征途>，兼批技术社区的吹捧之风》

然后有人发了篇文章《一些技术图书编写、推荐、出版人员需要自重》

最后，这是一个写书评的版主的补记（之所以记得这个蓝色的版主，只因他曾以"请言之有物"为理由删过我们几个朋友对另一个朋友大作的跟贴，而我看了看同一帖内剩余的跟贴却同样是言之无物，而区别仅仅是他们都是些有身份的人，如"荣誉管理团队"、"版主"等等，�~~，这就是所谓只许xxxx，不许xxxx）

老实说，看到这么混乱，我有一点兴奋。

读报：奥巴马访华解决新摩擦应对“大”问题

2009-11-10T10:04:00.001+08:00

当

美国总统奥巴马(Barack Obama)抵达上海开始他为期四天的对华访问之时，展现在他面前的将全部是标准的迎宾仪式和访问场景。他将会见高层领导以及平民百姓；本地媒体将满是他的报导；所发表的讲话也将此尽是些诸如"远景"和"合作伙伴"这样的词汇。

不过，他在中国受到的欢迎将不会像在其他国家所受礼遇那样热烈，他在其他国家通常被视为一个变革人物。

Getty Images

这是因为即将从11月15日开始对亚洲进行八天访问的奥巴马将大体延续此前政府的对华政策。他还将面临一些长期问题在两国间造成的新摩擦，同时他及中国领导人必须应对已堂而皇之地登上中美峰会议程的一干国际问题。

中美关系上的成功普遍被归功到了前一届政府头上。在克林顿(Clinton)时期所取得进步的基础上，布什(Bush)政府深化了中美贸易关系，扩大了两国交流并以和平方式解决了争端。这个被中国人称为"小布什"的总统在这里广受喜爱。

乔治华盛顿大学(George Washington University)国际关系学教授大卫・肖姆博格(David Shambaugh)说，中国几乎是布什总统在国际事务领域取得的唯一成功；因此奥巴马一上任就继承了十分坚实有效的中美关系。

不过，奥巴马在入主白宫后限制了部分中国产品对美出口，引发中方似乎是针锋相对的回应。中国对贸易争端尤为敏感，因为它的经济增长高度依赖出口领域。

AP Photo/Charles Dharapak

今年9月美国总统奥巴马与中国国家主席胡锦涛在纽约会面。

这影响了奥巴马在中国的受欢迎程度，同时也有观点认为奥巴马在修复美国金融系统做得不够──中国之所以担心这一问题是中国是持有美国国债最多的国家。

十年前，在中美峰会上讨论最多的问题仅限于以下三个：人权、防止核扩散和贸易。现在双方议题已经扩展到几乎涵盖世上所有主要问题，从清洁能源到阿富汗战争、非洲发展、再到如何修复全球经济，预计所有这些问题都将在奥巴马和中国国家主席胡锦涛的对话中占有一席之地。

华盛顿布鲁金斯学会(Brookings Institution in Washington)研究员、曾任前总统克林顿(Bill Clinton)亚洲事务特别助手的李侃如(Kenneth Lieberthal)说，在中美关系史中，全球事务首次成为最主要的议题；这对我们来说是一个新的领域。

双方的分析人士都认为这种变化可能带来问题。中国官员和分析人士指出，美国仍在对中国实施武器和高科技禁运；他们说，这可不是对真正的伙伴做的事。清华大学国际关系教授阎学通说，奥巴马希望我们成为战略合作伙伴或朋友，但我们既不是战略合作伙伴，也不是朋友，我们是分享物质利益而非共同价值的商业伙伴。

乔治华盛顿大学的肖姆博格说，美国最近力促中国成为全球伙伴，这可能是30年来不切实际的期望伴以大失所望这一模式的一部分。他说，我们对中国的期望过高，我们的政治制度和价值体系都迥然不同。

这一点反映在如下事实中：尽管两国关系称得上是处于有史以来的最佳状态，双方讨论的大部分问题却也比以往更加棘手。

举例来讲，美国很可能至少会暗示中国应该进一步升值人民币。中国则很可能礼貌地加以拒绝。双方将一致认为不应该扩散核武器，不过不太可能在应对朝鲜、伊朗或巴基斯坦问题的切实措施上取得一致。而至于气候变化协议，双方都希望等下个月的哥本哈根峰会之后再做出承诺。

所有这一切都将使奥巴马之行难以达到划时代的高度。人民大学教授、中美关系资深观察家时殷弘说，另外一个因素──国家的大小──也在发挥著作用。与美国一样，中国也是一个幅员辽阔的国家，相对不容易受到外界影响。

他说，中国不同，外国人很少能对其产生重大的影响。

Ian Johnson

来源：华尔街日报

涤荡你的心灵――Amazing Grace

2009-09-20T12:12:00.002+08:00

翻出压了许久未看的柯南剧场版《战栗的乐谱》，之前剧场版质量的每况愈下让我对此作的期望并不高，然而看罢之后忽然感到很欣慰，虽然仍然不是什么大手笔大场景，但对场景分镜的的细腻把握、对人物心理的刻画、有分寸的特写以及音乐恰如其分的烘托，让看惯了柯南老套推理的我眼前一亮：原来柯南还可以这么拍。

不需要错综复杂的剧情，不需要扣人心弦的悬念，需要的只是一种感觉，一种舒服的感觉，它让内心放松、心灵涌动而不显煽情

纵观整个故事都围绕着一个主题：宽恕

它让弱者变强、强者低头，它来自凡人内心，又似乎被赋予永恒，它不是歌，它是凡人的祈祷、真诚的忏悔，这就是――Amazing Grace，作者约翰牛顿（非Isaac Newton），版本太多了，试听了几个版本，推荐如下：

经典版本：Judy Collins

唯美版本：海莉韦斯特娜

怜子版本：赤池优

不过个人还是喜欢简单干净轻柔的版本，不喜欢杂乱的混音、和声，虽然主音符就那么几个，但简单才是真谛，剧中悠扬延绵的小提琴声让我不禁想将世界三大乐器尽数拥有，钢琴么，让老婆弹:P

I once was lost, but now I"m found ,was blind, but now I see

不知是否在给踌躇的我以启示……
而启示往往是隐晦而宽容的，选择仍在自己。

使用高效的html标签

2009-09-19T11:24:00.002+08:00

上次测试了float和position元素的显示效率，那么就留下一个问题：
平时应该多用哪些标签、显示属性应该如何设置呢？
遂补充一些测试数据如下（仍是不严格测试、53100个同级元素，浏览器是chrome）：

div的显示属性：

display:block 1.x秒

display:inline-block 27.x秒

display:inline 5.x秒

默认标签：

div 1.7x秒

p 1.2x秒

span 6.x秒

i 5秒左右

b 5秒左右

q 6.x秒

a 5.x秒

重置默认标签：

q:before,q:after {content:''} 6.x秒

span:before,span:after {content:'\22'} 7秒左右

div:after {clear:both;display:block;height:0;content:"\20"} 2.6x秒

从数据上也许能看到一些端倪：

1、推荐的显示属性：

block > inline > inline-block

2、文档的大小也有很大关系，显示属性相同的情况下，推荐使用短小标签：

(i,b,p,a) > (em,hx,ul,ol,li,dl,dd,dt) > (div,ins,del,var,dfn,sup,sub,pre) > (span,q,cite)

3、伪类的content，即使设置为空，也会消耗资源

4、减少<img>

5、减少嵌套

6、减少float

7、设置doctype为html，减少自闭合

拙见待验。

尽量避免使用float(浮动)和position:absolute/fixed

2009-09-13T15:05:00.002+08:00

一直误以为position的效率比float低，并在之前的一个项目大量应用float并使用了许多float相关的奇技淫巧，上线后发现页面速度并不理想，当时以为是该产品UI设计比较复杂，图形太多的缘故，并没有想太多，这次开始新项目，强制要求8秒载入，痛心疾首要对产品的加载速度做优化，前端页面自然首当其冲，这时忽然想到比较一下float和position的性能，简单改了下以前的一个<a
href="http://www.moonless.net/demo/9/">例子</a>，测试方法是载入53100个同级div，分别设以不同的样式，用onload看载入时间，以下是测试结果：
position:static 2.012秒
position:relative 2.124秒
position:absolute 191.422秒
position:fixed 187.606秒
float:left 未响应……

display:inline-block 31.221秒
faint...
我猜到了大约情况，却没料到是这样的结局，自我反省中……

<a href="http://www.moonless.net/demo/9/haslayout.zip">演示下载</a>

顺便赞一下chrome，比firefox快不是一点半点；
另外，以上测试在IE中除了float:left，均在3秒左右，IE中如果使用{float:left:clear:both}，不会出现未响应，载入在30秒以内

关于RO纯水、小分子团水、长期饮用水的一些资料搜集

2009-09-03T17:06:00.001+08:00

刚装了RO直饮纯水机，无杂质，口感微甜，ph值听说在6.5-7左右，感觉还不错，而后却从朋友那了解到小分子团水的概念，遂对自己的选择产生了质疑：
faint，是不是花了钱却没买到健康，我得补补课了……

google了不少资料，关于小分子团水的介绍大多是商业说法，没找到确实可信的材料，不过从wiki和一个叫中国净水行业委员会的民间组织（看它的网站还是有点山寨的感觉）找到了一些数据，应该相对比较可信，摘录资料放在最后面，供参考查阅。

网上有些区别小分子团水和普通水的方法，其中有一则是将水和植物油混合在一起摇匀，普通水不能和油混在一起，油是油水是水，而小分子团水则会和油互相混合，我回家试了试，RO纯水也可以啊……（后面上图）
考虑到比较浪费油，所以没试普通水是不是也会出现这种现象:D

RO纯水中的小气泡：

RO纯水和植物油：

wiki资料：

纯净水，简称净水或纯水，是纯洁、干净，不含有杂质或细菌的水，是以符合生活饮用水卫生标准的水为原水，通过电渗析器法、离子交换器法、反渗透法、蒸馏法及其他适当的加工方法制得而成，密封于容器内，且不含任何添加物，无色透明，可直接饮用。市场上出售的太空水，蒸馏水均属纯净水。有时候这个词也和化学实验室中提炼的蒸馏水或雨水通用。

纯净水最代表就是R.O, 其实人体所需要的矿物质很难从水中得到，不排除水中的矿物质是有好的，但非常地少，若要从水中摄取矿物质，每天都要一大缸的水才能足够摄取人体所需要的矿物质的分量，人体的矿物质是由食物得来的，相反地水中有很多有害物质是对人体有害的

资料0（出处）：

现状和机理
1、水分子由二个氢原子和一个氧原子组成，三角形结构，结合角为105°。
2、水分子团结构是一种动态结合，即不断有水分子加入某水分子团，又有水分子离开该水分子团。
3、水分子团的大小与水的温度、离子浓度、pH值、外界施加的能量都会对水分子团结构变化有影响。
4、水到达沸点时，大部分以单分子（H2O）形式存在。当外界影响（能量）撤离并一段时间后，由于氢键作用，又可能回复到原来的分子团结构。

结论
1、水的分子团结构在动态变化。
2、国际上任何水质标准都没有水分子团的指标，也没有水分子团测试方法标准。
3、“小分子水”对人体健康的影响缺乏令人信服的临床医学报告和科学鉴定。
4、卫生部对“小分子水”及其制取装置不发卫生许可批件。

资料1（从google快照找到的资料）：

中国民（私）营经济研究会净水行业委员2008年年度工作报告:
对使用假批件的企业进行网络曝光；对能量杯事件进行网络讨论；对小分子团水的虚假宣传中央台曝光；对无批件的净水器鼓励企业举报等。
举例：小分子团水在中央二台曝光后，有数家宣传小分子团的企业来向秘书处咨询，在秘书处多次以专业知识的引导下，取得了他们的认可，改正了他们的经营理念，合法合理经营，现在的产量和销售额比以前翻了倍。

资料2（出处）：

如何看待小分子团的水？
目前，有许多厂家宣扬自己的净水设备制出来的水是小分子团的水，如何有益于人体的健康。那么到底存在不存在小分子团的水？《2007年中国净水行业蓝皮书》作出了以下回答：

1、水分子由二个氢原子和一个氧原子组成，三角形结构，结合角为105°。

2、水分子团结构是一种动态结合，即不断有水分子加入某水分子团，又有水分子离开该水分子团。

3、水分子团的大小与水的温度、离子浓度、PH值、外界施加的能量（如：电场、磁场、声波、射线、红外线、压力等等）有关，它们都会对水分子团结构变化有影响。

4、当外界影响（能量）撤离一段时间后，由于氢键作用，又可能回复到原来的分子团结构。

5、水喝到胃中后，由于胃内的温度、PH值、离子浓度等影响，喝下去的水的分子团结构会发生变化。

通过以上几点可以得出如下结论：

第一、水的分子团结构相当复杂，还有待深入研究。

第二、任何水质标准（中国、外国）中，都没有水分子团的指标，也没有水分子团测试方法标准。

第三、号称“小分子团水”及其制取装置，目前尚无足够的、公认的科学依据，没有可靠的实验数据和论证，因此，所谓“小分子团水”有益于人体健康，缺乏令人信服的临床医学报告和科学鉴定。

资料3（出处）：

正常饮用水，无须强调酸碱度
今年农夫山泉着实火了一把。
随着“天然弱碱性水，更适合人体饮用”口号的打响和揭开康师傅矿泉水并未采用优质水源而使用的是普通的自来水层层净化的真相，农夫山泉在2008年不仅销量大增，而且影响了千千万万个消费者。走进终端，净水产品的专柜前面，普通消费者通常提出的第一个问题就是“出水是弱碱性水吗？”消费者络绎不绝，这样的问题却大都类似，甚至有的人在一听到你回答是否定的时候立即调头就走。
不同意见意味着广泛的注意力，印证了农夫山泉新广告的成功。与最初“农夫山泉有点甜”的广告相比，“碱性水”概念的提出，不仅再次强调了农夫山泉与其他饮用水的不同，而且富有健康内涵。对越来越注重饮食健康的消费者来说，这样的营销策略显然是“正中要害”。
农夫山泉最近提出的“pH试纸测水”广告引来不同意见。
医学专家指出，普通人没有必要专门去饮用弱碱性水。
卫生专家提出，水的pH值与人体健康的关系目前并没有得到证明。
最困惑的莫过于普通消费者了，不知道喝酸性水是否意味着对身体有害。
《生活饮用水标准》规定，PH值在6.5—8.5之间都是适合人体饮用的标准。
人体的胃液是一个酸性环境，无论饮用的水是弱酸性还是弱碱性，一进入胃中，马上会变成酸性的溶液。而且如果一直强调喝强碱性水，酸碱一中和，冲淡胃液，则影响正常消化功能。
人类对饮用水的要求，不应该一谓无知地强调弱酸性还是弱碱性，没有污染或者已经去除污染的水才是好水。

资料4（出处）：

揭开酸碱水的真相
摘自《中国净水行业委员会 2007 年蓝皮书》
首先，来让我们了解一下水质标准中的 pH 值指标：
①世界卫生组织（ WHO ）：低 pH 值有腐蚀作用，高 PH 值影响味觉，为使加氯更为有效，以 pH ≤ 8 为宜。
②美国 EPA （环境保护署）：一级水，没有具体指标；二级水， 6.5 ~ 8.5 。
③欧盟（ EC ）： 6.5 ~ 9.5 。对于瓶装或桶装的净水， pH 最小值应降至 4 ~ 5 。
④我国 GB5749-2006 ： 6.5 ~ 8.5 。 GB17323 瓶装饮用纯净水， 5.0 ~ 7.0 。
很多天然的好水是偏酸性的。如：广西省武鸣县大明山岽寺淡泉， pH 为 6.7 ；浙江省杭州市虎跑泉， pH 为 5.8 。
因此，以偏酸性还是偏碱性来划分水质的好坏是不科学的，要以是否符合水质标准、水中的杂质及其受污染情况来决定水质的好坏。
水是喝到胃里，胃的环境是酸性， pH 约为 2 ~ 3 。不管你喝什么水，喝到胃里后， pH 值都会改变。
对于饮用水 pH 值来说，符合标准的水都可以饮用，不存在喝碱性水好还是喝酸性水好。水是既不致酸、也不致碱的物质，“喝碱性水好”完全是不成立，是无依据的、不科学的误导。

PS：没有找到多处提及的《2007年中国净水行业蓝皮书》，有机会应该看一看。

家里新装纯水机

2009-09-02T10:56:00.002+08:00

家里新装纯水机，总共买了3台，其他2台要拉到父母家自己装……
但这东西挺复杂，我已经忘了怎么装了-_-b

出水龙头：

另外两个准备拉到PDS和怀柔的未开箱纯水机，我还在发愁到时候怎么装呢……

左侧是1微米PP棉，右侧是5微米的，中间是什么忘了……
哪个是后置活性炭、RO滤芯等等也都忘了……
不过白色的球状物是压力桶，纯水制好了就存在这里面：

【工作方式分享】多次复制/粘贴

2009-09-02T10:47:00.001+08:00

不便场景一：
正在ctrlC/ctrlV某篇文章，忽然想粘贴刚才copy过的某段文字，但剪贴板只能保存一次copy，刚才那个文章的网址又忘了……
郁闷啊……

不便场景二：
编辑网页源码，看到有这样一段路径：
/group2/images/logo.gif
想看这个图片是什么样，于是复制了之后粘贴到地址栏，然后切换回来再复制域名(http://i.chinaren.com/group)想拼成完整的url：
http://i.chinaren.com/group2/images/logo.gif
……
晕啊，刚才粘贴到地址栏的东西怎么没啦～～
郁闷……

解决方案：
其实有很多工具可以实现多次复制/粘贴操作，下面以clipx为例介绍一下多次复制的方便之处：

clipx个绿色软件，直接解压放到某个地方就ok，它有许多设置选项就不多说了，直接看效果：

在保持clipx运行中的情况下，我们复制一段路径：

然后再复制主域名：

接着在新的地址栏中先按ctrl+v把主域名粘贴好，之后在输入光标处输入win+v，此时出现一个历史列表：

用键盘上下或鼠标选择所需内容即可。

下载

【工作方式分享】快速切换hosts，不用重启浏览器

2009-09-02T10:35:00.002+08:00

工作中可能经常遇到需要设置hosts访问目标服务器的情况，通常的流程可能是：
1、手动修改hosts内容
2、保存
3、关闭浏览器
4、打开浏览器
5、刷新

如果经常需要修改就比较累，自己用笨办法简化为：
1、点击切换hosts
2、刷新(IE)或点击刷新(FF)

具体方法如下：

一、安装

1、解压文件，运行init.bat

2、在任务栏的空白处点击右键，会弹出如下菜单

3、选择“工具栏”->“新建工具栏”

4、在弹出的资源管理器中找到你的C:/windows/system32/drivers/etc目录，然后确定

5、这时在任务栏就会出现etc文件夹，旁边有个箭头，点击就会出现菜单了。

二、“原理”
其实就是在etc文件夹生成a、b两个文件，其中b文件为空，a文件就是你原来的hosts文件；
内网.bat就是用a文件覆盖hosts文件；
外网.bat就是用b文件覆盖hosts文件；
你可以自行修改a和b文件的内容，当然自己再做一个c、d、e等等也可以，不过相应的你还得自己增加内网c.bat、内网d.bat等等

三、如何切换
想访问内网时就点内网.bat，想访问外网时就点外网.bat……

四、切换之后浏览器的操作
如果你用IE，直接F5或Ctrl+F5刷新即可；
如果你用firefox，首先需要有这个插件：https://addons.mozilla.org/zh-CN/firefox/addon/7408，装完之后会在右下角出现一行ip地址，如图所示，当切换hosts之后，用鼠标点击ip地址即可。

如果你用chrome，请关闭再重新打开吧……

比较啰嗦，抛砖引玉吧……希望大家也分享下自己的工作技巧哈～

nth-child和nth-of-type以及last-*的区别

2009-08-26T15:56:00.001+08:00

其实区别很简单：
“with the same expanded element name”

而last-*简单理解就是倒序：
“after it in the document tree”
默认是：
“before it in the document tree”

计算方法同样是an+b-1，并允许取值为odd或even，看演示

详细介绍：http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

IE interpolation(图片插值模式)管窥

2009-08-19T11:43:00.003+08:00

有同事email提议：

产品的用户头像在IE下看起来很糙，可以利用“双三次插值”方法对图片已经处理，让它看起来柔和一些。IE7本身就有这个私有属性，我也火星一下，才了解到，不过对我们产品的细节有帮助，可以看看给需要优化的图片加个样式，改善在IE7下因缩放造成的失真。
样式属性：-ms-interpolation-mode:bicubic
我拿新班级首页代码试了下，挺明显的，为了测试效果直接作用于所有img标签了，img{-ms-interpolation-mode:bicubic;}
效果对比见下图：

隐约记得年初时看到过相关介绍，使劲回忆了下为什么当时没有应用的原因：还是效率问题

这个interpolation（插值模式）没有默认值，只有nearest-neighbor（近邻取样/仿色）和bicubic （双三次插值）两个值，后者效率较低。
虽然说是没有默认值，但msdn上却有一句话：
If the zoom level of the page is 100%, the default interpolation is nearest-neighbor, otherwise bicubic mode is used.
也就是说，当你缩放网页时（Ctrl+滚轮或查看->缩放），只要不是100%，图像的算法就会变成双三次插值，所以应该可以理解为IE7默认的插值算法就是临近取样；

然后，IE6不支持缩放，所以和它无关；
IE7呢？请参考附件截图（nearest-neighbor.png, bicubic.png, none.png），F5刷新页面瞬间，默认和指定临近取样时cpu 占用都在70%左右，而双三次插值则到了97%甚至100%；
而IE8默认就是双三次插值，cpu 占用始终在60%左右，这时再指定临近取样也是生效的，而且能看到cpu占用的降低；

所以从IE7默认不打开双三次插值这一点来看，也许微软觉得IE7默认执行不太靠谱，尤其是元素比较多的情况，所以让我们自己权衡……

于是除了附件中的截图，又做了个小试验，初衷仍然是：“好在它是个style属性，可以自行指定想在哪些元素上应用，效率应该还是可以控制的”
然而结果很无奈，cpu的占用会随着你应用双三次插值元素数量的增加而增加……截图中那个页，一半数量的成员头像开启双三次插值就让cpu飙到了94%

以上cpu占用数据都是指刷新/打开页面的瞬间，并且在虚拟机中测试。

虽然个人还是倾向于对某些需要着重显示的图片如此处理（比如相册大图、幻灯效果之类），
但仍可以多做测试，看是否能正式在产品中应用以改善在IE7的显示效果。

再次鄙视一下IE6、7

循序渐进、温故知新，热情人生却有悲怆结局

2009-07-09T16:48:00.002+08:00

每月不到几个小时的吉它练习已跌跌撞撞步入G大调，同真理的一般规律一样，循序渐进、温故知新这八个字在人生不同的阶段、不同环境总能远远地在前方对你展现出狡黠而深邃的慧光，有所悟，不可求

为什么人生要在不断地尝试、温习这恼人的轮回中度过，好容易攒足了一定的脑水又全化为枯骨。
为什么现时的欲求满足、自我实现总洋溢着某种悲怆的味道。

Pure Love是支很好的歌，但很后悔看了它的MV，这听起来明明是首节奏欢快热情洋溢令人心暖的曲子，而MV居然是这样的故事、这样的结局……也许这是人生真谛的部分影射

事实上把自己压抑在某种心情里是种很享受的事情，理智也许不是正确的，迷失未尝不是种解脱，沉沦也自有它的妙处
抓住温软的现实，给尚能回忆的自己留下足够多的热情欢乐，让人生洋溢幸福是自己最弥足珍贵的力量，不要吝惜自己的身体，驱使它去碰触让自己灵魂颤抖的东西吧……
ba ra la la la la ba la la la, cause this is pure love...

好久不找歌了，推荐歌曲3首

2009-07-09T10:40:00.010+08:00

刚听到的快歌：
Pure Love - Arash feat Helena - 试听

这首《Pure Love》是伊朗天王Arash与法国天后Helena合作的醉人单曲，有着浓郁的异域风情。浓郁的异域风味.曲风跳跃洋溢，有着大家熟悉的印巴线条，略带吉普赛的狂放.Arash是伊朗流行音乐界炙手可热的人物，不仅在中东地区拥有数量可观的粉丝，连世界上最难俘获的美国歌迷，都被他的音乐折磨地神魂颠倒，不少金发碧眼的美国女孩，放着安稳的日子不过，不惜冒着生命危险，踏进战火连天的中东地区，就是为了见到Arash一面。Arash到底有何魅力，能让全球歌迷拜倒在他的伊斯兰短裤下呢？首先是他异常神秘的作曲和编曲功力无人能敌，其次是他充满磁性的声音可以很有效地激发人们的听觉神经，再次是他异域黑马王子的帅气形象和善良的本性。他歌颂爱与和平，不管是在他的祖国伊朗，还是在花花世界美国，他都始终坚持着自己的信仰，在这个喧嚣迷乱的娱乐界，Arash靠自己的赤诚和实力赢得了人们的认可。
转自：http://www.foolren.com/viewarticle.asp?id=647&page=2

两首慢歌：
1、Oh Dear - Sophie Zelmani - 试听

Zelmani十四岁的时候拥有了她的第一把吉他，她的父亲教她和弦。差不多十年以后，开始陆续将自己录制的小样寄给各家唱片公司。索尼公司第一个给了她答复，并且把她介绍给曾和Ulf
Lundell与Bo Kaspers Orkester合作过的创作人兼吉他手Lars
Halapi。在与Zelmani的合作中，Halapi负责编曲，他把Van
Morrison风格融入到她的新专辑中，这也许是他最出色的地方。不过词作者都是Zelmani，她的柔和清澈的嗓音给人一种甜而不腻的感觉。1995年冬天，专辑打入流行榜单第四名，不久便在瑞典和日本大卖。
从1995年开始，来自瑞典这个北方国度的甜美清新邻家女孩苏菲珊曼妮，便以生活化、发自内心真诚的诗意词句，简单干净透澈却能直接触摸隐藏在心灵深处纤纤情感的音乐，而征服了瑞典、欧陆甚至亚洲的广大歌迷。Sophie的音乐之所以能像她的人一样，情感纤细、纯净亲切而动人，那是因为她的歌直接纪录了她的成长心路历程。最新作品Sing
And Dance，仿佛用音乐来回忆着过去那些在情感正要愈合，然而一旦触碰到还是会带来疼痛的伤口，那沁凉萧瑟绝美的意境，就是这么让人愈听愈沉醉其中而难以自拔
转自：google音乐

2、Decrocher Les Etoiles - KerenAnn & Benjamin Biolay - 试听

她出生在以色列，从小学吉他时就开始学习Joni
Mitchell的曲子，11岁举家迁往巴黎后竟然得到了JoniMitchell的赏识而结识了着名制作人Benjamin
Biolay，后者的古典音乐背景为她的作品带来更丰富的编配层次。2000年KerenAnn的首张专辑 LaBiographie De
Luka Philipsen 融入了俄国文学、犹太民谣和法国诗歌，并以Trip-Hop、民谣及法国流行乐的融合形式现身，一举在欧洲赢得巨大成功。一曲
Jardind’Hiver 更是惊动了80高龄的法国Bossa
Nova鼻祖HenriSalvador，后者在自己的经典复出专辑Chambre Avec
Vue中收录了包括Jardind’Hiver在内的5首由BenjaminBiolay和KerenAnn创作的曲子。
KerenAnn是个用法语歌唱生活的女孩，她的民谣实在“清新”，和古老的传说联系在一起，和远去的岁月里绵绵的小故事牵手，直接承载于简陋的乐器声中。然而，从第二张专辑La
Disparition开始，KerenAnn在民谣中加入了更多爵士和布鲁斯的元素。
转自：维基百科

稳定访问被墙的blogger、youtube甚至google的方法

2009-06-18T17:01:00.005+08:00

同事: www.google.cn的服务器在国内，不会被盾，所以可以用它当代理，因为是官方的，速度极快。
可以使用代理自动配置脚本，这样就可以做到只针对blogger和youtube这两家网站使用代理，其它网站直接连接，不影响浏览速度，不去来回切换。

最近google.com也常被墙，索性把google.com也加进去了……

function FindProxyForURL(url,host){
if(dnsDomainIs(host, ".blogspot.com")){
return "PROXY 203.208.37.160:80";
}
if(dnsDomainIs(host, ".blogger.com")){
return "PROXY 203.208.37.160:80";
}
if(dnsDomainIs(host, ".youtube.com")){
return "PROXY 203.208.37.160:80";
}
if(dnsDomainIs(host, ".google.com")){
return "PROXY 203.208.37.160:80";
}
return "DIRECT";
}

附使用方法：
把以上脚本存为proxy.pac，放到某盘(如e)，勾选浏览器代理设置中的“使用自动配置脚本”，填入“file:///e:/proxy.pac”

浅析ie6 css expression效率、覆盖原理、优先问题

2009-04-01T11:12:00.007+08:00

通常expression就是不标准、效率低、消耗大、不稳定的代名词，原因大家都知道，很早以前就知道用简单的表达式和重置可以克服这个问题，但由于以前一直规定不允许用expression，所以也没细看是怎么重置的，知道最近看了old9去年的文章才略知一二，其实原理很简单，无非就是利用级联的规则重新赋值，从这个例子可以看到，ie6仍是按照css的级联规则来决定是否、何时执行expression，而expression的执行次数除了事件之外，和它所能作用的元素的个数有关，重置其实是为html标签增加style属性（Inline Styles），而Inline Styles优先级通常是最高的，所以内部样式、外联样式定义的expression不再执行，也就达到了我们的目的：减少expression多次执行带来的灾难。

个人觉得对于IE6这种东西，用简单的expression修正一些不舒服的bug是完全没有问题的，比如：

IE6不缓存背景图的bug：
body {_zoom:expression(function(x){document.execCommand('BackgroundImageCache', false, true);x.style.zoom=1;}(this))}

没有max-width、max-height，ie6对于元素的高宽难以限制，也可以用这种方法；
有人会说用脚本更好，但举个例子吧，我们都遇到过图片缩放问题，用户上传了分辨率超大的图片，如何限制在一个较小的区域内并且等比缩放呢？用脚本缩放会出现一个情况，在网络较慢的时候，页面会先显示一张大图，然后瞬间被缩放，图多的时候尤为明显，IE6中onload事件对这个点的判断不太准确，这里有两个例子：

1、haslayout渲染与不渲染时，onload的区别
2、expression、onload、window.attachEvent的执行次序

所以，如果要将图片缩放到75*100，可以这样，思路是先加载，再处理：

img {max-width:75px;max-height:100px;_zoom:expression(function(x){var w=x.width||x.offsetWidth,h=x.height||x.offsetHeight);if(w>75&&75*h/w<=100)x.style.width=75;if(h>100&&100*w/h<=75)x.style.height=100;if(x.style.width!=''||x.style.height!='')x.style.zoom=1}(this))}

但事实上这样的效率也不怎么样，要给所有img赋style.width/height并判断，最后才取消expression；
==2009.4.4补充==============
用expression处理图片不稳定，img onload与否不好判断，还是不建议这么用。
============================
另一种流行的解决方法是用脚本，思路是先处理，再加载（查看示例）

在允许使用expression的前提下，适度使用还是可以的，退一步说，IE6早晚都消亡，应该给IE6的用户培养这样一种感觉：“IE6效果不好、速度慢，升升级是不是好点……”囧~

八卦：google也许要在3月30日推出新产品？

2009-03-26T10:22:00.003+08:00

来源：http://www.neo-biz.com/?p=235

有人说google马上要发布的产品是p2p方面的，想想还真有可能，这有篇相关文章：http://www.bitscn.com/pdb/java/200605/21556.html
而且之前google也谴责isp限制p2p是非法的，哈哈

不过为什么是30日，不是我们想当然的4.1呢？不过希望不是八卦，不管是p2p还是gdrive，都不错，强烈期待中……

CSS实现限制行内字符的最大长度且超长能加省略号

2009-03-10T15:04:00.006+08:00

网友“14px”提供了一个思路，很妙，以前只想到用换行、限高截断字符以避免出现半个字，但没想到用背景出省略号，呵呵，赞一个

但原帖的方式太复杂，恐怕不够实用，并且由于firefox尚未支持word-wrap和wrod-break，所以类似这种字符（“借某人名字nangongruiyangsdf打”）在firefox中会整体换行，显示结果就是字符和省略号之间出现空白-_-

不管怎样，把以前的一个例子改造一下：http://www.moonless.net/demo/20
但这样加省略号的缺陷还是很明显的：对非宋体无能为力，中英文混排效果也不理想，权当研究，也许以后有更好的方法。

word-wrap跳票到firefox3.5了……

2009-03-10T13:43:00.002+08:00

https://developer.mozilla.org/En/CSS/Word-wrap
同时在thunderbird中获得支持。
其实word-wrap已经成为css3的属性，并且受text-wrap的影响。

IE6/7 hasLayout导致cursor有时变为text或失效的bug

2009-02-17T13:46:00.004+08:00

先看例子：http://www.moonless.net/demo/15

可以看到：
例一中空白区域鼠标指针变成了文本状（cursor:text）；
例二中本应来欲指定元素中鼠标样式为手形（cursor:pointer），但却没起作用；

觉得这应该是个bug，是触发了元素的hasLayout造成的，怎么修复不太清楚，但以下方法可避免：
1、尽量不要触发hasLayout
2、指定非transparent的background
3、让它float
4、让它包含在一个float的元素里（即使不是直接包含）

对img行间对齐以及vertical-align:middle的探讨

2009-02-04T17:55:00.005+08:00

对于vertical-align:middle，w3的解释很简单：
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

这个x-height的定义是：
The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is defined even for fonts that don't contain an "x".

单位“ex”的定义是：the 'x-height' of the relevant font，按理说如果选定了字体，x-height应该比em和px更靠谱，但操作系统、浏览器、字体版本等等各种各样的因素导致我们无法信任以字体为出发点的表现处理；

所以middle实际上应该是对齐到基线上方1/4倍ex的位置，但浏览器的处理各不相同，尤其是中英文混排的时候，虽然有人提出如下方案进行补足（如果认为1ex=0.5em，那应是0.25em，但考虑到中文的情况，修改为0.2em）：

img {vertical-align:middle;margin-bottom:0.2em}

但烦人的是随着系统环境的不断升级，如果你的用户很巨量，你要面对的新旧版本差异范围会越来越大，兼容or不兼容，这是个问题……

鉴于所有市面上的操作系统和浏览器都是中文苦手的，中英文混排时对line-height、baseline、x-height计算的混乱不是它们的错，更不是我们的错，而宋体5.0的出现和IE8的“文本模式”提醒我们：不能再跟这些属性较劲，一切交给浏览器去处理吧（把出错的原因都推给浏览器吧……@_@）

4400插曲:a place in time, worry about you

2009-01-23T15:41:00.003+08:00

科幻剧有很多，但叙事风格有如在你耳边娓娓道来、节奏舒适、比较深沉、有内涵的类型除了斯导的《天劫Taken》大概就是《4400》了，和《Heros》、《超人前传》的花哨以及《StarGate》、《Lost in space》的硬科幻相比，有很多对人生意义和人性的探讨，但可惜的是，由于种种原因，第3季开始剧情变得有些平庸，在收视率以及同类剧集的压力下，第5季终于被砍……
非常可惜啊，我想看到结局……
这其实是非常优秀的一部美剧，片首曲和插曲的意境非常好，推荐欣赏：
http://www.youtube.com/watch?v=DMBcyt_CRM4
http://www.youtube.com/watch?v=68vpChfsQWI
最后，怀念一下主角Tom Baldwin

Eminem - Stan Feat. Dido & Thank You

2009-01-23T10:59:00.003+08:00

《Eminem - Stan Feat. Dido》很早以前就在听，今天偶尔看到了它的MV：http://www.tudou.com/programs/view/Lp1_g9qFpf8/

背景音乐“Dido - 《Thank You》”出自 Dido 1999年的专辑“No Angel”，这首MTV获得了2001年度MTV 音乐录影带大奖最佳女艺人的提名。
http://www.youtube.com/watch?v=_1CjbcqhGyU

对一些webmail的抱怨

2009-01-20T16:55:00.000+08:00

很郁闷，做好的信件要用table和写死style的形式重置一番……

发发牢骚：

原因很简单，是gmail、hotmail、sohu等一些直接把信体放在自己页面里的webmail会过滤掉信体中的<style><link>以及<body>等标签、class属性以及一些样式属性也被过滤掉了

暂且不论这些webmail是谁在抄谁，我觉得从设计角度及用户体验上将讲，如何忠实地还原信体应是webmail的一个基本原则，邮箱这个东西发展得太久了，虽然很成熟，但形式上已经落后许多，还有不少固有的陈旧理念像一块息肉牢牢地长在上面，即使有gmail这样的创新产品出现，但它仍然不愿拿下beta的帽子，原因在哪？

如果从安全角度考虑，过滤掉一些危险标签和expression也就算了、position样式不用没关系，但竟要过滤掉<style>和class属性、float样式，如果原因是为了避免对整个产品的样式造成影响，但问题是谁让你把产品做成这种不强壮的形式呢？

然后还把背景图临时屏蔽掉@_@，如果这么做是为了安全考虑，那为啥不把img屏蔽掉呢？难道大家的信件都要做成一张图片，形式呆板才好看是吗？

希望是愚见浅薄，但如果继续墨守成规，总有一天邮件会被IM和webIM所取代

小技巧：css截字，如何避免出现半个字

2009-01-19T16:57:00.005+08:00

真是很简单到不能称之为技巧的技巧，以前怎么没想到呢@_@

通常我们限定字符长度的时候可能会这么做：

<div style="width:503px;margin:1em;overflow:hidden;line-height:1.5em;background:#9cf;font-size:12px">
<p style="float:left;width:383px;margin:0;overflow:hidden;white-space:nowrap">1月19日，来自著名的《超级机器人大战》系列在NDS上即将于w4月2日推出的最新作品《超级机器人大战K》开放了官方w网站</p>
<p style="float:right;width:110px;margin:0;background:#eee;text-align:right">2009-1-19 15:48:51</p>
</div>

可以看到，由于是中英文混排并且不是等宽的宋体，如果不考虑text-overflow:ellipsis，很容易出现半个字的情况，怎么解决呢？这个方法大家应该都应用过：

<div style="width:503px;margin:1em;overflow:hidden;line-height:1.5em;background:#9cf;font-size:12px">
<p style="float:left;width:383px;height:1.5em;margin:0;overflow:hidden">1月19日，来自著名的《超级机器人大战》系列在NDS上即将于4月2日推出的最新作品《超级机器人大战K》开放了官w方网站</p>
<p style="float:right;width:110px;margin:0;background:#eee;text-align:right">2009-1-19 15:48:51</p>
</div>

囧~

Gmail新增更换主题功能

2008-11-20T09:12:00.005+08:00

一早打开gmail收信，就看到了页面上方的提示（忘了截图了）大抵意思是说新增了主题功能云云……

默认的主题是蓝色（跟以前的界面相比，上方外框的蓝色更深了），进入设置区后可以看到一大堆主题，哗～口水都流出来了……

gmail把igoogle那种根据时间变化的主题也搬了进来，这个换皮功能我觉得比一般的强多了～
正在爽中，发几张截图：
http://www.moonless.net/demo/8/1.jpg
http://www.moonless.net/demo/8/2.jpg
这张比较有特色：http://www.moonless.net/demo/8/3.jpg

另外还有个主题名字叫“绝妙”，难不成是gmail的谐音？呵呵

这才是在做产品，不是翻天覆地的变化就应该保持低调，那种做了个一般般的功能却大肆宣传的噱头党可能会为产品带来一时的热度，但失去的是自己的信誉和用户的忠诚

haslayout,display,position:relative脚本显示隐藏问题

2008-11-19T18:37:00.002+08:00

今天遇到个bug，搞不明白，只是找到了问题表象，不知道个中原因，也许还是跟hasLayout和position:relative有关吧……
具体是，当满足以下3种情况时：
1、当前容器有float、左右负margin、position:relative属性；
2、当前容器的父元素的父元素hasLayout；
3、由js控制父元素的父元素的display显示/隐藏；
在ie6、7有一些奇怪的问题（当前容器的位置在被display显示隐藏后会变），原因不明，大家避免吧……
结构：
<div>
<div>
<p>内容</p>
</div>
</div>

[自翻] css2.1的9.5.1节 - 浮动的位置控制：浮动的属性

2008-11-13T18:35:00.005+08:00

原文：9.5.1 Positioning the float: the 'float' property

Float:

left
元素产生一个块级盒并浮动到左边。文档流从盒的顶端开始流向右边（服从“clear”属性）。
right
和“left”相似，不同的是盒浮动到左边，而文档流从盒的顶端开始流向左边。

浏览器可能会把根元素的float属性视为none。

下面是使用float控制表现的详细规则：

1、一个向左浮动的盒的左[外边界]必定在它的[C.B.]的左边界的左边。向右浮动的元素则情况相反。

2、假如当前盒向左浮动，并且源码中有任何向左浮动的盒出现在它前面的话，会按以下2种情况之一呈现：
a.当前盒的左[外边界]必须在那些更早出现的盒的右[外边界]的右边；
b.当前盒的顶端必须在那些更早出现的盒的下面；
此规则同样适用于向右浮动的元素。

3、一个向左浮动的盒的右[外边界]必定在“它右边的任何向右浮动的盒的左[外边界]”的左边。向右浮动的元素则情况相反。

4、一个浮动盒的上[外边界]必定在它的[C.B.]的顶端之下。当浮动元素在两个折叠margin之间时，浮动元素的放置位置就好像是在文档流中出现另一个空的匿名块级盒包在外面一样。这个匿名盒位置的界定遵从[margin折叠规则]。

5、一个浮动盒的上[外边界]必定在“任何在源码中出现得早的块级或浮动盒”的上[外边界]之下。

6、在一个元素中，一个浮动盒的上[外边界]必定在“任何在源码中出现得早的含有盒的[line box]”的顶端之下。

7、假设一个向左浮动的盒的左边有另一个向左浮动的盒，它的右[外边界]必定在它的[C.B.]的右边界的左边。（不太严格地说：一个向左浮动的盒不会超出它的[C.B.]的右边界，除非它已经足够靠右了）。此规则同样适用于向右浮动的元素。

8、一个浮动盒总会被放置在尽可能靠上的位置。

9、一个向左浮动的盒总会被尽可能放在左边，一个向右浮动的盒总会被尽可能放在右边。而放置它们时，尽量往上放置又总会优先于往左右放置。

以上规则中提到的元素的浮动规则均是指在相同的[块级环境]中。

css中通配符*的效率问题,html及其样式的模块化

2008-11-12T18:44:00.000+08:00

初进RIA群，一进来就讨论到css中通配符*的效率问题以及html及其样式的模块化问题；
后者其实一直以来都是这么设计的，只是没有真正和RIA沟通过，个人觉得自己的结构应该是比较方便套程序并进行模块化的，

不过这个问题还有待进一步去探讨和完善；

前者自己又做了个测试，和以前一样，写了个脚本，利用onload来计算载入时间：
1、在不同浏览器中测试；
2、使用固定数目的html元素；
3、分别使用*和单个选择器去设定margin:0;padding:0
结果是*的效率占优。

后面又带出两个问题：
1、关于是不是该用*的问题？
其实大家都已经感同身受，不同浏览器对于置换元素总是施以自己独特的样式控制，用*去去掉他们并不能得到预想的效果；
2、测试的方法是不是不正确？onload到底是不是on 渲染完毕然后load呢？
明建提出onload只是判断资源载入完毕，但我以前的例子《IE hasLayout效率测试》又正好推翻了这一点，具体应是什么情况还得让高人们多做一些分析测试并分享下～

但我觉得，onload可能并不是很准确，但应该在一定程度上也能说明一些问题，至少能说明使用*在效率上应该是差不太多的。
待议……

当开心PK开心，所有人都要当心？

2008-11-10T10:12:00.002+08:00

今天Pidgin提示hotmail有封新邮件，遂去打开，开始以为是在开心网有谁加我好友、要我去确认呢，没太注意，等网站打开之后才发现是此开心而非彼开心（我没有在kaixin.com注册过）……

不知还有多少人会这样“没太注意”呢……

截图：http://www.moonless.net/demo/14

Dreamweaver CS4 Subversion的安装方法

2008-10-31T11:55:00.000+08:00

如果你的计算机上安装的SVN工具比Dreamweaver CS4自带的SVN扩展版本高时，运行CS4 中的SVN扩展时会出现以下提示：
“
SVN: #155021. You cannot update this file using Dreamweaver's Subversion integration because a newer Subversion

client application on your machine has made updates to the file's Subversion meta data. For more information on

this issue, see http://www.adobe.com/go/dw_svn_en.
”

Adobe提供的解决方法如下：

1、退出Dreamweaver
2、下载：
中文：http://www.adobe.com/support/dreamweaver/ts/documents/kb406661/DWSVNConvert_zh_cn.mxp
英文：http://www.adobe.com/support/dreamweaver/ts/documents/kb406661/DWSVNConvert_en_us.mxp
3、运行Adobe Extension Manager CS4
4、点击“文件”->“安装扩展”
5、选择刚才的.mxp文件，然后勾选“已启用”
6、退出Adobe Extension Manager CS4

7、下载Python：http://www.python.org/ftp/python/2.6/python-2.6.msi
8、安装并记好安装的路径，比如：E:\Program Files\Python26
9、安装完毕后可能需要重启
10、打开Windows系统设置
11、点击“高级”->“环境变量”->““系统变量”->“新建”
12、输入变量名：“PATH”；变量值：“E:\Program Files\Python26”（即之前Python的安装路径），然后确定保存，之后可

能需要重新启动计算机。

13、运行Adobe Dreamweaver CS4
14、点击“Commands”->“Subversion 兼容性”
15、点击“OK”进行转换，并提示成功；如果你的计算机上安装的SVN工具版本
16、刷新你的站点，这是你可以正常使用Dreamweaver CS4进行SVN操作了。

css sprites，鸡肋还是良药？

2008-10-22T17:16:00.007+08:00

今天技术部门的领导发给我们一封邮件，大体上是推荐css sprites，并要求我们在今后的工作中多作应用。

我的第一感觉是：我们不是闭塞虫～必须得争口气，先列举一些缺点再说…囧~

遂回复如下：

css sprites是一个比较早的概念，关于它的优点说得比较多的是：
1、减少请求数
2、减少并发连接数
3、用户体验好，用css动态交换图片没有延迟及闪烁
4、下载速度快，用户体验好
5、便于维护

但实际上这5条存在如下问题或误解：

1、http1.0没有keepalive，所以在处理一次页面请求时，小文件很多，浏览器和服务器之间除了处理数据的发送/接收还要不断“握手”，效率很低；http1.1提出了keepalive和Pipelining，服务器响应后不是马上关闭连接而是维持连接状态，当页面包含很多文件时，浏览器是排队下载的，传送多个小文件和传送一个大文件应该差不太多，但Pipelining默认都是关闭的，firefox中需要手动才能打开；

2、浏览器对每个主机名请求时的并发连接数是固定的，ie8以前是2或4，目前似乎没有超过8的，所以不存在减少并发连接的问题；

3、在IE6中，背景图片默认不会被缓存，所以即使写成background:url() no-repeat 10px -10px这样的形式，再通过background-position改变背景图位置，也是会重新请求这张图片（表现就是闪烁），以下几种情况例外：这张图片是不透明的、这张图片尺寸足够大、用js强制缓存；

4、我们都看到邮件中的那张图有23K，下载它是需要时间的，这就是说，如果使用css sprites，那么用户在浏览的时候可能出现的情况是：开始页面中没有图标，过了一会儿所有图标全出现了，我觉得不如分成一张张小图片分别加载给用户的感觉会更好些；

5、
css sprites要求图片按照规则很好得码放起来，位置很精确，相应地，在css中的定位也要非常精确，这样做肯定是要花费时间的，而且一旦需要改动，就会出现以下问题：

a. 我们知道gif、png-8都是有损压缩，生成适合web显示的图片时是要减少色彩并通过“仿色”去弥补损失的，我们生成一张图的时候，工具根据图片中的色数、灰度进行复杂的计算，最后生成图片；如果另一个人想要改这张图片（比如增加一个图标），这样整张图片的色数会发生变化，压缩时需要重新进行图片仿色，如果这张图片花花绿绿，什么颜色都有，生成的图片的每一个局部很难保证和原稿保持一致，图片尺寸越大、色彩越多，这种损失表现得更明显，多数情况下直观的感觉是“图片颜色发浅”；

b. 我们的图片服务器是有缓存的，所以假如用css srpites放置所有图标，想在增加/修改一张的话，只能重新上传一整张图片，这样，所有引用这一整张图片的css定义都要跟着修改。

总之，是有利有弊吧……
css sprite这个东西，觉得在流量特别大的地方应该着力应用，平时还是应该权衡一下，我们一直也有在用，但只用在该用的地方，还是分类处理比较好。

个人愚见，有关底层的东西估计理解的不对，还得请技术牛人给解释解释～

很多同事回复，贴个老大的出来^^：

a. CKA (Client-side Keep-Alive) 我们都是关掉的，在达到一定的访问量后，不
关掉CKA的同学会遭受 tcp 连接数过高的困扰，目前只有这两种情况下 CKA 是开的：

1。用 L4~L7 交换机做 TCP offloading,顺便打开 CKA 提升用户感受。以新闻静
态池而言，我们虽然有强大的 L4~L7 switch ...还是关掉了 CKA, 原因见前述。
2。流量小到开不开无所谓。。。

b. 浏览器的 pipe line 限制（允许同一domain name 下打开的并发连接数量限
制）正是合并细碎图形的优势所在。考虑 IE 4~ IE7 访问的情形，缺省情况下同
一 domain name 下的内容无论有多少种 url , 只能同时存在两路连接，你有20个
细碎修饰图，就需要两个、两个、两个。。。一路排队下来。你可以说，在理想的
网络条件下，20个个图排两个队，也比1张图一次 load 下来要快。但事实上，由
于没有 CKA 的帮助，每个细碎修饰图都要发起一个单独的 http 请求，在现实世
界里，20 次 network round trip 消耗的时间远远大于传送图片那点时间开销。

对于服务器负载以及客户感受来说，把20张小图拼成一张大图，是很大的节约，首
先省掉了20个前文说到的 network round trip , 这包括 20 次 tcp 三路握手，
服务器和客户端保持 20 个 tcp session 的状态，完成 http 请求后 tcp 连接不
会立刻断掉，要在 time_wait 状态保持两倍 MSL 时间 --- 这一条就是为什么很
多访问量较大的服务器上总是有上万条 time_wait 状态的 tcp 连接的原因。

除了网络方面造成的 over load 以外，还有 20 次 tcp 连接造成的开销，客户端
我们就不计了，服务器端要接收 20 次 HTTP 请求并且作出一系列回应，这些都要
消耗 cpu 和内存。另外，你不可能控制每张图的尺寸正好凑一个或更多整数个
1500 MTU 的 tcp 包吧？每张图多出一个字节，就要多打一个包出来，20张图拼成
一张，省5、6个 tcp 包不算夸张。

对于这种难于压缩的小图片，合并起来是节约带宽和服务器资源的重要优化手段。
整个算下来，就是用制作和维护页面的辛苦以及客户端不用白不用的浏览器渲染能
力，把小图拼到一起，做了 tcp 和 http 的 offloading.

另一个老大：

顶~~~！但是在机器有足够的内存的情况下，我不认为关闭CKA是好办法，一般情况下同域名N个请求的情况下，开启5-15S的Keep-alive是有好处的，能够大量节省反复请求的网络开销。

CSS Sprites解决的不单单是用户端体验的问题，而且会给我们的L4和L7大大地减轻负载，同时也能够给服务器节省大量的请求。

如果将现在页面上的元素进行合并的话，做一个计算，Blog首页平均下载图片元素是25-30多个不等，总共下载数据也就在50K以内，如果能够合并这些图片中的大部分，对网络交换、磁盘IO节省的开销都是相当可观的，特别是小文件服务的服务器磁盘IO开销，N次*4K的磁盘寻址和1次50K的磁盘寻址，舒服不止一点点。

so，关于并发连接和请求数量的讨论可以告一段落了，但还是偶还是有些不赞成大规模使用css sprites的理由，遂回复如下：

原来如此……谢谢老大~
那在没有持续连接的前提下，剩下的问题就是：

1、由于gif和png-8只有256色，设计师在设计图标的时候，允许单个图标的输出出现仿色，但多个图标放在一起，全部共享这256 色，出现偏色是必然的，这样就违背了设计师的初衷，除非让设计师不使用宽色域（限制在256之内），但我觉得设计师不会接受的……【如果可以放弃IE6中的图标透明（需要设计师对IE6单独设计此类图标）则没有此问题】

2、使用css sprites是会丧失css的灵活性的，为了使用它可能会增加标签和样式的数量，必须在项目的开始、结束时安排专人做这件事并统一处理需求变更，但这不适用于紧急项目，在能够冻结项目需求的情况下我们非常渴望这样做；

3、以前出现过这样的情况：由于某些原因，由css sprites构成的一张大图无法正常加载，页面所有图标都显示不了，造成用户投诉，这个风险该如何处理呢？

讨论仍未结束，但结果其实已经很明显了：运营、设计师、Builder各有各的考虑，都很有道理，怎么办呢？仍然是那个古老的方式：事物是变化的，我们只能不断寻找其间的平衡，一时的完美是一种追求也是一种自我实现。

迟来的功课：轩慧光纤宽带使用小结

2008-10-22T16:02:00.005+08:00

大家都知道的事就不说了，先说说价格方面，这是2008年7月轩慧的报价单：
=====================================================
活动日期：2008年7月1日-2008年8月31日
上下行2.5兆光纤宽带促销
资费组标准费用（元）赠送时长赠送后月均费用（元）
包半年 540 一个月 77
包一年 888 两个月 63
包两年 1440 四个月 51
包三年 1980
=====================================================
我去办理的时候已经过了优惠期，并且目前只有2.5Mbps的业务，剩下的就只能选包多久了，而从以往的经验看，ISP的价格政策在未来有大幅调整的可能性不大，但由于对轩慧的确是不了解，所以只选择了一年，但现在看来包三年还是相当实惠的。

关于轩慧的接入方式及带宽：
首先轩慧宽带和轩慧有线应该是一家单位的两个部门，前者是光纤入楼五类线入户，但应该是FTTX+LAN而不是FTTH(光纤到户)；后者就是有线电视了，有线电视也可以通过既有的同轴电缆接入因特网（即HFC），但不知道轩慧有线是否提供此项服务。

到这里有几点疑问：
1、轩慧网站上有这样几条说明：
a.“像轩慧宽带网那样使用宽带接入设备如 10/100M 自适应网卡时，传输速率可达 10Mbps ，是模拟 Modem 的 180 余倍”
b.“高速浏览：接入速率高达 10/100Mbps ，速度比利用传统上网方式超出 100 余倍”
c.“轩慧宽带网：采用光纤以太网技术，光纤到楼，双绞线入户”

如果如轩慧网站所说，那它的接入方式应该是FTTX+LAN，而FTTX+LAN的设计是光纤到小区或单元楼的ONU（光网络单元），整个小区或整个楼道的用户通过五类双绞线共享一个ONU的带宽，这个ONU的带宽通常是10M或100M，这样的话，轩慧所说的5M入户到底指的是共享ONU的5M还是平均分配到各个用户的5M呢？

如果轩慧宣传所说，那它指的应该是后者，那么在6层的花园洋房，每个用户5M，每个楼道的ONU带宽就要60M，如果不是到楼道而是整栋楼（按5个单元），那这个ONU的带宽应到300M，那整个小区的总节点带宽是多少？相比2.5Mbps/888元/年的收费标准，这可能吗？

虽然实际通过后面的测速可知最大下行能达到2.5Mbps，但现在小区使用轩慧光纤的用户还比较少，等到用户比较多时，还能达到这样的速度吗？

关于轩慧的登录验证方式：
很不幸，是Dr.com，还好它开着web登录，据说Dr.com限制了多用户代理上网，用路由器也不行，上网查了查资料，现在有个Open Dr.com（开源地址：http://sourceforge.net/projects/drcom-client），我一直在用，但家里只有一台电脑，没试过它的真实性，另外由于它是个hack的东西，所以也不保证安全性哦~

通过linkwan测速：
大致测了下行速度：
河北邯郸 - 2.5Mb
北京1 - 800Kb+
上行没测，不过FTTx上下行是对称的，相比ADSL固定的上行，这个完全不是问题

迅雷下载速度：
看服务器情况，最高到过312KB/s

BT使用：
一直不太喜欢用BT，由于迅雷内建BT协议，那天找了个种子下个300M的电影，反正没到200KB/s

网络游戏链接：
魔兽世界连接各点响应时间基本都在61ms以下；
浩方不知道为什么总报错，所以通过QQ对战平台看了下，连接北京、上海响应速度都在21ms以下，广东是红的。

电骡使用：
电骡有2种网络：ed2k、kad
前者我是登上就掉（对Dr.com无限怨念ing...）；
后者极力推荐啊，我现在是根本不开ed2k了，只使用kad，在没下过热门源的情况下速度最高到过260KB/s，据说使用无头档可以增加kad稳定来源，准备回家试试：
ed2k://|file|Cyndi-Connect.tmp|9871476|9E3A905292B7AE6A2E2110DFC061779B|/
ed2k://|file|[PTT]emule_friend.rar|23007826|CF52D1CAD8FFF93CF03DB26DF23260D2|/
ed2k://|file|[ShareGet]emule_friend.rar|10564607|B494CC6DB8609C014858151CD7EA9193|/
另外要把这些文件的优先级设为低，在扩展设置中勾选"为节省CPU资源禁用A4F4"。

最后就是轩慧的vod点播：
速度很快，开着电骡看也没问题，清晰度还行，拿越狱来讲，站点收录的是每集170MB左右的版本，在1440*900分辨率上看有点难受，不过我们可以选择下载720p的版本哈，如果家里有支持1080p的平板电视，那推荐7.2G的版本……
另外不爽的是它使用远古vod的解决方案，观看前必须安装webplay才行……
轩慧网站上提供的有点问题，大家自己下个吧：http://www.viewgood.com/webplayer/

关于间歇性断网：
轩慧好像不太稳定，每隔几天就会间歇性地断开，断开时间倒不长，半小时左右，具体情况不明，请也在用的邻居们继续补充……

轩慧的服务态度：
平时不打交道，只有遇到断网才给他们打电话，但，电话里答应得挺好，从没上门过，据说态度也不怎么样；
想来他们许是知道自己的情况，知道短时间后就会恢复正常，所以不愿意过来？呵呵

打开网页比较慢，时不时无法访问的问题：
这个除了网络本身的问题外，应该和DNS的配置有关；
通过web验证登录后可以看到轩慧的网络公告，上面说几个DNS服务器有问题，请大家选择xxx服务器云云……
它推荐的不一定就好用，大家可以自己ping这几个ip看看，我这边比较好的是北京xxx.3.6结尾那个，延迟在40ms左右，没有丢包，其他的几个都存在丢包现象，稍好的是.66结尾那个，所以大家可以把首选DNS服务器设为前者，备用DNS就随便了。

求最大公约数和数列比例,网页栅格

2008-10-17T19:57:00.000+08:00

金慧他们要算网页栅格，需要求最大公约数和数列比例，折腾了一下，搞了个例子：
http://www.moonless.net/demo/12/
结果是对的，但实现得很狼狈，有空再修修js语法和算术吧……

模仿opera的checkbox

2008-10-13T18:36:00.000+08:00

关于checkbox、radio的个性化样式设置，基本上只通过是不可更改的，但如果小范围地应用一些外观及效果，做简单模拟还是可以接受的；
模仿opera的效果做了个例子，支持已选表单的遍历：
http://www.moonless.net/demo/11/
以后可以封装成类并提供check value接口。

关于昨天色彩管理的补充（个人理解）

2008-10-10T19:28:00.001+08:00

查了些相关资料，AdobeRGB(1998)的色彩范围虽然很大，但是目前多数显示器并不能支持显示足够多的色彩，而sRGB(IEC1966-2.1)作为“适合于web设计”的色彩管理方案则一直广受欢迎；
很早的时候它被誉之为“适用于屏幕显示”，普通显示器、打印机、小数码都使用sRGB；
而AdobeRGB则更多地被应用于专业摄影（如常见的单反即可调sRGB或AdobeRGB）、扫描、印刷等真正需要更丰富色彩表现的领域。

有时候我们会发现：在处理好一张自己满意的照片后，打印出来却总是不尽如人意，通常是看起来颜色偏浅、层次不够，这就是未进行色彩管理导致的。

实际上，由于显示器所限，即使把显示器的色彩管理更改为AdobeRGB，使用的icc也仍然是sRGB，这样造成的结果就是同一张图片在photoshop中看要比在实际显示要深。
sRGB相当于是AdobeRGB的子集，只要颜色没有超出sRGB的范围，输出后还是一样的，除非使用了appleRGB等不兼容的icc；
每张处理出来的图片，都是包含icc信息的，当你打开这些图片时，如果与当前使用的icc不符，就会产生色彩管理，可以是使用图片嵌入的icc、强制使用当前的配置或不进行色彩管理，这个操作在photoshop中更容易看到，在“颜色设置”中可以调整色彩管理的使用策略。

总之，色彩管理是很重要的，在我们实际工作中如果安装photoshop的时候不更改默认设置，通常都是使用sRGB(IEC1966-2.1)（日本常规用途2），这样处理设计师发过来的图片，如果是同样的icc则不会有问题，但若出现以下几种情况：
1、builder使用sRGB(8位)，设计师使用AdobeRGB(16位)
2、builder使用appleRGB等，设计师使用sRGB
3、builder使用sRGB，设计师使用appleRGB等
由于色彩转换后不可还原，这样就会产生图片输出后与原稿不符的现象。

鉴于我们只是从事web设计、不使用高端显示器、不处理专业摄影的片子、不制作印刷品，而且若使用AdobeRGB进行工作，在存储为web所用格式时还是会转换到sRGB的，这样就又有性能和效率的问题，so，还是老老实实使用sRGB(IEC1966-2.1)吧……

关于photoshop的色彩管理及偏色

2008-10-08T18:29:00.000+08:00

这段时间工作时，注意到Photoshop颜色预设、PSD本身的颜色配置、显示器颜色管理不一产生的偏色问题，原来一直使用显示器RGB没太觉察，只是发现有时输出时产生偏色。

经过试验，使用多数人推荐的adobe_rgb(1998)和适用于web色的sRGB IEC61966-2.1输出的样张效果是一样的，但在photoshop工作区里面看有区别，后来调整了显示器的色彩管理，统一使用adobe_rgb(1998)，重启photoshop，果然看起来是一致了。

究其原因，以前一直使用显示器rgb来管理色彩，这样有时就选用了色彩较少或不标准的icc文件，处理图片很可能出现偏色、颜色管理混乱等情况。

表面上看，统一使用使用色彩较丰富的adobe_rgb(1998)应该是最佳选择，它转换为CMYK也没有问题，但不知道和web色在兼容性方面是否有别的问题，待问。

再谈hasLayout及效率测试

2008-09-09T18:34:00.000+08:00

最近集体做项目，大家遇到一些IE6中的问题，我给大家的方案是首先试试zoom:1出发hasLayout，结果大家普遍觉得最近类似的问题比较多，也不太想用zoom:1，其实并不是之前就没有碰到类似问题，只是大家采用的解决方案和zoom:1异曲同工，相对于其他触发hasLayout的css属性，zoom:1是一个相对稳妥的解决方案，IE6的诡异解析模式产生的大部分问题都可以通过触发hasLayout来解决，那么问题就很明朗了，什么时候使用，如何使用就是一个问题，所以写了个例子来测试hasLayout的效率，并根据网上的资料总结了一些东西供大家参考：http://www.moonless.net/demo/9，里面用到的东西比较大，要测试的话建议下载到本机：http://www.moonless.net/demo/9/haslayout.zip

Vista和server 2008时代，你选哪种宋体？

2008-09-02T19:14:00.001+08:00

由于之前装IE8 beta2，系统被微软搞死，于是新装了Windows Server 2008，发现了一些原来不曾注意的问题：
它和Vista一样，字体采用微软雅黑、宋体5.0，而XP的宋体是3.03；
这样就出现了许多问题，略微对比如下：

1、宋体5.0比3.03要大一些，这样垂直对齐时，在不同系统中就会有不一样；

2、宋体的显示方式：
XP：
font-family:英文, "宋体" 这种方式和
font-family:"宋体" ，IE中显示出来的宋体字大小不一样，firefox则正常。
-----------------------
Vista/2008：
font-family:英文, "宋体" 这种方式和
font-family:"宋体" 显示出来的宋体字大小不一样，IE和firefox都是如此……

3、中英文混排：
由于1、2两条问题，中英文混排问题目前似乎不可解……

那怎么办呢？
我觉得：
1、还是以用户数量决定，这个问题也不是很大，所以可以暂不考虑小众的情况；
2、在确定不会或很少出现英文的地方强制指定font-family:"宋体"

个人觉得宋体5.0很难看（很多设计师有同感），我已经把Windows Server 2008中的宋体替换回了宋体3.03，除非Vista、微软雅黑、液晶显示器普及、或宋体推出新版本，决定不再换了……

IE6：hover bug、图片中英文混排对不齐问题

2008-08-22T18:23:00.001+08:00

今天朋友遇到一个IE6的问题，记得和以前处理过的一个问题类似，就是a包含块级元素时:hover不起作用或不正常，虽然有办法解决，但还是要避免出现内联套块级元素的情况，要使用css去定义display；

另外遇到图片和文字混排，保持垂直居中对齐的老问题，貌似问题很小且弱智，但遇到了还真不是很容易解决，尤其在IE6里面，如果用display控制是否显示，设了行高、vertical-align也还是存在抖动（有中英文混排），后来没法，幸好img外面有个a，让它hasLayout，模拟inline-block，总算是乖乖听话了。
这个东西是php工程师自己插进来的，本想让他们改，但他们要走流程，不想等了，不用他们动，自己解决问题就是爽哈。

也说CRLF/LFLF：从CVS、SVN中checkout的页面模板中莫名出现的双换行

2008-08-21T18:29:00.003+08:00

以前协同作业时遇到过如题所示的问题：用Dreamweaver打开smarty模板，看到本来非常整齐的代码每行之间都隔了一个空行，即：
</body>

</html>
工作忙也没多想，只是很郁闷，编辑完了继续提交，然后那边就有人问我：“你提交后的代码怎么变成双换行啦？”
faint，我更是一头雾水，后来永林提到某些编辑器会把/r/n转换为/n/n，原因是windows不识别/n/n，这样用记事本打开时，看起来是好好的，但是一保存，全部打成一行（没有换行）；Dreamweaver里一保存，就变成了/r/n，这样就轮到他们那边出现双换行了。

google之后，总结几点经验：
1、其实Dreamweaver是可以选择换行类型的：CRLF（Dos/windows）、LF（Unix/Linux）、CR（Mac）
2、某些Unix下的编辑器会把CRLF误认为LFLF，或者显示为^M（仍是LF），没经验的工程师很容易误会它们
3、即使用Windows记事本打开看起来全是一行，LF（/n）字符还是存在的可以放心
4、有个表：
Client Action Server
======================
LF -- Unix checkin --> LF
CRLF <-- Windows checkout -- LF
CRLF -- Unix checkin --> CRLF
CRCRLF <-- Windows checkout -- CRLF
作者建议要防止混乱切记不要用Unix的CVS客户端（包括Cygwin的CVS客户端）Checkin DOS格式的文件。

但是，我们究竟要选哪种格式呢？
还是用CRLF以保证兼容吧，毕竟很多系统和软件都能正确识别这些格式并转换；
或者说，我们用CRLF的话，可以保证Unix换行，也可以保证Mac换行，囧~；

万一出了双换行打乱了格式怎么办呢？
1、还是沟通，去和工程师协调。
2、我们这边可以这么处理：
用Dreamweaver的Ctrl+F，然后勾选“Use regular expressiong”（即使用正则表达式），先把“\n\n”替换为“\n”，然后把“\r\n”替换为“\n”，最后把“\n”替换回“\r\n”即可。

工作有感

2008-08-20T18:33:00.001+08:00

下午参加项目介绍会，感觉老大的思路还是很清晰的，产品策略真的很棒，对于SNS以及自己产品的战略性诠释很透彻，但问题是执行的时候会做成什么样；

听完老大的介绍，最大的感触就是之前的会基本上白开了（说得严重了点），思想在理解、传达的过程中果然会产生畸变，我联想到数次传真一张人脸……

这次会，不是说自己聆听或理解力怎么样（其实不错^_^），就单单一个开会，老大提到空间的定位、各产品的定位、个体性与群体的区别、分期任务的重点等等，但还有些人提出一些很明显就是没用心去听、去想的问题，总是站在自己的角度、使用既成的经验而不是用一个公平公正的心态站在别人角度去看问题，说这会白开了倒不至于，但同床异梦肯定是存在的。会议快要结束时有人来催，一问原来是瑜伽活动要使用会议室，faint，都到了生死存亡的份上了……

其实今天也不是没事可做，leader让我看框架，但我隐约觉得在目标不明、任务范畴不明的情况下去做事一定会徒劳的，除了一直以来抽空就看技术文字的习惯、装Mind遇挫所以搭积木继续搁置，我承认今天状态确实不好，混过去了。

音名(Fixed Do)和唱名(Moveable Do)

2008-08-19T18:27:00.001+08:00

很久以来一直对音名和唱名比较模糊，加上之前的练习多是弹而不唱（终于过了卡尔卡西的二十二首分解和弦），赶上前段时间奥运会开幕式放假，回了怀柔老丈人家，正好看到电视上在放《音乐之声》，片中的女教师在唱《Do Re Mi》，于是就比较迷惑，为什么她唱的是(Do, Re, Mi, Fa, Sol, La, Ti)，而不是我一直印象中的(Do, Re, Mi, Fa, Sol, La, Si)呢？好像以前学习的唱法都是后者啊？
于是回来google，找到了Arbin Yang站点的一篇文章，解惑，原来是这样，Fixed Do及Moveable Do还有这么多缘由，哎，继续修炼吧……

IE6 img边缘的空白以及浮动和inline box

2008-08-19T18:08:00.003+08:00

遇到别人提的2个问题，以前虽然经常解决完就算，但真要问到为什么，那时的反应却真可说是呆若木鸡……
1、<div><img></div>为什么在IE6图片的边缘会有空白？
解决的方法有很多：
a.给div设overflow:hidden或font-size:0
b.给img设float或display:block或vertical-align
但究其原因，也许是IE6中<img>始终带有haslayout，而在此情况下IE6对行高和line-box的解释不正确有关

2、这样的结构：<span>text</span><p style="float:right">abc</p>，为什么那个p不是和内联元素在同一行呢？
流行的做法有很多：
a.改成这样的结构：text<p style="float:right">abc</p>
b.让span也浮动
原因呢？其实这是我们对浮动、inline box的概念不清；
和clear相似，w3对float的解释：
The element generates a block box that is floated to the left. Content flows on the left side of the box,

starting at the top (subject to the 'clear' property).
关于inline box本质以及高度的算法：
http://meyerweb.com/eric/css/inline-format.html

msn偶遇摩洛哥帅哥

2008-08-19T11:16:00.004+08:00

今早上班，遇到有人要弹视频，我没设过cam，结果msn竟崩掉了，后来聊了几句，他是个32岁的摩洛哥人，估计是寂寞无聊，或者把我当成什么sexy girl之类-_-!

忏悔：没有坚持练琴

2008-08-15T18:18:00.005+08:00

随便记几件事：

前段时间和同事吃饭，老大说想买电钢琴，大理由是不用调音，想想也是，我手里一把破吉他，几天不弹就要调，幸好只有6根弦……，但电声钢琴的音色也许不能满足需要啊，音响设备的投入也不会低呢；

这几个月来特别忙，装修、工作、回怀柔帮家里人忙，什么都顾不上，真累，吃饭时这帮人拽我手要看有没有茧子，真惭愧，俺除了右手三指的指甲修过，左手指尖还是软的……

真对不起自己啊，现在身体状况也差强人意，我真想每周末都玩户外，家具搞定并搬家后，一定要计划出游，来个远的！

再谈谈琴，参考网上弟兄们的评价，买的协奏CG11A，买的时候估计被JS骗到了，当时也不懂，JS拿了两把琴给我对比，我说我不懂你帮我挑，他就要弹同一首曲子让我自己听听比较一下，我从了，完了他指着一把琴告诉我它的声音明显比另一把亮，JS旁边的一个MM也附和称是，之后又弹了两遍，我也觉得不错，就入手了。
现在看来，不就是手法轻重问题吗？现在这把琴3、5弦有点打品，只拨第四弦时竟然和其他弦有明显共振，orz，等有钱了一定换把好的！

blogger更新出疏漏：创建文章时“标题”变“职务”

2008-08-15T18:16:00.003+08:00

控制台的界面变了：

创建文章时“标题”变“职务”，截图纪念一下:D

忙乱必出错

2008-08-15T18:13:00.001+08:00

以前就印象IE的font-family有bug，但时间长同事们都这么用，慢慢给忘了，今天遭受惨痛教训，组件已经上线了才发现这个问题……，font-family按道理说是按照设定的次序显示字体，“Arial, '楷体_GB2312'”这种写法按道理说是英文显示为Arial，中文显示为楷体的，但IE不，而且只设定英文显示出来的宋体和只设定宋体显示出来的宋体也还是不一样的；
今天太忙了，糗事很多，急着回家，闪。

PHP vs UTF-8(BOM)

2008-08-15T16:02:00.004+08:00

引子1：
虽然UTF-8 BOM是国际标准，将来的趋势也是如此，但php在设计时就没有考虑BOM的问题，直到php6才获得支持；
php6以前在读带有BOM的文件时，会把本应不显示的bom头（EF BB BF）当作正文字符（FEFF或）输出（现象可能是在页面顶部出现一个空行、扰乱页面或文件显示等），给我们带来很多不必要的麻烦

引子2：
php工程师可能会直接使用我们带BOM的页面模板，而很多编辑器会忽略bom，直接或间接不显示、不转换，往往php工程师不会注意到这些事，这样出来的模板，就会出现引子1的糟糕情况（以前在邮箱、space1.0项目中均出现过此问题），如果不清楚原因，问题排查就会比较麻烦

解决方法：
用能使用正则替换的编辑器查找：\ufeff，替换为空就行了

问题：
在php6普及之前，恐怕像我这样习惯在创建html及css时加BOM的朋友们要忍一忍了

今天很happy，和RIA PK、和外包RIA PK

2008-08-14T16:43:00.000+08:00

今天很happy，和RIA PK、和外包RIA PK；
前者牵涉到模态窗算内部iframe高度计算的问题，刚开始很奇怪他的解决方案，因为类似问题在mail时已经搞过N多次，没发现什么问题，但毕竟自己是菜鸟，于是虚心请教问他为什么这么做，答有问题，后来提了自己的解决方案并给了他一个例子，结果终于松口了，哈，觉得对就该坚持一下，不过自己漏掉了跨域的问题，跨域时怎么解决呢？他的方案能解决跨域但是有页面留白的缺陷，应该还能再改进，我再想想……至于我的方案，解决跨域估计不易，也再想想……
去向外包RIA反映问题，他们看起来很无辜囧~，我说明了他们方案的一些不足，以及推荐他们采用动态create出的浮层，终于接受，不过放在文档流中的结构看来他们是不想动了，但不能直接说他们的html结构及css实现有问题，就提出有时间能再改得理想一些最好，这时其中一个工程师脱口而出“这个破东西”（囧~!，原以为只有我们才这么说）；

后来又帮他们找出截断的bug，原因是他们是用传入的参数（width）直接写入外框（div），然后反算文本框的宽度，但实际上计算漏掉了一些元素，比如border、空白等等，所以导致宽度溢出隐藏，嗯，到现在与此相关的问题终于可以告一段落了。

今日无大事：预谋搭积木

2008-08-13T18:23:00.005+08:00

引子：今天开会时间很长，大家讨论也很热烈，但没想到最后的结果竟是与领导之间沟通有偏差，我们讨论的问题基本上不再是什么问题，这种事……哎

很多人说css这种“过渡性”的东西，突击一个月就能精通、没有技术含量、体力活、边缘人、两边不讨好……
之前自己的看法也类似，但慢慢地觉得，前端制作也许是更偏重于管理和部署，尽管需求不断变化，其实重复的东西还是满多的，所以出现过一些所谓的css框架，但大都慢慢消失了，原因大概在于css构成的特殊性，要想在简洁、灵活、可重用、应对需求变更之间作权衡，的确不是一件易事；

经历了app项目的协作及部署，许多相关问题都暴露了出来，怎样既要效率又要质量，团队之间又要保证协作无间呢？

现在脑子里有个大致的想法，我们是需要一个框架，但框架本身一定要是可交互、可编辑、可按项目或idea分类、可查询、可引用并适应变更，哦，也许不能叫做框架了，或许更像一个wiki，抑或是一个源码管理系统……

so，我想捡一捡以前的知识尝试去做一下，如果它需要一个名字，“搭积木”应该是恰如其分的 ^__^

无聊的问题又了冒出来：前端制作、页面构建、builder，这个职业的发展方向真的只能是RIA、走向管理层或被迫转行吗？

凑热闹：MSN首页一个模块的构成及样式的写法问题

2008-08-12T18:25:00.001+08:00

今天工作不是很多，偶尔看了看经典web标准化论坛，有网友提出MSN首页一个模块的构成及样式的写法问题，就也凑热闹做了一个，意义其实是如果换我来做，以现在的个人认识，会做成什么样，结果就是，出来的东西自己感觉还算满意（不考虑更多的可扩展性），但如果是以前，用到标签和css也许会比现在少一半，所不同的大概就是：需求、可扩展性的不同以及对自己的个人要求吧

工作心得：关于css的clear和inline box

2008-08-11T18:22:00.002+08:00

1、以前对于css的clear属性有误解：
a.它只能应用于当前元素而不会对其他产生影响；
b.在css1中它能应用于所有元素，在css2.0、2.1中特别强调了它只能应用于block-level元素
2、一直以来对于inline box的显示方式都模模糊糊，现在看到了eric的一篇文章，原来还有这许多细节（em-box, font-size, content-area, (half-)leading, inline box），大概阅读了一下，提到了关于line-height的计算规则及方法、继承关系；content-area和line box、inline-box的关系等等许多内容，这篇文章应能为我解惑，加上细读http://www.w3.org/TR/CSS21/，以期能加深理解

Pidgin, mac msn显示msn群发言人昵称的办法以及音乐播放签名

2008-08-11T10:57:00.002+08:00

一直以来用pidgin都有无法显示MSN群发言人昵称的问题，以前求人打补丁解决了问题，后来Pidgin再次升级，原来的补丁已经不管用了-_-b，没办法就这么一直放着……
直到有一天，在某个工作群里，有人说他用的是mac msn，也是看不到谁在发言人，极不方便，很是郁闷，由此我继续上网google，后来在一个mac论坛里看到有网友说不用插件，使用msn群的/showname即可显示昵称，汗……
以前在Pidgin里输入“/”会调用Pidgin本身的帮助，现在M群的帮助命令除了可以识别“/”，你输入的首字符“／”、“、”都会被识别为命令字符，这样不管你使用的IM软件是什么，应该都可以很方便地打开昵称显示了。

关于音乐签名musictracker，这是个很好的东西，用Pidgin的朋友可以在此下载安装
使用说明详见：
添加 Pidgin 的插件 MusicTracker

错误地认为png透明是ie6不支持的，其实透明实现分为索引色和alpha通道

2008-08-06T18:24:00.004+08:00

熟悉了下图片格式的选择，以前错误地认为png透明是ie6不支持的，终于明白这两种透明实现的区别：索引色透明和alpha通道透明，而且同样256色，png-8比gif的大小要小10%左右，根据文后帮助的说明，我们在输出图片的时候完全可以放心地使用png-8。

例子：www.moonless.net/demo/4
一篇相关帮助： http://support.microsoft.com/kb/320314/zh-cn

IE对于float元素的宽度解释问题

2008-08-06T17:01:00.001+08:00

昨天遇到一个需求，实际去做时遇到问题，今天同事也遇到相似情况，做了一些测试，除了IE7及以下的所有浏览器（包括IE8）都能正确解释，问题大概归结为IE7及以下对于float元素的宽度解释可能有误，既然如此，知其然就不必知其所以然了，做好demo归档留念：
http://www.moonless.net/demo/2
http://www.moonless.net/demo/3

老生常谈一句：其实遇到此类兼容性问题时，首先要做的是检查自己的实现方法是不是合理，其实结构、实现合理的情况下，不兼容的问题是很少的。

今天遇到IE6的重影bug

2008-08-04T12:00:00.002+08:00

今天遇到IE6的重影bug，这是一个已知的老问题，解决的方案有很多，可能是：

a.去掉注释
b.不要把注释放在2个浮动元素之间
c.能不浮动的元素就不要浮动
d.给相关的浮动元素加上position:relative

IE6的问题无非就那么几种：浮动、haslayout、position:relative、overflow、margin……

总的来说，创建css&html仍然是一个靠经验和阅历的行当，我们需要知道该按照什么规则去做，如何去避免一些事情，我们总要花费一些精力去吃亏，我们总想在不断的可能性中最求较完善的方法，一切都在实践，但这一切的前提是要保持积极的心态，如果总做重复而无新意的东西，恐怕自己都会厌透了自己。

职业生涯：页面构建还有将来吗？

2008-08-01T17:58:00.002+08:00

人很难找准自己的定位，不是吗？

来这里工作已将满一年，看了看来之前扑入很多精力开发并运营起来的山寨电子商务应用系统，已经记不起个中细节了，彷佛昨天还在赞许着sqlserver2005的新特性，今天2008却已经出好久了-_-；随着工作性质的变化，个人技能的专业程度多少会此消彼长，多少有些悲哀的感觉，我以后该怎么走？

工作之余了解了一下web slice、微格式的应用方式，阅读了一些xml、xsl、xhtml、css之间关系以及未来发展动向的文档，个人觉得页面构建的未来趋势绝不仅仅是搭积木这么简单：

今天，RIA与页面构建的关系可以说藕断丝连，之所以产生分工的原因完全是在于：时间、工作量，页面构建多是经验和技巧的积累，其中又分为许多阶段，慢慢地你会说：“要语义”、“要有编程思想”、“要有个可复用、可维护的系统来管理这些肆意难管的标签和样式”、“css已经不能满足需求了”、“什么时候大环境能成熟起来呢”……，又变成了老话：你了解得更多，看待问题的态度、角度就愈发不同；

将来，随着技术的成熟和分工的细化，这两者的区别或许会用得上另一个形容词：“鸿沟”。

关于cutsin这个名字

2008-07-29T09:47:00.004+08:00

偶然在猫扑看到个帖子，题为：《可怜的中国教育，可怜的粪青》，作者名字赫然是“cutsin”，无语……
以前生造这个名字时，其中有个原因就是不易跟别人重名，但时过境迁，要想注册下所有的ID也是不可能，何况在这个自由的世界，怎可能独占所谓姓名权呢？呵呵，“天这么凉还要扇扇子？我要随时保持冷静。”ID，终究只是个代号而已。

补：2007-02-09在科贸1780入手飞利浦190CW7，送键鼠套装，买机经验分享

2008-07-18T18:23:00.002+08:00

今天看了网上文章说科贸4A015买190cw7就送键鼠套装，所以直接杀过去了，报价1780，我也没砍价，直接开始挑，老板人很好，开了第一个，有一个绿色亮点，遗憾，没说的，再开一个，这个好啊~没点也不漏光，看起来还算完美，直接付钱打包，拿了赠品走人，公交站离科贸挺远的，我就拎着走，那叫一个沉啊，大冬天汗刷刷地流~
到家，我显卡FX5200（据说FX系列都不可以，N卡要6字头以上，A卡要9100以上才完美支持宽屏），没DVI，以后再换，接上后开机，MSI的Logo一眼就看出来有色偏，没办法，这个价位都是TN面板，6bit 16.2M色，谁叫自己没钱呢，忍了，以后有钱更好的，刚一进windows，哇塞，这效果叫惨，分辨率默认800*600，字体看起来都支离破碎，嗯，赶紧调好，改成1440*900，一键Auto，好了，这才像样嘛~

默认色温是9300K，觉得刺眼，
改成6500K，还是刺眼…
亮度调到55，仍然刺眼……
最后调到45，嗯，和原来CRT的感觉类似了，不过怎么说呢，CRT那种舒服的色彩和通透感没有了，哎，我什么时候有钱能换IPS或MVA啊~

不过相比起来，还是保护眼睛重要的说……

接下来看电影，原来感觉已经够清晰的xvid格式的影片（1集7, 800M）都有明显的色斑，不爽，换1.2G一集的越狱，哈哈，这样才够味！

游戏方面我这里没有支持16:9的，所以只是测了风色幻想5，全屏拉伸了，人物扁扁的……，拖影么，好像是有点？不容易察觉。

还有两点很重要：

1、我觉得接上190CW7以后，鼠标很飘啊，是不是因为屏大了所以鼠标的移动速度需要调整呢？我调快了一点感觉好一些，但还是不太完美，不知道各位大大有没有类似经验？

2、附带的光盘里面有一个程序叫做SmartControl（忘了是不是Manage），我装了之后，点击显示器属性的高级选项时，会跳出来提示显示设备未安装或安装不正确之类，为什么哪，难道是用了DVI连接才能用？装了之后有没有什么好用的功能呢？

以上，大家多多交流。

补：2007-02-09在科贸1780入手飞利浦190CW7，送键鼠套装，买机经验分享

2008-07-18T18:23:00.000+08:00

今天看了网上文章说科贸4A015买190cw7就送键鼠套装，所以直接杀过去了，报价1780，我也没砍价，直接开始挑，老板人很好，开了第一个，有一个绿色亮点，遗憾，没说的，再开一个，这个好啊~没点也不漏光，看起来还算完美，直接付钱打包，拿了赠品走人，公交站离科贸挺远的，我就拎着走，那叫一个沉啊，大冬天汗刷刷地流~
到家，我显卡FX5200（据说FX系列都不可以，N卡要6字头以上，A卡要9100以上才完美支持宽屏），没DVI，以后再换，接上后开机，MSI的Logo一眼就看出来有色偏，没办法，这个价位都是TN面板，6bit 16.2M色，谁叫自己没钱呢，忍了，以后有钱更好的，刚一进windows，哇塞，这效果叫惨，分辨率默认800*600，字体看起来都支离破碎，嗯，赶紧调好，改成1440*900，一键Auto，好了，这才像样嘛~

默认色温是9300K，觉得刺眼，
改成6500K，还是刺眼…
亮度调到55，仍然刺眼……
最后调到45，嗯，和原来CRT的感觉类似了，不过怎么说呢，CRT那种舒服的色彩和通透感没有了，哎，我什么时候有钱能换IPS或MVA啊~

不过相比起来，还是保护眼睛重要的说……

接下来看电影，原来感觉已经够清晰的xvid格式的影片（1集7, 800M）都有明显的色斑，不爽，换1.2G一集的越狱，哈哈，这样才够味！

游戏方面我这里没有支持16:9的，所以只是测了风色幻想5，全凭拉伸了，人物扁扁的……，拖影么，好像是有点？不容易察觉。

还有两点很重要：

1、我觉得接上190CW7以后，鼠标很飘啊，是不是因为屏大了所以鼠标的移动速度需要调整呢？我调快了一点感觉好一些，但还是不太完美，不知道各位大大有没有类似经验？

2、附带的光盘里面有一个程序叫做SmartControl（忘了是不是Manage），我装了之后，点击显示器属性的高级选项时，会跳出来提示显示设备未安装或安装不正确之类，为什么哪，难道是用了DVI连接才能用？装了之后有没有什么好用的功能呢？

以上，大家多多交流。

IE hasLayout、firefox空标签、form嵌套的老生常谈

2008-07-18T14:24:00.002+08:00

昨天接到一个提案，查了好久，一开始就把问题锁定为IE的hasLayout故障，但实际修改中又遇到许多问题，导致多次修改后才找到关键，这个提案和刚刚解决的某个提案有些联系，看来出现此种问题的同志还挺多，现总结如下：

1、原html静态页显示绝对没有问题，但是html结构没有按照合理结构分割，完全是流的形式，多数元素都处于平级状态，这样不利于控制，在这种情况下css中使用很多float, clear, position，很容易产生问题，比如刷页面、resize、innerHTML的时候很容易出现闪烁、消失、错位等等。

2、对于<form>的嵌套位置，RIA或php工程师可能不太注意这一点，但<form>的嵌套如果不合理，在某些浏览器很容易造成显示错误，所以以后推荐把<form>放在两种位置：a.作为块级元素的firstChild；b.作为块级元素的parentNode。然后闭合</form>的时候严禁出现嵌套错误。

3、关于IE的hasLayout问题，其实是老生常谈了，当我们不确定一个块级元素的高度的时候最易出现这个问题，因为触发hasLayout的其中一个属性就是height，所以制作页面的时候还是要多多规范、多思考可能性、多考虑语义、多分析结构

4、firefox的空标签问题，当块级元素的firstChild不为内联元素的时候易出现此问题，目前解决方法似乎只有overflow:hidden，想要避免此问题还是同3所述

Pidgin2.4.2不能正常显示中文及QQ群、MSN群发言人问题的解决

2008-06-27T16:07:00.005+08:00

Pidgin的前身就是Gaim，它能把很多IM软件整合起来，文件小，占用内存小，运行速度还行，也很少报错，反正我用了这些天觉得还挺顺手的～，常见的MSN、QQ、Gtalk、飞信都可以用Pidgin来代替，但由于GTK的原因，现在官网的版本显示中文还是有问题。
解决问题的插件是求别人编译来的～，步骤如下：

1、先安装Pidgin2.4.2正式版，安装完成后先退出，下载地址：http://www.pidgincn.com；
2、执行Program Files\Common Files\GTK\2.0\bin\gtkthemeselector.exe，选择非“MS-Windows”主题，这里建议都选择ClearLooks；
3、进入Program Files\Common Files\GTK\2.0\etc\gtk-2.0，打开“gtkrc”文件，更改字体为：“gtk-font-name = "sans 8"”
4、将libqq.dll、libmsn.dll两个文件覆盖到安装目录中的plugins文件夹，下载地址：http://www.moonless.net/fls/pidgin_plugins.zip；
5、开始你的Pidgin之旅吧 ^_^b

IE中链接下划线粘连和字体大小不一问题

2008-02-18T11:33:00.003+08:00

现象：IE7+显示中文链接时会出现

总结如下，目前没找到完美的解决办法

发生下划线粘连的条件：
1、IE7+，UTF-8编码，宋体
(使用GB2312、GBK编码无此问题)

发生下划线对不齐的条件：
1、IE6，UTF-8编码，vertical-align:middle，宋体
2、IE7，UTF-8编码，vertical-align:middle，非宋体
(使用GB2312、GBK编码无此问题)

可选的解决方法：
IE7+，将链接的首字体设为非中文字体，如：a {font-family:Arial, "宋体", sans-serif}，但是这样就会导致IE5.0的字体出现大小不一的情况，所以要加hack，把IE5.0的首字体设回宋体，如：html*a {font-family:"宋体"}；缺点是不能设置vertical-align:middle，否则下划线会对不齐，有网友说用Arial并设line-height:1.231，但它有缺陷。

上面的环境是指XP+宋体3.03，如果是vista+宋体5.0，则无论怎么弄都是有下划线的；

暂时的结论只能是将首字体设为非英文，不要将链接设置vertical-align:middle，至于宋体5.0的下划线粘连问题只能放弃了。

========================
2008-11-28日修正。

关于森海塞尔PX200的流水记

2008-02-14T13:41:00.004+08:00

入手森记px200已近月余，买之前也是看了大量的资料和测评，因为想要一款便携的封闭式耳机，所以最终仍然锁定在大众化的AKG 26P和森海塞尔px 200，同事有一款26P，试听了一下，的确如测评所言，低频有些过，因为自己对低频没有什么要求，同事更提出“可以换着听嘛”，所以决定入手px 200，之前在体验店听过，感觉各方面都很平衡，低频高频都很温和（我有AKG K14P，此款耳塞对高频的诠释非常出色）没有特别出彩的地方，但音场和音准都还是很不错的。

买了新机回来，初听真是异常失望，真所谓“白开水”，非常干，我还以为是买到了假货，查了防伪倒没什么问题，遂决定煲一段时间再说，就这样1个月过去了，其间找了大量的无损音频，可惜的是我没有好的音源，只是用PC声卡，真希望能出一款能播ape或flac格式的播放机啊……

现在的感觉……怎么形容呢？就是表现张弛有度，高低频仍然不够突出，但很有弹性，细节自然没有问题，觉得最感动的还是听索尔的《月光》，对弦乐的还原个人觉得是非常出色了。无论px200是不是炒作出来的名气，我觉得作为初烧便携耳机而言，得到这样的效果已经是让我很欣慰了……

极力推荐一个天才导演：今敏

2008-02-14T10:51:00.004+08:00

初次看到金敏的作品是《Perfect Blue》（未麻的部屋），那时是大三和寝室的兄弟一起在看，我们震撼于今敏所带来的独特叙事风格，更沉浸在此作时时扣人心弦的另类心理悬疑；此后总想把这部作品推荐给朋友，但总觉得也许不是所有人都能接受这种风格。时过境迁，偶然的机会又想重温一下昔日的记忆，却忽然发现今敏的后几部作品：《千年女优》、《东京教父》、《妄想代理人》以及新作《Paprika》（盗梦侦探，又译帕布莉卡），其中《妄想代理人》是一部剧集，我目前只看了前两部，想说的是，《千年女优》的开始部分情节进展缓慢，主线不明朗，有点让人昏昏欲睡，但千万别就此睡着啊，后面的表现手法非常精彩。

末了，这些作品请按照顺序观赏，还有一点，它们都是动画片，希望籍此让一些对动画有偏见的朋友能有所改观：）

重识科幻大师菲利普·K·迪克

2008-02-14T10:07:00.003+08:00

前段时间记下《重又开始读科幻文学，耽搁4年了，暂从中国开始》，但真正看过几本就后悔了，嗯，不再做什么评价啦～
后来又跑趟国图，借来哈尔.克莱蒙特的《重力使命》，前后花了1一个月才读完，虽然此作前几章描述最初接触的情节进展缓慢，但中后部分的确是精彩迭出，还是硬科幻过瘾啊！
同时借到了《瓦利斯》，这是一部具有神学意味的侦探小说，我本不知道这本书，也没注意过作者的名字，只知道有一部作品名叫《主教的轮回》，谁想它是某人小说三部曲中的最后一部，遂选择从第一部看起，仔细查了下，发现迪克竟然是《银翼杀手》和《少数派报告》的作者，哎，所谓一叶障目～
听说少数派报告原作比汤姆克鲁斯的电影版要好上太多，呵呵，期待，不过什么时候我才能有大把的业余时间啊啊啊～

光田康典《Chrono Cross Guitar Arrangement》

2007-12-19T17:40:00.000+08:00

好东西还真是多啊，前一段时间为了《breezy》找到了《FF8 Guitar Solo Collection》，如果不是它只包含FF8的曲目，本来是想买一本的，想了想觉得自己还是更喜欢《Chrono Cross》的曲目，所以放弃了，后来想到既然FF8有这样的东东，Chrono Cross也一定有，结果就在一个Duck's egg的网友相册中找到了，哈哈，太兴奋了，咔咔咔！把70张图全down下来，传到picasa上自己保存一份，呵呵，更多关于Chrono、Xeno系列的曲谱和杂志扫图大家要自己去看了：http://photo.163.com/photos/ducksegg/14596530/344082555，这里贴出个预览图：

全部70张在这里：http://picasaweb.google.com/cutsin/ChronoCrossGuitarArrangement

练琴记录1

2007-11-08T17:24:00.002+08:00

古典吉他的提高非常缓慢，每天只有不到半个小时的练习时间，进步真比乌龟还慢，不过无数的前辈都提到学习的诀窍就是“每天坚持、慢弹、反复、要找一位好老师”，找老师指导恐怕只是想想了，现在生活日程排得满满的，也不是真就非常忙，只是说谁都有一些无法摆脱的琐事吧，呵呵，不过个人的懒散也是很重要的原因了，其他几点目前自我感觉还不错，并且坚持“1级的曲子没过关就不能碰2级曲子”的原则，把基础打好才是重中之重。

目前刚弹到“阿瓜多练习曲片段”，第一把位和C大调的对应总算是慢慢熟悉了，但是音名cdefgab和唱名do re mi fa so la xi还是对不上号，总得想想才能对上；视奏很慢，但为了基础我忍了；右手协调仍是一团糟，嗯，且得练呢!左手杂音渐渐少了，但仍然是按不牢，看来习惯还真是不容易改变，总是弹着弹着就忘了姿势，每每绷出刺耳的杂音时总会打击我练琴的热情，我什么时候能弹完整的曲子呢……

重又开始读科幻文学，耽搁4年了，暂从中国开始

2007-09-29T16:24:00.000+08:00

今儿去国家图书馆还书，忽然想看科幻文学了，于是乎就一通乱搜啊，但很遗憾，国图的此类图书大都不能外借，能外借的书都可以用“歪瓜劣枣”来形容了，汗-_-b，本想看看阿西莫夫的几部长篇，但貌似著名点的长篇都不能借么……，没办法就随便搜了搜，最终锁定在一些科幻小说集上，国外的也是不多，最后在第一外借（拿游晓飞的卡，感觉国家图书馆有学力歧视，第二外借的书比这里差多了，受不了……）选了3本：《2002年度中国最佳科幻小说集》、《2003年度中国最佳科幻小说集》、《2004中国年度科幻小说》，编者和作者还是那几个人：韩松、星河、王晋康、何夕、柳文杨……中国的科幻也就这么点事了，80年代初科幻界还被弄个什么政治批判，搞得乌烟瘴气乱七八糟，前一段时间方舟子还竟然指责王晋康等科幻作家“散播伪科学思潮或达尔文医学（不知是不是指《生死平衡》），贻害无穷”，我的天！这是哪门子跟哪门子的事！好，我开始还对方舟子针对“费城实验”的独到分析感慨，没想到这就直接把矛头指向科幻作家！不过平心而论，现在出现的很多所谓“奇幻文学”我本身也是极力排斥的，一些作家的素质的确是需要提高，但无论什么事都不能以偏概全吧！这样下去，本来就人丁不旺的中国科幻事业注定要毁在这班不懂事理的人手里。

　　看看美国：科幻的革命性变革都发生在这里，美国人的科学幻想从未停止过；
　　看看日本：这个以漫画著称的国度产出了多少经典篇章：最初从手冢治虫的《铁臂阿童木》、《三目童子》、《怪医秦博士》等等一直到琳琅满目的整个漫画产业；
　　看看英国：这个文学不落帝国一直以来的所有表现。

　　在这个科学至上的世界，我不禁要对所在的这个国度套用一句话：人类失去思想的飞翔，世界将会怎样？

好玩的图文流动居中效果，全兼容不用hack，IE6以下需要手动调整居中

2007-09-28T16:01:00.000+08:00

一个网友提出来的问题，觉得挺有意思，这里单独发一下示例，有兴趣即来讨论：）

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
text-align:center;
font-family:"宋体", sans-serif;
}
div {
margin:0 auto;
width:600px;
}
.mylist {
position:relative;
}
.mylist span {
position:absolute;
left:0;
top:0;
width:100%!important;
width:auto;
width:150px;
}
.mylist img {
padding:1.5em 2em;
vertical-align:top;
}
</style>
</head>
<body>
<div>

<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>
<span class="mylist"><img src="http://bbs.blueidea.com/images/blue/logo.gif" /><span>moonless.net</span></span>

</div>
</body>
</html>

[自翻] css2.1的8.3.1节Collapsing marginsCollapsing margins（margin折叠, 边距折叠）为margin的不同表现解惑

2007-09-27T15:49:00.001+08:00

为什么要翻译这篇说明？css2本有人已翻译过，但看一下，很粗糙（不是说自己就怎么怎么样啊，翻译者真的是很值得敬佩的！），近来跟css与xhtml接触得越来越多，但接触得越多，迷惑却总不见少。

现在我觉得很多问题根本不能称之为问题，原因就在于我们的草率理解，比如杀鸡用牛刀，不是不可以，是不合理、不恰当，根源错了，表象也就会错了，如果解决问题从表象入手，难免总会摸不着头脑，还是那句话，要脚踏实地，切莫浮躁。

在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。

在css2.1中，水平的margin不会被折叠。

垂直margin可能在一些盒模型中被折叠：

1、在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。
最终的margin值计算方法如下：

a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

2、相邻的和模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。

3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。

4、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。

5、设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。

6、如果一个盒模型的上下margin相邻，这时它的margin可能折叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否被折叠。

a、如果元素的margin和它的父元素的margin-top折叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的折叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。

一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。
注意，那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响；只有在对这些元素的子元素布局时，border-top边界位置才是必需的。

7、根元素的垂直margin不会被折叠。

浮动的块级元素的margin-bottom总是与它后面的浮动块级兄弟元素（floated next in-flow block-level sibling）的margin-top相邻，除非那个同级元素使用了清除操作。

浮动的块级元素的margin-top和它的第一个浮动块级子元素（floated first in-flow block-level child）的margin-top相邻（如果该元素没有border-top，没有padding-top，并且子元素没有使用清除操作）。

浮动的块级元素的margin-bottom如果符合下列条件，那么它和它的最后一个浮动块级子元素的margin-bottom相邻（如果该元素没有指定padding-bottom或border）：

a、指定了height:auto
b、min-height小于元素的实际使用高度（height）
c、max-height大于元素的实际使用高度（height）

如果一个元素的min-height属性设置为0，那么它所拥有的margin是相邻的，并且它既没有border-top和border-bottom，也没有padding-top和padding-bottom，它的height属性可以是0或auto，它不能包含一个内联的盒模型（line box），它所有的浮动子元素（如果有的话）的margin也都是相邻的。

当一个元素拥有的margin折叠了，并且它使用了清除操作，那么它的margin-top会和紧随其后的兄弟元素的相邻margin折叠，但结果是它的margin将无法和其块级父元素的margin-bottom折叠。

折叠操作是以padding、margin、border的值为基础的（即在浏览器解析所有这些值之后），折叠后的margin计算将覆盖已使用的不同margin的值。

计划在2007年底去华山观雪景，我爱这个世界！

2007-09-21T18:21:00.000+08:00

自从大学拿着奖学金和朋友游晓飞第一次登泰山并有幸看到雪景开始，以后的旅行就愈发不可收拾，我喜欢旅行，它给我带来日常生活所不曾有的愉悦，我们在生活中很容易迷失了自己，而旅行恰恰让自己找到了一种在世界中的存在感，你越是到人迹罕至的地方，这种感觉就越发强烈。

正好历数一下到今天（2007-9-21）为止自己的足迹，不算非旅游所至的地方及城市：

秦皇岛、北戴河（2次）
张家界（1次）
泰山（3次）
华山（2次）
石人山（2次）

呵呵，基本上都是山了……
大概多数旅行者都喜欢登山，除了观景，一个重要的原因大概就是它很刺激，有对自然的征服感以及自我认同感。我喜欢那种眼前无一物、脚下海蓝天的感觉。

我觉得山有两装：绿意盎然、银装素裹。前者秀美，后者冷峻。不过更能让你产生感慨和敬畏的就只有后者了。

作为普通人，此次出行不同以前，华山本来就以险著称，加上雪覆冰盖，沿途多有无阶梯、无扶持的光滑巨石路，真的是随时都有可能发生意外、尸骨无存……
而我又邀请朋友同去，人数估计不少，自觉肩上责任重大，不敢轻易敷衍，暂且拟定《07年底观雪景华山旅行计划》，还未完成，最终出行日期大概在11月中旬至12月底之间，待雪降日晴方可出行。

PS：如果有看到此文且我未标明【已归】的旅友，可联系同行，我已去过2次，经验多少还是有点，呵呵，下面是我的联系方式：
Email：cutsin@gmail.com
QQ：31921285
MSN：cutsin@hotmail.com

纯CSS跟随文本流动的pop提示框示例，不用hack，惟在opera下仍然无法正常显示

2007-09-21T18:18:00.001+08:00

虽然知道内联元素嵌套块级元素是不对的，但是实际应用中确会碰到许多类似的情况，通过阅读怿飞版主的a:hover bug解决方法，终于能稍微解决了，现在的问题就是在opera下面指定top、left、right、bottom元素会出现支离破碎的现象，遂只能设置为auto以委曲求全……
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
<style type="text/css" media="screen">
body {
font-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
font-size:14px;
line-height:1em;
background:url(http://www.moonless.net/i/sample.gif) no-repeat -33px -123px;
text-decoration:none;
position:relative;
}
.abtn_3 span {
visibility:hidden;
overflow:hidden;
}
.abtn_3:hover {
text-indent:0;
}
/* 提示框 */
.hintsB {
display:none;
}
.abtn_3:hover .hintsB {
display:block;
position:absolute;
top:-1.3em;
left:20px;
width:280px;
padding:0 0 0 5px;
background:url(http://www.moonless.net/i/sample.gif) no-repeat 0 center;
color:#326324;
cursor:text;
font-weight:normal;
}
@media all and (min-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
line-height:18px;
padding:7px 4px 6px 6px;
border:1px solid #bed48f;
border-left:none;
background-color:#effaeb;
font-size:12px!important;
}
</style>
</head>
<body>
bla... bla...
<div>
您选择的方式是bla... bla... bla...：<a href="javascript:void(0);" class="abtn_3"><span>提示</span><div class="hintsB"><div>请选择适合您的方式，请选择适，请选择适，请选择适，请选择适合您的。</div></div></a>您选择的方式是bla... bla... bla...您选择的方式是bla... bla... bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择
您选择的方式是bla... bla... bla...：<a href="javascript:void(0);" class="abtn_3"><span>提示</span><div class="hintsB"><div>请选择适合您的方式，请选择适，请选择适，请选择适，请选择适合您的。</div></div></a>ffdfde
</div>
</body>
</html>

将<a>指定为inline-block的方法不可靠，在更好的方法出现之前，我仍然会继续修改这个示例，希望能得到实用的收效。

PS: 写css的时候耳边响着《旅之沼》、《燐光》，这两曲还真是煽情，此时心情无比惆怅……

切忌浮躁急功近利，按部就班、循序渐进总是最有效的学习方法。

2007-09-21T17:39:00.000+08:00

之前在蓝色理想发过两篇讨论css的文章（《请高人来帮忙解释一下为什么ff要这么解析？究竟谁正确？》，《IE/非IE对float浮动与非浮动块对象自动宽度之间关系不同解析方式的实例研究》），旨在为自己心中的疑问解惑，呵呵，结果证明经验的学习果然不是靠问问题就能轻松解决的，后来我去国家图书馆泡了两天，几乎翻遍了2007年出版的关于xhtml和css的书籍，终于明白了为什么这样、为什么那样的所谓疑问，遂生出了些许感慨：切忌浮躁自以为是，按部就班循序渐进总是最有效的学习方法。

大概许多人和我一样，做事总喜欢急功近利，妄图找出解决方法的捷径，在工作中、生活中，这样的情况比比皆是，但事实上这样做就是已经在妥协，你妥协于自己能力的不足、妥协于对漫长经验积累的恐惧，有太多警句告诉我们这样做只会把事情搞得更加糟糕：
由于“忙乱必出错”，导致“事倍功半”；
因为“急于求成”、“急功近利”，导致“得不偿失”；
根基不牢导致大厦将倾；
对事情一知半解、自以为是，结果成事不足败事有余，被称为半吊子、三脚猫、更被形容“最尖皮厚腹中空”；
玩吉他想速成，就拈来民谣，结果杂音太多音色枯靡单调；
想武功速成结果放弃“九阴真经”，改学“九阴白骨爪”，虽能威逞一时但终不能得成正果；
……

总而言之，统而言之，耐心点，从基础做起，多读书（有目的有针对性地读），多实践，不要觉得枯燥乏味，如果你觉得做什么事枯燥乏味，那么趁早不要继续下去，真的，不是打击积极性，重点在于：要去做想做且有必要的事，人生苦短，为什么要花费有限的精力去做你不喜欢的事呢？当然这样的前提是要有良好的世界观、人生观、价值观，不然就是胡作非为了 :)

IE/非IE对float浮动与非浮动块对象自动宽度之间关系不同解析方式的实例研究

2007-09-13T17:16:00.000+08:00

这段时间泡蓝色理想的WEB标准化专栏，也着实生出了许多平时不曾进行的思考，一直以来的浮躁好像在我身上慢慢地淡去，也许年龄的增长真的会对人的品性影响非凡，希望同在我这个年龄段（23-30）的人都要把握好自己的人生，这重要的磨砺阶段错过了就一去不再复返。

摘要：
IE认为指定了float的元素旁边如果有未指定float的块元素，那么该元素占有绝对高度和宽度，那个块元素的宽度自动缩减；
非IE浏览器则不这么认为，它们认为指定了float的元素不应该占有绝对高度，相应的旁边那个块元素的宽度不应该全部缩减，仍然应该体现“浮动”的实际意义，宽度该缩减就缩减，不该缩减就继续铺满。

但我不明白的是，为什么在例1和例3中，背景颜色要始终是铺满的呢？

源代码如下，请自行保存为html格式查看：

<style>
h1 {
font-size:1.5em;
}
h2 {
font-size:1em;
margin:0;
}
cite {
color:#c30;
font-weight:bold;
}
em {
color:#f00;
font-weight:bold;
}
.abtn {
height:18px;
width:18px;
display:block;
background:#f00 url(http://bbs.blueidea.com/images/blue/smilies/icon11.gif) no-repeat 0 0;
}
.abtn span {
display:none;
}
.fright {
float:right;
}

.ul_a {
margin:1em 0;
padding:0;
list-style:none;
height:50px;
background-color:#9cf;
}
.ul_a li {
background-color:#69c;
}

.mgl_a {
margin-left:30%;
}
.mgl_b {
margin-left:1em;
}

.layout_a {
width:100%;
height:200px;
background-color:#ccc;
margin-bottom:1em;
}
.layout_a .left {
float:left;
width:30%;
height:50%;
background-color:#069;
}
.layout_a .right {
font-size:12px;
height:80%;
background-color:#996;
}
.layout_a .percent100,
.layout_a .percent50,
.layout_a .percent20 {
text-align:center;
height:18px;
line-height:18px;
}
.layout_a .percent100 {
width:100%;
background-color:#009999;
}
.layout_a .percent50 {
width:50%;
background-color:#996666;
}
.layout_a .percent20 {
width:20%;
background-color:#996699;;
}
</style>

<h2>以下内容请在IE和非IE浏览器中对比：</h2>

<a href="" title="没有加样式的a按钮"><span>没有加样式的a按钮</span></a>

<ul class="ul_a">
<li><a href="" class="abtn fright" title="加了样式的a按钮"><span>加了样式的a按钮</span></a>结构上，设置了float:left;的a按钮在此文本区域的左边</li>
</ul>
<ul class="ul_a">
<li>结构上，设置了float:left;的a按钮在此文本区域的右边<a href="" class="abtn fright" title="加了样式的a按钮"><span>加了样式的a按钮</span></a></li>
</ul>

<div class="layout_a">
<h2>例1：IE似乎把指定了float的对象自动赋予了宽度，并具有100%高度？</h2>
<div class="left">此处30%宽度，float:left;</div>
<div class="right">
自动宽度，float:none，没有设置 margin-left:30%;<br />
非IE浏览器中，背景色是铺满父对象的，但是从居中的文本以及<cite>例3</cite>可以看出，容器中的元素宽度计算方法是：如果左侧有浮动，那么内部元素宽度 = 容器百分比的宽度 - 浮动对象的30%宽度，如果相减宽度为负值，那么显示在浮动对象的下面。
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
<div class="percent20">此div的宽度设置了20%</div>
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
</div>
</div>

<div class="layout_a">
<h2>例2：这里在各个浏览器看都一样。</h2>
<div class="left">此处30%宽度，float:left;</div>
<div class="right mgl_a">
自动宽度，float:none，这里设置了 margin-left:30%;<br />
所有浏览器中，背景色只在这里出现。
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
<div class="percent20">此div的宽度设置了20%</div>
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
</div>
</div>

<div class="layout_a">
<h2>例3：这里仅仅是<cite>例1</cite>中的left指定了margin_left值。</h2>
<div class="left mgl_b">此处30%宽度，float:left;</div>
<div class="right">
自动宽度，float:none，没有设置 margin-left:30%;<br />
非IE浏览器中，背景色是铺满父对象的，但是从居中的文本可以看出，容器中的元素宽度计算方法是：如果左侧有浮动，那么内部元素宽度 = 容器百分比的宽度 - 浮动对象的30%宽度，如果相减宽度为负值，那么显示在浮动对象的下面。
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
<div class="percent20">此div的宽度设置了20%</div>
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
</div>
</div>

<p>
<h1>总结：</h1>
IE认为指定了float的元素旁边如果有未指定float的块元素，那么该元素占有绝对高度和宽度，那个块元素的宽度自动缩减；
非IE浏览器则不这么认为，它们认为指定了float的元素不应该占有绝对高度，相应的旁边那个块元素的宽度不应该全部缩减，仍然应该体现“浮动”的实际意义，宽度该缩减就缩减，不该缩减就继续铺满。
</p>
<em>但我不明白的是，为什么在例1和例3中，背景颜色要始终是铺满的呢？</em>

深入理解css中的position定位和z-index属性

2007-09-10T16:14:00.000+08:00

由于平时不太用到，所以过去写css的时候对于position属性的absolute、relative值理解比较模糊，对于z-index的层叠更是摸不着头脑，除了理解的因素外，各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档，总算是对盒模型的浮动、定位有了比较深刻的理解。

我们在实践中很有可能遇到这样的问题：
1、做一个横向导航，然后鼠标经过之后出现下拉菜单，那么这个下拉菜单的位置控制就是一个关键；
2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示，这时既不想让气泡提示破坏正常的文档布局，又不想气泡提示的定位在不同的浏览器中到处乱飘。
3、当我们在一句正常的文本中插入一个小图标的话，一般会使用<img />标签，而这时它的垂直居中问题又是让人困惑，无论你使用html属性absmiddle、或是使用css属性vertical-align、抑或是使用父对象的heigh + line-height，在不同的浏览器中总会看起来不同。

嗯，上面几个问题你是否也遇到过呢？如果你至今还没有一个很好的解决办法，不妨继续阅读此文，或许能对你有所帮助：）

我们先看一下position属性的几个取值定义：
position: static、absolute、relative

static : 默认值。如果没有指定position属性，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。
如下图所示，这是一个常见的指定了float:left;的横向导航：

relative: 相对定位。这个属性值保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，设置了relative的对象，可以通过top, left, right, bottom属性设定自己的新显示位置，这4个属性的取值是相对于文档流的前一个对象的，你可以自由设置这4个属性偏移到新的位置而不对文档流中的其他对象产生任何影响，原来的页面呈现仍然会我行我素，这一点类似于visibility:hidden;：

absolute: 绝对定位。和relative不同的是，这个属性值会将当前对象拖出文档流，后面的对象会占有原来的位置，也就是说，当前对象的呈现是独立显示的，但是它的位置在指定top, left, right, bottom任一属性之前仍是有继承性的，这时的4个属性的取值是相对于浏览器的，和文档流无关了，这一点类似于display:none;。如果把示例中的B区域设定为absolute而不指定4个位置属性，通过设定margin来改变它的相对位置，用这个方法可以解决前面提到的问题2。

提示a: 苏昱的css2.0手册中提到relative和absolute定位的滚动条区别不是绝对的，至少在firefox、opera和safari中滚动条该出现还是会出现。

提示b: 属性值为absolute对象的z-index属性可以设置层叠显示的次序，它是直接有效的；
而属性值为relative对象的z-index属性在设置时要小心，把当前对象的z-index设置为-1是不行的，在firefox中它会无法显示（注意，不是说浏览器有误，而是指如果父对象是根元素body，那么z-index是无效的，任何z-index设置都不会显示在根元素之后，除了IE的解析bug，感谢#19提示），必须设置为0以上，我们如果想让别的对象挡住它，只有将其他对象也设置position为relative，并将z-index属性取一个比它大的值即可。

上面的表述不知道也许不是很清晰，具体的理解还是要自己亲自动手操作一下。

这样看来，前面的问题就有解了，问题3我们可以根据设计的要求将其设置为相对或绝对定位；
问题1的解决方法也有很多，个人推荐使用有语义的dl, dt, dd来实现，而且这个方法在不同浏览器中的表现基本相同（已在ie, firefox, opera, safari中测试），仅在top的属性上有几像素的差异，由于时间关系我只能给出自己测试时的代码以供参考：

body {
color:#fff;
font-size:12px;
}
ul li {
float:left;
height:30px;
background-color:#99CC99;
margin:0 10px;
padding:0;
border:1px solid #c30;
width:100px;
}
ul li div {
border:1px solid #f00;
background-color:#996666;
width:100px;
height:100px;
position:absolute;
margin-top:15px;
margin-left:-1px;
*margin-left:-79px;
}
ul li dl,
ul li dl dt,
ul li dl dd {
margin:0;
padding:0;
}
ul li dl dd {
border:1px solid #f00;
background-color:#996666;
width:100px;
height:100px;
position:absolute;
margin-top:11px;
*margin-top:10px;
margin-left:-1px;
}
<ul>
<li>
标题 - #text
<div>
下拉菜单 - div
</div>
</li>
<li style="position:relative;">列表b</li>
<li>列表c</li>
<li>
<dl>
<dt>标题 - dt</dt>
<dd>下拉菜单 - dd</dd>
</dl>
</li>
</ul>

需要你不时关怀的朋友

2007-09-07T18:14:00.000+08:00

我前天群发了一条问候的短信，自己写的那种，今天早上，收到一个朋友的email回复：

谢谢问候。

这段时间在学英语，因为我到现在也没有世业没有爱情，就萌出了出国的想法，明年初，我就要去澳大利亚了，去那里立足……

此时耳边正在回响着《Encoreune Fois》（再续前缘）、《It's only mystery》，触景生情，颇显伤感，我只能回复给他：

想必也是思量很久的决定吧。

我也是没有事业没有爱情，不过我还有自己，还有你这样的朋友，呵呵，多保重啊，出远门也要常联系呢。

哎，岁月无痕啊，不知不觉间4年过去了，昔日的无间友情也在慢慢淡去，我们总是忘记去维系这些弥足珍贵的东西，殊不知待到忆起时，会徒增多少的伤感、遗憾或歉疚呢？我不想留下这样的空白。

我觉得：维系淡淡的情谊、关怀心灵如水般清澈的朋友，所需要的仅仅是一句简单的问候、一分短短的空闲时间，相对这些微的付出，你得到的可能是洋溢在你周围一生的幸福感……

何乐而不为。

买房应该贷款吗？贷款应该提前还款吗？

2007-09-05T11:04:00.000+08:00

多数人可能都觉得总欠着别人的钱不好，心里有压力，买房贷了款，总想着早点把钱还上，还能省很多利息。

我前段时间买房了，也是颇为踌躇了一番，后来老爸提出了一个观点：
如果你现在手里有40万，首付20万，贷款20万，20年还完，虽然要多付12万利息，但是你现在仍然持有20万可以用来投资或者做别的事，试想过20年，这手里的20万能变成多少钱呢？20年达到1.5倍的增长已经是很低的了。

我当时就拜倒了，觉得这个观点非常好，后来也是这么做的。

如果不明白，可以换个角度看，贷款利息也很低的，20年，才收那么点钱，银行的放贷项目，投资回报率多低啊

我觉得自己这方面真是太差了，各种理财和消费观念真是应该改一改了，与时俱进呃～

沟通中应该避免的七种行为举止：你给别人留下了一个好印象么？

2007-09-04T09:49:00.000+08:00

你是否对别人对你的态度感到迷惑？你想改善家庭关系、婚姻关系或者其他关系么？你是否想知道工作时如何与别人和谐相处？以下是7种行为，可以使你快速消除分歧，改善沟通。每一种行为都会让你看起来比其他人更优秀、更重要、更有魅力。

一、打断别人的讲话。

曾经我认为我是一个很善于倾听的人，我很真诚地关注其他人，能够轻松地加入一个谈话，听朋友高谈阔论，并不时地给他们鼓励。在日常的谈话中，我首先发表自己的观点，然后开始听其他人讲，我经常中途打断他们。大学毕业后，我决定重塑一个全新的自我。我问上帝，我应该在那方面改善自我，并请求他给我面对现实的勇气。第二天，我开始注意到，当我打断别人讲话时他们的面部表情，我被吓坏了。我做了个正确的决定，从此不再打断别人讲话，这个决定立即有了效果，它教会我如果建立友好的谈话。

二、设想。

这听起来有点滑稽，不过这确实是我们经常犯的错误。我们判断其他人行为，但是当我们相信只有我们自己的设想可能是正确的，我们就陷入了一个陷阱。以下是一个典型的例子，它告诉你“设想”是怎样影响你和其他人之间的关系。

“我和丈夫正在庆祝我们结婚十周年纪念日。十年过的如此之快，令我非常吃惊，与此同时，我很欣慰这十年以来，我们夫妻非常和睦。这是一场成功的婚姻，但是这也是来之不易的——我们都为此而付出努力。其中最大的努力也是我们之间最大的困难——沟通。当我们刚结合到一起的时候，我们之间出现了一个矛盾，我们都做了许多设想。比如，（站在妻子的角度）如果他说了某些伤害了我的话，我就急切的等待他给我道歉，我设想，如果他真的了解我，关心我，注意我的感受，他真的爱我的话，他一定会知道此刻我有多心烦，他肯定会来给我道歉的。又比如，（站在丈夫的角度）如果我刚才说的话伤害了她，她会不会已经原谅了我。如果她真的了解我，关心我，注意我的感受，她真的爱我的话，她一定不会和我计较那么多的。错！在人际关系中，一个人冒犯了另外一个人，但是他确实完全不知道发生了什么，或着他知道自己冒犯了他人，却设想别人已经原谅了他。这是千真万确的事实，回想一下在你和其他人之间闹别扭时，你是怎么想的。

因此，在与人交往中一定要真诚。不要去设想别人的感受，不要去斤斤计较，如果你冒犯了其他人，简单的三个字“对不起”，往往就能够化解矛盾，如果别人无意冒犯了你，对自己说三个字“没什么”，就不会影响你的心情。当你一直设想其他人的行为的时候，你是在给自己找不开心。

三、忘记感谢。

向别人说“谢谢”很大程度上从一个方面显示了你这个人的品质。我们中多有少人在繁忙的生活中忘记了这一点？回想一下最近一次你非常感激的事情，你忘记了向别人道谢。或许你也想表示你的感激，但是你却忘记了说声“谢谢”，你让别人觉得你不知感恩。在接受别人仁慈的帮助后，我会立刻说声感谢的话。我以感恩的话语和微笑回以别人的帮助。给帮助你的人写感谢的纸条，虽然，我不擅长这么做。有时候，口头上的感谢就足够表达你的谢意了，但是，在某些情况下，写一张感谢信或者纸条更能够表达你的谢意。别人帮助你之后，随即说声“谢谢你！”，如果有必要，身上带上纸和笔，写一个简短的感谢纸条或者感谢信，让别人认识到你是一个知恩图报的人，别人也会更乐意帮助你。

四、责备他人。

你要对自己的行为负责。过去的痛苦会影响你，但是它控制不了你的将来。当你责备他人的时候，你就放弃了掌握自己人生的机会，逐渐地你被别人左右了你的情绪。曾经有一段时间，我常常责备他人，我认为生活中不管是现在的还是未来的失败与困难，都是过去伤害我的那些人的错误。不过现在我明白了，我得为自己的行为负责。我决定不在自怜，我要为今天而活，我要把握自己的未来。不要再怨天尤人，记住，这完全取决于你。

五、不愿付出。

你尽力了吗？你在努力把你的本领在工作中展现出来吗，或者只是做最基本的？你是否把真实的自己展现在你的朋友们面前，还是出于保护隐私而表现出你很少的一部分？变得可信些，多与人交往些，自信些。当你刚刚认识一些人的时候，不要对事情乱下评论，更不要说他们不值得你给出意见。当在交流过程中轮到你给出意见的时候，你却只字不提，不展现你的天赋，也不做任何贡献，这时你的行动就传达了一个信息：你可能是在暗示你太重要了，或者你不可靠，或者是你没有什么见解。当然你是个聪明人，如果你不知道你的强项在哪里，试着发现它们，如果你害怕遭到拒绝，那么就从上帝那儿来汲取面对生活的勇气，如果你想锻炼你的本领，那么得保证会这么去做。整个世界都在等着你那非凡的加入，当你努力尝试的时候请牢记上面的第一点。

六、没能做到。

借口，借口，借口。你的生活中是否充满了为没能完成某件事而做出的解释和借口？一个财富五百强公司的CEO可以让别人等他，可以在会议上迟到，而不用编任何借口，员工们觉得这种行为也是领导在公司中权威地位的一个体现。但是对一个普通人来说，如果约会迟到，不管他的日程安排怎么满满的，总是需要做出一个解释的。这种迟到的行为通常会冒犯别人，给人留下不尊重别人的印象。当你需要一再为你的行为做解释的时候，你有没有想过别人会怎么看你？

生活是怎么样的呢？很多时候人们完不成任务：当你做承诺的时候，你信誓旦旦，后来毁约的时候，又把你的诚信面具撕破，影响了在商业和人际关系上的可信度。做一个信守诺言的人，言出必行，也不要轻易做出承诺。当你最后无奈妥协的时候，你在告诉别人你这个人不怎么样。如果你想在别人心目中保持良好的印象，那么就要想尽办法完成任务，这样的话借口就可以留到真正十万火急的时候了。

下面是让你可以避免食言的三条建议：

1、合理安排时间：你需要时间来表现对你孩子的尊重，其他你所爱的人也同样是这样，但是商业上的最终期限也很重要，因此需要你做出权衡，不要轻易的承诺。

2、对人忠实：当你不诚实，虚假，向压力妥协，背叛自己，做一些昧良心的事，记着要变诚实，对自己真诚，对别人真诚，不要虚伪，做真实的自己，恪守承诺，不要口是心非，还要对自己的信仰真诚。

3、集中注意：当你感觉自己对事情冷漠，表现的懒散的时候，不要冒险去做承诺，当然也不要生活在担心失败的阴影里。

树立一个你为之奋斗的目标，对于向自己或别人做下的承诺要忠诚，努力逐步实现你的目标，完成你所承诺完成的，给别人留下好印象的最好方式就是你的行动。

七、批评别人。

作为一名老师，我的天职就是批评别人。但是你如果不是我的学生，事情就不该由我来管。你身边有这种喜欢对别人乱加评论的人吗？你有没有察觉到自己也有这种倾向呢？对你的衣着指指点点，对你说的恶言相对，讥讽你的想法，或者藐视一些你很在意的事情，这些行为都能够带来紧张的、不和谐的气氛。你有没有被你的不安全感驱使着去讽刺贬低别人的经历？在你努力变的更好的时候，你看上去就想研磨剂。你需要知道自己有多棒，而完全用不着去伤害别人，不用为了让自己感觉好些而去贬低别人。你对于这个世界会有很大的贡献，别人所做的贡献并不会改变你生活的禀赋。因此，不要不管你的事的时候，不要对别人评头论足，你会发现周围人对你的态度改变有多快。

你在沟通的时候的表现是不是也很糟呢？找出你在沟通中有哪些悲哀的不足，纠正这些不足，从今天开始就改变你的生活，相信你能做到的！

转载自 Angelived中文翻译
原文地址：http://angelived.org/2007/07/12/7-behaviors-that-mess-up-communication-are-you-making-a-good-impression/

开口拒绝他人的8个方法

2007-09-04T09:43:00.000+08:00

对于一名自由撰稿人而言，学会拒绝是一项重要的本领。（我觉得对所有人都是如此）

如果你没有这项本领，那么你会被繁重的要求和任务压的喘不过气来，然后你就会老是太劳累却又总是不能按时交稿，你的文章质量也会下降，这样一来你就很难接到你所感兴趣的活了，更重要的是你的报酬也会大不如前了。

当你学会拒绝之后，虽然你可能会感觉有点伤害或者冒犯别人（这也确实有可能），但是与此同时你也传达给他们这样一个清晰的信息：你珍惜自己的时间，你有选择的权利，而且你也尊重那些你拒绝的人，你之所以拒绝正是因为你不想草率的做个承诺，你不会在履行的时候马马虎虎或者懒得去做。

对所有不期而遇的任务你都得匆匆拒绝吗？答案显然是否定的。众所周知，作为一名自由撰稿人，面对成堆的账单我们必须揽到一定量的活，有时对一些差强人意的任务我们只能点头，但是明确自己的能力范围、自己的兴趣所在以及摆在你面前的要求是否合乎你的选择也是十分重要的。最重要的是，当你觉得实在没有必要或者毫无兴趣接某个任务的时候，你可以选择拒绝而不是埋头干。

要获得这项本领不是一件轻松的事情，对于那些不敢说“不”的人们，我在这里可以给你们支上几招，值得一试。

1、试着先同意。这似乎听上去有点自相矛盾，但是我把这看作一场心智的柔道。你可以同意要求（假设你的情况是你想接下这个活但是手头没有足够的时间），然后做下面两件事之一：1）你可以说：“没问题，但是我现在的任务多的像山一样。你能不能过一个月左右再来找我？除非我真能干的非常出色我是不会这么打包票的。”
或者2）你可以说：“当然可以，但是你能不能先去做x,y,z，这样我们才能看出这件事到底是否可行。”
无论你选择上面两个中的哪一个，你都没有断然的拒绝他们，而是把主动权交回到他们的手中。我觉得你在真心想要这件活但是实在抽不开身的情况下才这样说，这样说帮你解决了主动权给你带来的压力，让你用不着真正说出那个“不”字。

2、了解你曾做出的承诺。为了知道什么时候用得着说“不”，你得了解你现在已经揽了哪些活了。你得给你现在所有的项目和任务建一张流动的列表，同时也为你在一个星期左右时间内的不属于那些项目的活动列一张活动任务表。有了这两张列得满满的表你就可以决定眼前这个任务能不能挤进去，小心保管这张表，只有在事出必要的情况下才在上面添加项目。

3、珍惜你的时间。许多人难于拒绝的一个原因是他们（或许是在潜意识中）感觉自己的时间没有别人的珍贵。例如，如果别人让你去做一件他们自己能够轻而易举完成的事，你同意的话，就相当于承认他的时间比你的更宝贵——不然的话为什么你要替他们代劳呢？因此你要珍惜你自己的时间，你的时间是有限的，而且可能是你最为宝贵的财富，学会通过拒绝那些用不着你来操刀的事来告诉别人，你有多珍惜自己的时间。

4、拖延。与上面的策略1有点类似，如果你选用这招的话你用不着下决定，用不着点头或者摇头，而只是让来请求你的人迟些再来。例如，你可以说：“我的任务现在排的满满的，你能不能两个礼拜以后再来找我？”如果这个人不错的话，他会把两星期后再来找你这件事加进自己的备忘录里。要是这人不地道，他们肯定早把你忘了。有的时候如果你连着拖延了两回，那个人就会放弃了，当然老是拖延一件事也不好，这会让别人觉得你人品有问题。一般在两次拖延之后，在别人第三次求你的时候，你就应该给出个明确的答复了。

5、礼貌，但要坚决。很多人容易犯的一个毛病就是太好了，或者太优柔寡断了。他们可能虽然拒绝了别人但是他们的拒绝听上去有些动摇，如果你这样回应别人的话，会有更强的人来向你施压，直到你点头答应为止，这是因为他们觉得事情还有商量的余地。因此如果你要拒绝的话，你就得让别人清楚的知道你不会再改变主意了。但是别表现的粗鲁，一句简单的“不，我现在实在无能为力”就够了。

6、抢先一步。如果你觉得将有人会有求于你，你可以在别人向你请求之前告诉他们你很忙。如果你与那人碰面，你可以说“话说在前头，我得让你知道我的日程表里这一个月里都排的满满的，所以我们别谈关于30天内的什么新计划。”这相当于对那个将有求于你的人做了一次警告，因此事后他们也无法怪罪你拒绝他们的请求。

7、“我很乐意，但是……”类似于第一个方法，这招表现出你对这项计划很感兴趣，但是你因为日程安排或者有其他的任务而实在无能为力。如果这个计划听上去真的很有趣的话，我会经常说些如“这听上去确实很棒，我多希望自己能加入进来啊。”如果可能的话，我也会推荐一些其他的适当人选或者可行想法。一些人实际上觉得这种被拒绝的方式还不错，至少你也帮他解决了难题。

8、永远别说抱歉。还是得珍惜自己的时间，如果你道歉的话，就好像是在为做错一件事而道歉，这样一来你拒绝的理由也就显得不甚充分了。我知道，在这种场合下，说“对不起”这三个字是很有诱惑力的，我们常常说“对不起，但是……”或者“我多希望能帮你，但是很对不起，我没办法帮你。”这类的话，这是因为我们拒绝别人的事后会觉得很不舒服。但是，还是那个问题，这样一来，你会向别人传达错误的信息。回头看看第5条能给你一些帮助。

原文地址：8 Essential Strategies to Saying “No”

译文地址：开口拒绝他人的8个方法

翻译：未名

25岁，初学古典，我的吉他情结、人生历程

2007-08-31T11:41:00.000+08:00

和多数人一样，真正接触吉他应该是从大学时代算起，那个时候不是很清楚什么是古典、什么是民谣，只知道寝室放着一把中矩的的练习琴，牌子好像是红棉的，那时应该是18、19岁吧，嗯，多好的年龄啊～

　　那时纯粹是出于冲动和“爱现”的心理，像模像样地自己琢磨着弹，在没有任何指导和曲谱的情况下，靠听力自己会弹了点《爱的罗曼史》、《Breezy》，后来由于不得要领，并且热衷于电脑游戏，最终失去了坚持下去的动力，现在看来，多么的愚蠢呢，我觉得玩游戏并没有什么不好，但最大的区别在于：同样是投入了大量的时间和精力，离开了游戏，心里只有无尽的空虚，而离开了其他的爱好和特长，那种已经根植于内心的技能则不会迅速淡去，我们在不断的进步过程中总会有种成就感在刺激着你，这种成就感会随着你技能的进步而更加强烈。而游戏呢，它并没有发展到那种所谓“第九艺术”的程度，它的最大缺陷在于：游戏者无法与别人分享其成就，游戏中的成就感是私有的，你无法拿它与别人产生共鸣，如果什么时候游戏终于突破了这层障碍，那么它才配得上“第九艺术”的称号。

　　后来因工作原因来到北京（已是2003年了），临时住在集体宿舍里，宿舍里有个弹古典的同事，听了他的演奏，那美妙快速的弹拨真可以用“一串串珍珠”来形容，没想到吉他的表现力可以这样出色，我之前一直是梦想以后能买一台钢琴放家里弹的：）。从那时起，我跟着他了解了什么是古典、谁是卡尔卡西，至此就抱着《卡尔卡西古典吉他教程》从基本一点一点练起，至此算是终于想起了小学时就学过而一直不知道有何用的五线谱……，这样的日子，持续了2个月左右，我们就都从集体宿舍搬出来了。

　　一转眼，4年过去了，我对古典吉他的热忱始终没有淡去，2007年左右我读完了艾萨克阿西莫夫的最后一部自传《I'Asimov》（中译《人生舞台》），从这位科幻文学巨匠极具亲和力的自传中，我了解到许多从不知晓的社会和生活哲理，也从这位有资本去自负的老人身上找到了许多共鸣，艾萨克曾经提到自己对于音乐有很强的理解力（姑且这么说），他自称可以把每一个音唱得很准（事实上他的确是喜欢唱歌），可遗憾的是他对乐器不曾掌握。我觉得如果一个人觉得自己对哪一方面比较有兴趣或者说更擅长去做什么事，那么一定不要荒废了，人生绵延数几十年的光阴，当你回首往事，后悔没有什么特长或还没做过一直想做的事时，那就迟了，我，不想这样。

　　2007年8月25日，我和女朋友一起去了北京的新街口，在那里的一家琴行，买下了自己的第一把古典吉他：协奏CG-11A，琴行赠了我一本陈志先生根据卡尔卡西化繁就简的古典吉他教程。这时我已经25岁了，晚吗？不晚，我认为除了那些对生理要求特别严格的事，没有什么你想用心去做的事会是晚的。

　　话说回来，我已经25岁了，可是在工作事业上依然没有什么突破，这是所谓性格决定命运么？但我不觉得自己是认命的。
　　每个人生活在一个圈子、一个环境，我们或多或少都有迁就、妥协的态度，得过且过，这就是认命了，在任何时候都是一样，无论是做事、社交、治学、生存等等，不禁想起了梅尔吉普森主演的《赎金风暴》，男主角坚持不妥协的态度确是让我震撼，颠覆正常思维，但是相应的，做出绝不妥协的举动所必须的心理支撑及负担也是巨大的，还是那句话：我们每个人都不是完美的，但是我们要有趋于完美的想法和举动，不能妥协在容易让人慵懒、散漫的生活长河之中，这的确是很难。
　　《24小时》第一季看过吗？帕默总统就是不愿妥协的典型，可事实总不如愿。
　　还有一句老话：做一件好事不难，难的是一辈子做好事。
　　我想尽力做好大部分，这足够了，我以为如此。

Breezy钢琴谱 - FF8（最终幻想8）BGM

2007-08-31T11:14:00.000+08:00

很早以前听到这支曲子的时候就很喜欢，听起来像是练习曲，只有单音，但的确是好听，初学者向：）

frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法

2007-08-28T13:17:00.000+08:00

很久不用frameset，原因是这个古老的标签的确是不怎么讨人喜欢，但是在项目设计时由于协作的问题，还是有很多地方会用到框架，嗯，闲话少说了：

问题：使用框架（无论是frameset、frame、iframe）嵌套网页的时候，如果子网页的高度超过了预先设定的高度，会出现滚动条，也就是尺寸溢出，一般来说如果高度超了就出现垂直滚动条，宽度超了就出现水平滚动条，但是在IE6中，只要尺寸大于等于预定高度，就会两个滚动条一起出现，这好象是一个bug。

解决方法：
在子网页设置css如下：

html {
overflow-y:auto!important;
*overflow-y:scroll;
}

这段最重要的一点是设置overflow-y为scroll，这样强制出现垂直滚动条的话，水平滚动条就不会显示出来了，但如果宽度超出过多，水平滚动条还是会超出，这时可以考虑设置:overflow-x:hidden;，但相应的，这样用户就无法滚动子页面了。

之所以要加overflow-y:auto!important;，是因为IE7中已没有这个bug，并且firefox也能认到overflow-y这个据说是IE的私有属性……，所以我们还要把overflow设回来。

Google谷歌拼音 - 一项期待已久的重要更新

2007-08-15T13:27:00.000+08:00

一直以来都为Google拼音的那个浮动状态条感到郁闷，不能正确地隐藏，因此非常地麻烦，自从上个版本（1.0.20.0）发布之后，很欣喜地以为终于可以在看电影、玩游戏时不会再看到烦人的状态条了，但是用了一段时间后，还是出现了不能正确隐藏的Bug，今天（2007年8月15日），http://tools.google.com/pinyin发布了1.0.21.0版本，更新说明如下：

版本1.0.21.0
修正了在部分游戏和应用程序中的兼容性问题
支持支持中文数字输入模式
支持用户自定义标点符号
支持用户自定义快捷键

别的不管，我认为最大的亮点就是可以用快捷键控制状态条的显示/隐藏了（Ctrl+Shift+S），哎，也算是了却了一块心病，故特此在博客里纪念一下 ^_^b

PS: 今天是在新浪工作的第5天，目前一切正常，唯一感到伤心的是这里的同事年龄普遍都比我小，呵，我仍然是注定什么事都要落后的么？

《大雄的恐龙》影评 - 华星哆啦A梦见面会随笔

2007-07-19T16:37:00.000+08:00

作为藤子F不二雄的超级FANS，很早就知道《大雄的恐龙》要正式引进并于2007年7月上映，所以一直比较关注相关的事，周一（16号）登录UME华星网站的时候，看到了哆啦A梦见面会的事项，其实就是首映、试映，本着无所谓、试一试的心态就登记报名了一下，没想到第二天就接到华星的电话邀请，哎，我这个买彩票连5元钱都没中过的倒霉蛋也有这种小运气？所以很快就答应下来。

　　今天，19日，顶着炽热的太阳暴晒，如期来到华星影院，我们被安排在4层的贵宾厅，相对于1层大厅铺天盖地的《变形金刚》，4层门口的招贴明显多了起来：

走廊尽头左手边就是贵宾厅。

厅内，主要是小学、中学的孩子还有我这样的社会人士，剩下的就都是媒体，总共不到40人：

这张照片右手边一侧坐的都是媒体，现在还没到齐：

正片还没开始，这几位已经开始享受皮质的豪华座椅了：

我座位上的升降开关：

观后感：

　　影片整体上来说，制作很精美，这很符合日本动画片的一致特征；
　　赞一下中文配音，比原来的粤语版配音要强太多了；
　　一行5人的年龄比其他动画版的要稍微大一些；
　　片头曲不再是我最爱的大杉久美子原唱的主题曲《ドラえもんのうた》，改成了夏川里美的《ハグしちゃお》（拥抱吧）；
　　片尾曲名叫《ボクノート》，sukimaswitch组合演唱（常田真太郎、大桥卓弥）；
　　插曲不知名字，但是很煽情，很感人，在大雄他们开心地生活在白垩纪的时候，插曲恰如其分地开始伴奏。需要说明的是，所有的大长篇系列，都是武田铁矢作词的，有很多都很精美，《大雄的恐龙》里面的词（诗）名叫《在你的衣袋中》。
　　但不知道是自己对这个故事已经太过熟悉的原因还是什么，整体感觉很是平淡，除了几个感人的场景仍然让我这个奔3的人潸然泪下之外，再无别的感觉，我感动的是这么多年后哆啦A梦仍然能继续着他的纯真神话，自己孩童时代心爱的东西今天终于能正式呈现在身边纷繁芜杂的世界，啊～我们的儿童时代。

　　值得一提的是，现在重温《大雄的恐龙》，感觉大师的第一部大长篇作品，还是生出许多感慨，这是我第一次看大荧幕的哆啦A梦，还是很感动的，但是，如果出第二部翻拍的作品，我可能不会再看了，动画和漫画不同，它们是两种不同的表现形式，动画是主动地把映像呈现给你，你是被动地在接受电影里的世界观；而漫画和文学作品是静静地躺在那里，不同的人去阅读会生出不同的感受，看出不同的内容，这也是许多人更喜欢漫画或文学作品而不喜欢依此改编的电影的重要原因，除非电影改编地足够出色，如果说动画版的受众偏于低龄化，那么漫画原作的哆啦A梦绝对是值得反复咀嚼的成年人向的文学作品。

　　大师在创作大长篇《云之国》的时候逝世了，我最喜欢的大长篇作品就是云之国，他所营造出来的云之国的世界太美妙了，我记不清这本漫画被我翻了多少遍，反正是快翻烂了。
　　
　　不得不说的是，日本动漫产业是世界上绝对的霸主，日本是世界上第一个将漫画的地位提高到等同于小说、电影的国家。但是，电影事业的确不尽人意，从今天孩子们的反应来看，他们根本意识不到这位漫画大师的动人心灵之处，我也不认为这部重新制作的影片能够卖座。不过，我期待2008年世嘉（SEGA）全新的制作《大雄和绿巨人》。

　　藤子F不二雄曾经告诉我们：“小的时候，我就是大雄。”
　　我在这里说：“小的时候，我就像大雄。”

关于时间的话题：

　　另外，《大雄的恐龙》剧情的主线是以时间线为依据的，但是很遗憾，片中有很大的漏洞存在，我们都知道时间悖论和平行世界理论，大师在前期的故事中都严格遵守时间悖论，认为时间线是不可破坏的，未来也是无法改变的，这样，我们就看到这样一种情况，A点（现在），B点（1亿年前），我们可以把A点看作是B点的未来，也可以把B点看作是A点的过去，我们可以认为时间线是一条无法闭合的直线，也可以认为时间线是空间上的莫比乌斯环（或克莱因瓶）；时间悖论中的一个重要理论是蝴蝶效应，如果按照蝴蝶效应的说法，那么像片中恐龙猎人这么大规模的破坏早就会对未来造成剧烈的影响；但是大师在这一创作时期认为，未来和过去是已定的，无论如何做，都是无法改变已经发生了的事（我觉得时空巡逻队在片尾对大雄他们致敬大概也是已经了解到这班英雄会无数次地拯救世界吧，呵呵）。
　　但是，到了大师创作的后期，他对时间的概念逐渐发生了变化，从作品中就可以看出，他逐渐接受了平行世界理论，不再认为时间线是无法改变的了。

关于平行世界理论，我简单说一下，平行世界理论完美地解决了时间悖论的难题，它提出，如果有时间旅行者穿越时间进入过去或未来，那么他实际上是已经跳出了原来的世界，进入了另一个平行的时空，这样他无论怎样杀死自己或者让自己的外祖父离婚，都不会对原来的世界造成影响，他只要穿越时空，就跳出原来所在的世界，无论他怎么跳，都永远无法再回到原来的世界中了，我们拿上面举的例子来说，原来A点到B点是有且只有一条直线，平行世界理论就认为两点之间同时存在无穷多个路线，对，就是量子力学的不确定性理论。

　　末了，说说哆啦A梦的周边吧，很遗憾我除了满书架的哆啦A梦短篇、大长篇漫画集之外，再无别的周边，小时候家里不富裕是一个原因，另一个重要原因是哆啦A梦的周边产品在国内无法买到质量上乘的，我看中过好多款哆啦A梦的周边产品，非常想拥有，但是，中国是买不到的，哎……

华星送的手提袋：

手提袋的另一面：

哆啦A梦毛绒玩具和哆啦A梦扇子的正面：

哆啦A梦毛绒玩具的屁屁和哆啦A梦扇子的背面：

关于电梯

2007-07-19T11:14:00.000+08:00

关于电梯，以前有几个朋友说电梯摇摇晃晃什么的，呵呵，还真是，有几个小区的电梯的确是抖得厉害，别看地段好，房子久了就会这样，必须用电梯的高塔、高板尤其如此。

观察了一下，1梯四户（2梯8户）是完全能满足需要的，前提是小区里不能有商业住户，如果有商业住户，那这个小区就别想安宁了。美林湾的塔楼是2梯5户，这已经算不错的了，北京里面好多小区都是2梯8户、2梯6户，哎，可以想象这样的住宅楼住进了商户后，该是怎么样的情景。

讲谣言扰乱社会的人都该判死刑

2007-07-19T10:33:00.000+08:00

北京近来流传着“纸箱馅包子”的传闻，说是黑心的店家把纸箱沫经过处理、加料，变成和肉末包子一样的外观、色泽和味道，以此牟利，我初听此消息虽然觉得这些人着实黑心，但由于自己平时不怎么吃猪肉，倒也没觉得怎样，无非是和注水猪肉、注水西瓜、假鸡蛋等等黑心商贩的技俩一样呗，尽量到一些正规或者知根底的地方去买就好了，但是今天忽然看到一则消息，说是：“‘纸箱馅包子’被查实为虚假报道，北京电视台向社会深刻道歉”，TNND，这不是跟之前的“海南香蕉有毒”、“海南香蕉携类似sars”一样嘛！

　　不管造谣者出于什么样的原因、什么样的目的，这么做是有百害而无一利的，受到谣言冲击的人们遭受了多大的损失啊，对社会的影响更是恶劣。

　　看看海南的蕉农吧，看看烂在地里的香蕉吧，不知道造谣者是否意识到自己到底造成了什么样的过失，不知道人性的苏醒是否还会发生在造谣生事的人们的有生之年呢？

利用jabber.no让GTalk和MSN互通传递文件

2007-07-19T10:00:00.001+08:00

利用jabber协议让不同的IM软件互通早已不是什么新鲜事，网上介绍关于使用Google Talk连通MSN、QQ等软件的文章也是数不胜数，但大多数的jabber服务器都只能提供文本信息的转发，而且由于种种原因，jabber服务的稳定性也是着实让人郁闷，我自己也是换了好多次jabber服务器，最终选定了msn.jabber.no，这里介绍一下它相对别的jabber服务器的3个特点：

1、能显示出MSN好友的头像，部分jabber服务器不能做到；

2、能显示出MSN好友的个人签名，部分jabber服务器不能做到；

3、能接收MSN好友发过来的文件，当MSN好友向你发送文件时，msn.jabber.no会post过来一个链接，形如：http://www.jabber.no:8011/636582658/IMG_3129.jpg，点击这个链接就会跳出IE窗口，然后就和普通的http下载一样，直接保存就行了，但是速度不是很快，我这里平均才5K/S左右，遗憾的是：不能向MSN好友发送文件。

还有另一点，就是jabber.no比较稳定，用了半年多了，只出过一次无法连接问题，呵呵，推荐大家使用。

Discuz!NT asp.net论坛程序真正的静态html页面Archiver归档实现插件

2007-07-15T10:56:00.000+08:00

Discuz!NT论坛的archiver仍然是伪静态url的替换，并不是真正的静态html页面，这样对于广大使用虚拟主机的朋友来说很不好，遂改了这么个东西，把论坛数据重新归档为html静态页面。

这样做对于大数据流量的论坛来说很不实用，效率也低，但是对于起步阶段的站点、站长而言，应该是个不错的选择：）

我对asp.net和C#均了解不深，只是想给大家一个思路，就不提供代码献丑了，希望有人能做得更好。

演示地址：http://www.moonless.net/htmlarchiver

asp.net出现小10年了，现在才开始研究……汗，我这种后知后觉的人注定要永远落在后面吗……
现在学asp.net不为别的，就是为了生计…….net的快速开发的确是让我们这些scripter能把精力更多地投入到业务实现中来，这样也好，但不知道自己的前途究竟会否发生变化呢？哎～

注意xml中的&，调试一定不能偷懒

2007-07-04T16:09:00.000+08:00

晕死，昨天遗留了一个asp和ajax的程序问题，一直报取值为null，查了半天也没查到原因，在本地测试没问题，传到服务器上取了服务器的数据就有问题，怪～
开始以为是服务器的缓存没有更新，我传的文件没有正确加载，但反复更新了之后还是不见解决。
此时我已经怀疑是xml没有正确输出，但懒得再down数据库并还原在本地，就一步一步更改.js文件并逐个排错，直到今天中午仍然没有发现问题所在……

刚才终于耐不住了，把远程数据拉下来，在本地跑，呵，还是报错，由于是用ajax读取数据，我偷懒只调试.js文件，压根没想到xml输出有问题；现在把xml单独输出，终于看到了错误信息“该位置上不允许有空白”，呵，典型的xml文件不能包含“&”符号的错误，晕呐，原来是远程数据库中的一个字段包含了“&”字符，而我却一直视而不见，浪费了我大把的时间……555555

哎，记录下自己的糗事，引以为戒。

我不愿照镜子

2007-07-02T16:04:00.000+08:00

这是上大学的时候写的自由诗，现在念起来我自己还是很喜欢，分享一下：

我不愿照镜子，
因为镜中的那个人没有想象中完美。

我不愿照镜子，
镜中人世俗的脸孔会玷污我的灵魂。

我不愿照镜子，
它会映射出一切事物的反面，
每个人在镜中看来都是那么的虚伪。

我不愿照镜子，
自信与自我在这里失去了意义，
镜中人才是真正生活中的自己，
虽然虚构的感觉真的很美好。

我不愿照镜子，
人们会对镜中的事物更为挑剔，
将其修整得面目全非，
又去对没照过镜子的指指点点。

我不愿照镜子，
我并不厌世，
一千年前就有人说过：
以铜为镜，
可以整衣冠；
以历史为镜
可以知兴亡；
以人为镜，
可以知得失。

是的，
的确。
不过，
真的，
我不愿照镜子。

拼凑出来的《云的去向》

2007-07-02T16:00:00.000+08:00

你就像那温柔的风啊
轻轻带我离去吧
挣脱这些不快的记忆
一起飞向梦的彼方

我拼命地向前飞啊
为了追逐那一片云
它不经意间流露的苍白
是在怜悯我的孤独吧

总说我捉摸不定的风啊
你又何尝了解我呢?
因为你我不断的改变自己
而你只是时不时催我踏上新的旅程

多想融入那醉人的白色啊
不会再孤独了：）
风好大，我好累
前途渺茫呢：）

（时光飞逝……）

我想听那温柔的歌啊
谁回味我歌唱呢？
无情流逝的岁月啊
我究竟在祈盼什么？

（风停住，雨袭来）

我不再飘动
默默的接受雨和电的洗礼
若说上苍无情
那么此时的雨不会比那个时候更为凄苦
若说上苍有情
那为什么冰凉的雨丝又会泯灭朝思暮想的身影呢？

沉重的翅膀在无法托起厚重的希望
夜幕中云早已不知去向
大家说我是地狱的使者
难道她也……
源源不断的无尽思念啊
到底要清澈无比的流向何方

文中多处句子引自：《动漫时代》

诗歌《我是个懦弱的人》

2007-07-02T15:58:00.000+08:00

我是个懦弱的人，
曾尝试鼓起勇气，
可是我的勇气只有一点点……
请你也鼓起勇气吧！
因为我俩合力，
勇气一定会增加。

我是个懦弱的人，
面对着哭泣的你我也无能为力，
因为我的力量只足够紧握拳头。
请你交出你的爱，
尽管只是一点点，
因为我俩合力，
力量一定会增加！
一定只要大家齐心合力。
一定我不是懦弱的人。
一定齐心便是力量。

原作：武田铁矢（哆啦A梦大长篇插曲），摘自：《动漫时代》

诗歌《寂寞挑战》

2007-07-02T15:56:00.000+08:00

你的生活很封闭
你的性情太孤僻
你的眼眸总闪着忧郁
不知你的遭遇
不清楚你的过去
但我很明白
你经受过太多风雨
你总是独自走来走去
自你的背影在风中显得苍白无力
我常想
如果我是你的爱人
我的快乐能否给你的忧郁
透进一丝春的气息
……

摘自：《动漫时代》

诗歌《轻闭双眼》

2007-07-02T15:47:00.000+08:00

轻轻闭上眼睛
就会看见一个世界
无限伸展的宇宙
在你心中展现
生命焕发光辉
万物归一
现在就记起
可以听见鼓动
这个美丽的星球
永远散发光辉

绿日渐丰盈

就像轻轻流水
释放心情
在光和风中
融化消散的歌声
停止一切掠夺
离开恐惧
就一定能找到
生命的意义
在心中
为你的笑脸祈祷时
感觉喜悦的波动

爱日渐丰盈

摘自：《动漫时代》

4年后再看《让相逢的喜悦代替分别的泪水》以及当时的信件

2007-07-02T15:41:00.000+08:00

前几天在整理以前大学里我们宿舍自己做的很初级的网站，喏，都在这里：http://www.moonless.net，聊以纪念，自然也就翻到了以前写的很稚嫩的文字，呵呵，其中一篇发表了，就是《让相逢的喜悦代替分别的泪水》，赚了79元稿费，我的第一笔也是唯一一笔稿费，嗯，再贴出来吧，虽然我每次看都很伤心。

文章寄出去时是附了一封短信的，片段如下：

　　时代前进着，每个人也都在成长着，我害怕自己到了家长那个年龄时已经不再喜欢游戏了，我怕充满幻想的自己还未飞翔便颓然坠地，黯然无光。也许游戏和电软哪一天真的会走出我的生活，但，这段曲折坎坷的经历作为美好的回忆，每当想起她时，那份纯真，那份感动，是不会变的……

文章发表之后，当时又给编辑写了一封回信，内容大致是首次发表文章的感言，极尽感谢赞美之词，下面只摘有用的：

展信悦。

　　12月2日，漫天飞雪，天地间浑然一色，街道上了无生气，唯有书店大门依然敞开，电软静静的躺在那里，一切都是那么的稀松平常，平淡如水。然而对于我，这是个值得纪念的日子。

　　过去的读者调查有一个问题：“你首先看的是本刊的哪些栏目？”现在告诉你，大家以前填的都是违心的，99.9% 的朋友最先看的，应该是每次的大奖名单吧？：）我迫不及待的捧回电软，迫不及待的翻开杂志，迫不及待的搜寻获奖名单，迫不及待的失望，迫不及待的想要骂街……是谁说：“期望越大失望越大。”？又是谁说：“有心种花花不开，无心插柳柳成荫。”？自中国电玩榜开榜以来，投票从未间断，失望也从此成了家常便饭，最开心是看闯关族的家，最伤心是看每月新作期待。转动命运的轮盘，我是输家。没有筹码那种。

　　百无聊赖之际翻翻杂志，无意间看到一段熟悉的文字“让相逢的眼泪代替分别的泪水……Cutsin”呃？？发表了？！哗！发表喽！身旁的好友托起险些坠地的眼井吃惊地瞪着一跃而起的我：“喂～～～你没事吧？”他看过文章之后暗自偷笑，“嗯，这个，真的，想不发表也难哦，你看，你看……”，他对着杂志指指点点，“首先，文采的确不错；其次，你肯拉下脸面写这档子事，可贵，可贵；再次，这里，看这里，你对小编极尽阿谀奉承之能事，他们顿起怜悯之心，满足你的小愿；然后，煽情，我看见你那副谄媚的样子就……你，你想干什么？啊！”哼，竟敢在我面前说这样的话，让他尝尝我的铁拳！:)

　　第一次看到自己的文字变成铅字，而且是在自己最喜欢的刊物上的时候，那会是什么感觉？突如其来的惊喜，那份感觉无法露于言表，没有收到编辑回信，一直没有（现在想想，大概是编辑后悔等了这篇文章吧……）

　　总有人不屑地声称对游戏没有兴趣，在我经历了无数次据理力争而费力不讨好的下场之后，对这些言辞渐渐麻木了。“任你红尘滚滚，我自清风朗月。”这大概是好多玩家心理的真实写照，然而非玩家也是如此，这就形成了所谓“围城”：里面的人不想出去，外面的人不想进来，各自不肯放弃自己的世界，立场鲜明，可悲的是双方互相鄙视，冲突不断。

　　记得《游戏批评》封面上有一段话：“游戏是人类的天性，批评是前进的动力。”有谁敢拍着胸脯说自己从未游戏过？游戏的涵盖如此之广，为什么总有些人要视电子游戏如眼中钉，肉中刺，千方百计想把它赶尽杀绝呢？“狐狸吃不到葡萄，就说葡萄是酸的。”这句话看来要改一改了：“狐狸吃不到葡萄，不但说葡萄是酸的，还要把别人的葡萄抢过来踩烂。”卑鄙。

　　经常可以看到有许多能言善辩的玩家发表自己的精彩文章，内容很好，提出的问题也很尖锐，交流，真的是一种享受。

　　我写信喜欢打草稿并整理之后再发出去（这次因时间仓促，所以写得很乱，请风林兄见谅），所以在我准备誊写的时候遇到一件意外的事。那天我在网上碰到高中时的一个朋友，互相寒暄后我问他：“这次黑铁奖你参加了吗？”“什么黑铁奖？”“电软 12 买了吗？”“电软？是什么？”“……电子游戏软件，老兄，你今天怎么了？”“噢，我知道，我的意思是现在谁还买那种东西！我定了《我爱摇滚》，齐睿买了……”我没再看下去，本来还想把文章发表的喜讯告诉他，现在这样……算了。10 分钟后我送了一个“唉”给他，并介绍了几个 GBA 的游戏，他却回答他什么都不想买，有电脑游戏就够了……

　　想当初我们在一块儿谈论大学一年后的改变，每个人都信誓旦旦地说自己肯定不会有什么变化，TV GAME 永远是自己的最爱，现在呢？我是个随遇而安的人，有点变化不奇怪，但朋友们无一例外的进行了所谓成长，仿佛一夜之间变得陌生了，最让我无法接受的是他们一致认为我变了，我物理的反驳说是因为你们的改变在改变着我，他们只是不以为然的摇头。

　　还是我上次信中说到的，面对世界发展的潮流，我们究竟该何去何从呢？风林，你们真的没有意识到电软的读者群正在流失么？诚然，我们不可能哭着闹着求电软不要舍弃中国的劳苦大众，登载一些行将淘汰的信息，那不现实，也没必要，国情如此。无奈的我们只能在无言中注目时间的流逝，只有经过岁月的洗礼，才能看清楚真实。当美丽流光溢彩时，那么决定美丽的便已不是美丽本身。也许，是我会错意了吧。

让相逢的喜悦代替分别的泪水

2007-07-02T15:34:00.000+08:00

迷蒙的泪眼模糊了父亲的身影，一句句的嘱咐，一次次的承诺不断回荡在耳边,往事在一次兀现于我的脑海。

　　初三的时候一个偶然的机会，我被同学带到了一间街机室，感动与其美丽的画面与劲爆的音效，那就是街霸。由此开始了我的游戏生涯。后来我完全沉浸在街机厅，接触了“豪血寺一族”、“铁钩船长”、“鲛！鲛！鲛！”、“吞食天地”等许多街机游戏，也因此耽误了学业，一向成绩优异的我没有考上省重点，悔恨，已经来不及了。当时父母并不知道我迷上了电玩，他们只是静静的听着我的哭诉，然后淡淡地微笑着鼓励我：“这没什么，是不是重点有什么关系，一样能考大学的，不是吗？”泣不成声的我暗下决心，三年后一定要考上北科大。开始时我的确是很努力，但自制力不强的我终究无法抵受电玩的诱惑，再度踏进了街机室，吸引我的，便是 kof96 & 97 了。这期间认识了一个朋友，在他的指引下我初识 BIO2 ，第一次夜不归宿，第 N 次对家人撒了谎，不过却从此进入了 TV GAME MASTER 的行列。

　　自制也是一种修养，正是缺乏这种修养，我完全放纵自己畅游于游戏的广阔世界，自己的世界观也发生了重大变化。感到有趣的游戏我都玩，不分机钟，只求自己快乐（是建立在“地下活动”的紧张之上的）。为了更好的 play ，我结识了电软，97 年第 3 期，自此期期电软不落，款款 game 必玩。我喜欢游戏文化，科普知识，喜欢游戏之外的许多，也可以说是由于游戏，我接触到许多过去所未曾想、所未曾见的更前卫，更深邃的文化，但是，除了这些，我剩下的就没有什么了，高中三年我甚至没和班里的一些同学交谈过，主科成绩一塌糊涂，北科大的梦想也变成了白日梦，同学不再热情，老师不再关心，父母发现了我的事后严加管制，可也于事无补。由于没有自己的主机，我经常光顾游戏室，和 Boss 很熟，可我竟然于元旦将近的一个晚上，头脑一热、鬼迷心窍、精心设计、不思后果，荒唐糊涂地搬走了 Boss 的 PS ……事后幸得 Boss 宽容，不然我这一生就……父亲将我领回了家，想要撕掉我所有的杂志，母亲在一旁悲戚，我扑在床上，抱着电软哭干了所有的泪水，我痛苦、我悔恨，我怀疑……这是怎么了？我不相信我会做出这样的事，没有人会相信……但事实就摆在眼前。我每每回想起这段往事，总要呆上个把钟头，我想它已成为我这一生永远无法挥去的阴影。没有什么不可预料，没有什么可悔恨，不可预料的只是自己那颗年轻躁动而需要冷静下来的心；可恐惧的也只是对未来的动荡而惶恐不安的自己。

　　我冷漠了，我沉寂了，我的文笔不再浪漫，我好像一扇锈迹斑驳的门，我的心死了，离黑色七月，只有三个月，短短的时间走过别人三年的历程？……我笑了，死人的笑。是惩罚，是审判。社会是公平的，不是社会抛弃了我，是我抛弃了社会。高考末了，结果不难预料，北科大已是遥不可及的梦。我不愿再回到高中重读，在父亲的支持下来到郑轻工学习电子商务，说起来和电玩还勉强沾点边吧……

　　“只要努力就有结果”，临行时父亲仍是那样淡淡的笑着，“你不是常对我说游戏如同现实吗？主人公已经出场了，剩下的就看你自己了。”我想笑，却不争气的呜咽起来。

　　“你喜欢它，路上就带着它吧。”父亲递给我一本厚厚的杂志，是我买来而未来得及看的《电软五周年纪念》啊，随手一翻，里面的好多文字已被父亲圈圈点点了……列车驶离孤寂的站台，泪水已沾湿书页，父亲远远而模糊不清的身影中不知是否有一双同样的泪眼……

　　“把耳朵贴在我的背上，你就会了解遥远的过去，单纯的日子里相逢的地方，记忆已经回复到从前。”抚摸着这本不能称之为杂志的杂志，心里涌出一种莫名的温暖。目光停滞在父亲标记的文字上：“向日葵……代指阳光曾经普照，花般璀璨飞舞的梦般岁月；百合……代指雪白无暇纯洁，无拘无束的诗般的飘飘岁月。谨以他们来纪念留在记忆深处的那些如奔放热烈阳光，若款款浪漫柔情的青年时代。”朦胧中，打开记忆的盒子时，有些什么破碎飞散了，悲怆的过去，还有曾经深爱的歌，现在都已遥不可及。人生种种，总会随着岁月的流逝留下真实，游戏无罪，社会无罪，朋友无罪，犯错误的只是自己而已。不羁的心和不经世事的我构成了这一切的一切。如果 sin 是罪，那么恕我以 cut 命名自己，消去那不堪回首的往事吧。

　　电软改变着我，以后的那段时间里我表现出前所未有的求知欲与自制力，自信重又回来，一年下来成绩喜人，其间还是有玩游戏，不过只是在闲暇时用 emu 找回感觉而已。翻阅游戏历史长河，这是一个充满了机遇，充满了幻想与乐趣的世界，所有的业界人士与 Game Fans 都是那么富有创造力和另类情趣，其实 game 如同现实，既然有能力玩好虚拟的人生，那为什么不能在人类社会这个气势滂沱的大舞台把握好自己的一叶扁舟呢？作为一本游戏志，她给我的一切已无法计算，杂志内容轻松明快，小编门睿智多思，文学性如此之强的非文学性刊物也属罕见，这是否预示着 Game 真的会成为21世纪一道靓丽的艺术风景线呢？

　　“总有一天，被黑暗淹没的小舟，在你的指引下将驶向光明。”暑期已至，我将带着崭新的自我，回到曾经的伤心地，等待我的，是站台上的父亲和暂别已久的，没有 emu 羁绊的 Game 。相逢是喜悦，分别是泪水，喜悦的背后掩藏着种种的凄苦与酸楚；泪水冲走的，总是伤心、痛苦与悔恨。

　　让相逢的喜悦代替分别的泪水。你留下的音符般的足迹，在早晨的雾霭中延绵，在阴冷的城市里哪一个人的梦中，点亮了温暖的灯火。

本文已发表在《电子游戏软件》2002年12月号。

Cutsin受难记

IE中opacity与png图像alpha通道冲突2例及解决办法

xhtml mp浅析

X-UA-Compatible迷局

业内？业内……

读报：奥巴马访华 解决新摩擦应对“大”问题

涤荡你的心灵――Amazing Grace

使用高效的html标签

尽量避免使用float(浮动)和position:absolute/fixed

关于RO纯水、小分子团水、长期饮用水的一些资料搜集

家里新装纯水机

【工作方式分享】多次复制/粘贴

【工作方式分享】快速切换hosts，不用重启浏览器

nth-child和nth-of-type以及last-*的区别

IE interpolation(图片插值模式)管窥

循序渐进、温故知新，热情人生却有悲怆结局

好久不找歌了，推荐歌曲3首

稳定访问被墙的blogger、youtube甚至google的方法

浅析ie6 css expression效率、覆盖原理、优先问题

八卦：google也许要在3月30日推出新产品？

CSS实现限制行内字符的最大长度且超长能加省略号

word-wrap跳票到firefox3.5了……

IE6/7 hasLayout导致cursor有时变为text或失效的bug

对img行间对齐以及vertical-align:middle的探讨

4400插曲:a place in time, worry about you

Eminem - Stan Feat. Dido & Thank You

对一些webmail的抱怨

小技巧：css截字，如何避免出现半个字

Gmail新增更换主题功能

haslayout,display,position:relative脚本显示隐藏问题

[自翻] css2.1的9.5.1节 - 浮动的位置控制：浮动的属性

css中通配符*的效率问题,html及其样式的模块化

当开心PK开心，所有人都要当心？

Dreamweaver CS4 Subversion的安装方法

css sprites，鸡肋还是良药？

迟来的功课：轩慧光纤宽带使用小结

求最大公约数和数列比例,网页栅格

模仿opera的checkbox

关于昨天色彩管理的补充（个人理解）

关于photoshop的色彩管理及偏色

再谈hasLayout及效率测试

Vista和server 2008时代，你选哪种宋体？

IE6：hover bug、图片中英文混排对不齐问题

也说CRLF/LFLF：从CVS、SVN中checkout的页面模板中莫名出现的双换行

工作有感

音名(Fixed Do)和唱名(Moveable Do)

IE6 img边缘的空白以及浮动和inline box

msn偶遇摩洛哥帅哥

忏悔：没有坚持练琴

blogger更新出疏漏：创建文章时“标题”变“职务”

忙乱必出错

PHP vs UTF-8(BOM)

今天很happy，和RIA PK、和外包RIA PK

今日无大事：预谋搭积木

凑热闹：MSN首页一个模块的构成及样式的写法问题

工作心得：关于css的clear和inline box

Pidgin, mac msn显示msn群发言人昵称的办法以及音乐播放签名

错误地认为png透明是ie6不支持的，其实透明实现分为索引色和alpha通道

IE对于float元素的宽度解释问题

今天遇到IE6的重影bug

职业生涯：页面构建还有将来吗？

关于cutsin这个名字

补：2007-02-09在科贸1780入手飞利浦190CW7，送键鼠套装，买机经验分享

补：2007-02-09在科贸1780入手飞利浦190CW7，送键鼠套装，买机经验分享

IE hasLayout、firefox空标签、form嵌套的老生常谈

Pidgin2.4.2不能正常显示中文及QQ群、MSN群发言人问题的解决

IE中链接下划线粘连和字体大小不一问题

关于森海塞尔PX200的流水记

极力推荐一个天才导演：今敏

重识科幻大师菲利普·K·迪克

光田康典《Chrono Cross Guitar Arrangement》

练琴记录1

重又开始读科幻文学，耽搁4年了，暂从中国开始

好玩的图文流动居中效果，全兼容不用hack，IE6以下需要手动调整居中

[自翻] css2.1的8.3.1节Collapsing marginsCollapsing margins（margin折叠, 边距折叠）为margin的不同表现解惑

计划在2007年底去华山观雪景，我爱这个世界！

纯CSS跟随文本流动的pop提示框示例，不用hack，惟在opera下仍然无法正常显示

切忌浮躁急功近利，按部就班、循序渐进总是最有效的学习方法。

IE/非IE对float浮动与非浮动块对象自动宽度之间关系不同解析方式的实例研究

深入理解css中的position定位和z-index属性

读报：奥巴马访华解决新摩擦应对“大”问题