Open,记录,分享  for 积极自由的生活方式

Archive for 12月, 2007

2007年最后一天,起的很晚,计划要出去走走,但不知道去哪。大一大二的时候,到新年都是跟宿舍兄弟们去紫金山看日出,现在只有我一个人了。最后想到还没去过圆明园,就去那拍今年的最后一个日落吧。

出门吃了个饭,发现风还是跟前天一样大,也很冷。回家趁查地图又做了半天的思想斗争,最后想起毛虫老师的签名“有些事,现在不去做,以后也不会去做了……”,于是做出了决定,背上相机就顶着寒风出发了。

IMG_7284ed_SI
门口的清史书店 Read more »

岁末,什么事都混杂交集在了一起。

[前天]Team的歌神终于揭晓,但同时也引出了摇滚青年,深沉老男人,R&B之王,男高音和真歌神等诸多明星,而我依旧是只能唱唱最简单的歌还跑调的,不过大家都玩的很HI,我们Team出人才!

[昨天]赶在2008之前,我们学车的第一波学员终于都拿到驾照,于是一起去吃云南菜庆祝。为了今后不酒后驾车,这次先把开车前的酒喝掉,当然不是一次,因为我们为这个驾照考了四次试,所以我们一直决定bui四次,呵呵。

[今天]部门年度最后一次building,居然是要送别郭巨侠——这位设计界顶尖的巨匠!很可惜,还没能有机会接受过巨侠的教导,以后只有继续关注疯狂的设计了。不过还是有幸成为这次building的摄影师,记录下了这些难得的瞬间,我们同样会记住巨侠的音容笑貌!

[今天]12月29日,这个寒风呼啸的日子,最令我们baiduer悲伤的一件事发生了——Shawn走了!无疑,每个收到Robin信的人都不敢相信是这真的,来的如此突然!震惊,悲痛,更是公司的重大损失!随后,很多人都想起和shawn在一起历历在目的往事,追忆和他在一起的日子,以及这个身居高位的男人的真性情。可惜天妒英才,shawn早早的离开,只留给我们无尽的缅怀……

生命的可贵,再次要让我们珍惜。前辈的离去,我们更当自强!

  又是一年圣诞节,我们再一次无可适从。

  去年有十博士联名抵制,今年不仅成都市教育局下发紧急通知(后来搜新闻看原来成都、武汉教育局去年就有类似通知),就连东莞一公司也禁止员工过圣诞节。不变的是商家们还是都顾着营造浓厚的节日气氛,用圣诞节的噱头来促进顾客消费。

  于是互联网上也出现了各种针对圣诞节该不该过的评论,有如十博士一般极力抵制的,也有很多网友倡导包容开放的:

  1. 过圣诞节的人来说说,圣诞是谁诞生的日子?耶稣的父亲是谁?母亲是谁?如果你回答不出以上问题,那么请你别再过圣诞节,因为你过圣诞节就是对神的侮辱!!(同感,我的意思是可以百度知道“圣诞节”一下
  2. 圣诞节是人家外国人的节日,我们在这里瞎惨和什么呀,在说了,圣诞节我觉得只是商家用来吵作的一个噱头罢了。大众没有必要被这些东西误导。(的确有商家的炒作,也有人在被误导)
  3. 圣诞节本来就不是中国的节日 大多数人也不知道它真正的含义 只知道盲目的聚会 有什么好过的啊(盲目聚会也是要找个借口的,不过还是应该了解这个节日,呵呵)
  4. 老外的消费性节日,中国人倒很挺的,我纳闷? 我从来不过老外的节日!!!国人的悲哀!!从来没有美国人挺我们的春节,我们为什么挺他们的节日?(的确不知道有没有老外过春节,国外的朋友可以调查下)
  5. 我想说的是,各个国家有他们自己的文化。我们也有自己的传统节日,不能一味的想要西化。外国的节日自有老外过,中国的节日可有多少国人过?(恩,不能一味西化)
  6. 圣诞节已从一个宗教节日演变成为一个全人类共同的节日,联合国也要放假休息。面对一个全人类共同认可的文化,在以对外开放为基本国策的国家还要全面封锁、抵制,太可笑了。(开放包容也是必要的)
  7. 今天我过平安夜了,很好!什么要抵制呢?国的老百姓本来就很苦了,点乐子不容易!(国人的确是被新三座大山压迫的太苦了)
  8. 找个理由开心轻松一下吧,管它是哪国的节日。(只要不妨碍别人,开心就好)

  国人一味的追求西方文化,自己的节日过不好,无法寻求发泄,盲目跟风和商家的炒作造就了这一现状。而究其原因,还是由于我们国人自身的文化危机。以我浅薄的知识,评论我不敢多说,这里就推荐网易博客杨恒均的一篇文章(当然我不认识他),我个人觉得比较靠谱的:《从麦当劳到圣诞节,我们该如何抵制美国文化的入侵?》。所以我看国人还是要从学习自己的文化开始,兼容并蓄,与时俱进,才不会被时代所遗弃(给ccp教育这么多年,说话都官味了)。

  我本来对这个节日是不感兴趣的,甚至初中时候曾有一年圣诞节有个女生(而且还是我曾经心仪的)邀我一起过节,可惜当时我完全不开窍,而且对洋节日以及年轻人过洋节比较反感,于是婉据了那次邀请-_-b。之后才痛心疾首,追悔莫及~!但今年再次面临圣诞节而思考时,终于体会这个节日对于我个人的意义:祝福短信的群收与群发,能让濒临失去联系的朋友间互相能了解些近况,不至于最终失散。祝福也许不为节日,但借这个节日的口,能跟一些很久不联系的人互相聊上几句。

  所以我还是最初的观点,不盲从,也不抵制。但是,加上了一点:我的朋友们,你们现在好吗?

  最近在写css的时候,由于经常使用到很长的多级选择器,而碰到一些样式被覆盖或者覆盖不了的情况是相当的郁闷,所以专门花了一些时间对一些选择器做了对比测试。这里先说明一下,由于ie6不支持css2.0选择器,所以这些测试忽略了一些2.0的选择器和连接符,如伪类(:hover),属性([type=”text”]),子选择符(>)等,仅针对#id,.class,tag和空格连接符测试。

  定义:

  1. CSS句子:一个完整的选择器构成一个CSS句子,如.abb #cd div.class。而用逗号连接的算作多个句子的省略定义方法。
  2. CSS单词:CSS句子中任何一个#id或.class或tag都算作一个CSS单词,虽然照以前的理解一般把tag#id.class1.class2整个看作一个单词,但是在本文讨论范围内,这个只能算作一个由4个单词组成的词组。
  3. 优先级:对于选择到同一个元素的两个CSS句子,当他们定义该元素的同一个属性时,如果其中一个写在前而不会被写在后面的覆盖这个属性,那么就称这个CSS句子的优先级高于另一个。而当2个CSS句子互相调换在代码中的位置都是后面的覆盖前面的属性时,称这两个CSS句子有相同的优先级。

  测试用dom:

<html id="html" class="html">
<body id="body" class="body">
<div id="div">
    
<div id="test1" class="test test1">1第一行<br>第二行<br>自身</div>
    
<div id="test2" class="test test2">2第一行<br>第二行<br>自身</div>
    
<div id="test3" class="test test3">3第一行<br>第二行<br>自身</div>
    
<div id="test4" class="test test4">4第一行<br>第二行<br>自身</div>
    
<div id="test5" class="test test5">5第一行<br>第二行<br>自身</div>
    
<div id="test6" class="test test6">6第一行<br>第二行<br>自身</div>
    
<div id="test7" class="test test7">7第一行<br>第二行<br>自身</div>
    
<div id="test8" class="test test8">8第一行<br>第二行<br>自身</div>
</div>
</body>
</html>

  这里先给出8组选择器,每组两个,各位同学可以先想一想每组里面哪个选择器的优先级高:

/*第1组*/
#test1{height:2em;}
.test1{height:1em;}
 
/
*第2组*/
.body #test2{height:1em;}
#test2{height:2em;}
 
/
*第3组*/
div .test3{height:2em;}
#test3{height:1em;}
 
/
*第4组*/
.body #test4{height:2em;}
body #test4{height:1em;}
 
/
*第5组*/
html #test5{height:2em;}
body #test5{height:1em;}
 
/
*第6组*/
#body #test6{height:1em;}
.html #test6{height:2em;}
 
/
*第7组*/
html #body #test7{height:1em;}
.html .body #test7{height:2em;}
 
/
*第8组*/
#html.html .body #test8{height:1em;}
.html #body.body #test8{height:2em;}

  现在公布答案:

  1. 仅一个选择器单词的时候#id高于.class应该不用说了;
  2. div#test2比#test2多了一个单词,那么多一个单词的优先级高,这里可以暂时理解成多一个单词就选择的更精确;
  3. 同样多一个单词,但其中一个有#id选择,则#test3要高于div .test3;
  4. .body #test4高于body #test4,暂时可理解为同样多层级时,.class高于tag;
  5. html #test5与body #test5有同样的优先级,先写的会被覆盖,这里猜测同样的层级数,优先级与层级跨越的深度无关;
  6. #body #test6高于.html #test6,理解为#id优于.class也与层级深度无关;
  7. 最后两个比较有难度了,但浏览器下的结果是html #body #test7高于.html .body #test7,怎样理解我先不说;
  8. #html.html .body #test8与.html #body.body #test8同级。

  其实越到后面,应该越是能看出一种模糊的规则来。经过我反复的分析,最终从模糊的感觉中发现了其中的奥秘,或者说是一种说得通的解释:

  把css句子的单词组成定义为“数位”,像个十百位的数字一样,css中不同的单词代表不同的权重数位,分别是#id,.class,tag三个数位依次从高到低排列,组成了相当于十进制数字的百位,十位,个位。再把每个css句子中个各种单词的个数代入到刚刚划分的数位里,就可以得到一个类似于十进制数字的三位数,只是在css的优先级数位里,没有进位的概念,无数个低位单词也还是低于一个高位的单词。从而结论就是,按#id,.class,tag的数位统计了css的单词个数并代入各个数位后,只要比较两个css数字的大小(从高位到低位依次比较),就能得出两个css的优先级

  用这个规则重新比较一遍前面的例子:

  1. 1,0,0>0,1,0
  2. 1,1,0>1,0,0
  3. 0,1,1<1,0,0
  4. 1,1,0>1,0,1
  5. 1,0,1=1,0,1
  6. 2,0,0>1,1,0
  7. 2,0,1>1,2,0
  8. 2,2,0=2,2,0

  用这个方法很容易就能比较出最后两组例子的优先级,对于前述的一些情况也可以做出合理的解释,所以在没有更好的css选择器解释方法之前,这个数位计算法是非常方便且容易理解的。

[测试页面地址]

  两年多前来过北京的雕塑公园,一年前看到Majoy网站的介绍,而这个周末终于亲身体验了一次真人CS的乐趣!

分组已经确定好了,到集节点后就去大厅领取装备。每人一套迷彩服,“防弹”背心,镭射枪,和一个头盔。黄橙绿蓝,四个队每队队员都在头盔上贴上了色彩区分标识。大家都穿上一身行头,还真是像模像样。可惜都顾着玩,没空拍上几张。

这是在更衣室刚换上作战服自拍的一张:
Me as a soldier at Majoy Beijing

装备完毕,教官给我们讲解了身上各个装备的使用方法。 Read more »

[路考]

  学车路慢慢,时间近两个月,好在就要冲破最后的黑暗了。今天的路考结束,也就终于解脱了。

  不过老天似乎想让我们玩点刺激的,居然在一早就下了雪。去驾校之前我们都还有些紧张,真怕到时候上路来点什么情况。不过听yiyang同学夸张的跟告诉我们,雪天考试基本都是让你走一小段就靠边停车了,考官也担心出事故,5档都不用加。于是又放轻松些,大巴上一路看书就过去了。

  到考试场地,驾校还让我们搞了点形式主义——鼓掌欢迎考官-_-!但看考官可能都考烦了,不是很领情的样子,简单跟我们讲了几点就开始上车考试了。我们一组7个人,我排在中间。按顺序考,后面的都坐在尾随考试车的驾校班车里。当我还暗暗数着有哪些要点要注意的时候,看到第一个考试的同学都考完了!真是应了yiyang同学的话,快的难以置信!于是放下心来,等待就变成了饶有兴趣的看别人考试的过程。

  轮到我了,轻松上阵,按照事先已经完全熟练的流程——查看环境,问好,检查仪表,请求起步等来了一遍,得到考官指令上路。打灯,观察,离合,挂档,给油,起步,并线一气呵成,这么多天的车可没白练。不过毕竟是考试,还是开的很稳,速度基本都保持在30左右。然后一条直路往前开,连个转弯都没碰到,考官就叫停车了!虽然看到别人都考的很快,但还是没想到自己也这么快,才开1分钟不到,什么感觉都还没有,就算过了。看来真是很轻松,呵呵。

  最终我们一组的5个baiduer都过了,但另外2个人运气就不太好了,由于各种各样的原因没能考过。只能感叹:过的人都一样,不过的人各有各的不幸!

  到此,为期7周的车终于学完了,这么长没有周末的日子也终于熬出头了,同时也将要成为一个有照的马路杀手了,呵呵。当然,今后一定小心驾驶,安全第一。

[北京的雪]

雪的印迹

  路考之前在驾校旁边拍下这张照片,只为了记录来北京的第一场雪。看来终于要开始切身的体验北方的冬季了。早上醒来窗外就不是蓝色的天空了,光线昏暗,气氛阴沉。当时赶着时间去公司,没来得及拿出相机拍上几张,遗憾+自责,完全对不起我的相机,所以后来就算随便按也要拍上几张。

  路上到处都是积雪,才真正觉得被北方的冬季侵袭了,因为南方的雪是不容易积起来的。这次雪不大,但在衣服上都能一小片一小片的积起来。仔细看落到衣服上的小雪花,感叹自然如此神奇,六个瓣也太规则了,每一粒都非常相似。不过这种晶体的美丽,一触即融。

  雪,严寒的冬季……

  不过冬天到了,春节还会远吗?期待回家,呵呵。

  由于驾校路考还需要一张证件照,不得不再去洗我自己DIY的数码照。

  出于担心理想地下那家周末不营业,于是又向同事们询问中关村附近能冲印照片的地方,得到的回答是大食代下面有一家柯达,但具体方位不清楚。没有更多的可用信息后,认为两个地方总可以洗上吧,也没想起来上网再查一下,就拷了照片出门。

[失败场景一]:

  先去了理想地下,猜测果然没错,周末连餐厅都不营业,洗照片的客流量就基本没有了,为了降低了运营成本,所以该店选择了放弃部分客户,关门歇业。因为关门的情况在预料之中,所以心情并不是太失望。

[失败场景二]:

  大食代是全周营业的,所以里面的店应该不会关门吧,虽然不知道冲印店的具体方位在哪,但先进去再说。不过说起大食代下面的购物地宫,心里是有障碍的。虽然逛过几次,但我一个人在里面还真是找不到北。进去直奔前台,询问洗照片的店怎么走,得到的答案——下了电梯一直走,穿过家乐福——仍然很模糊!走了再说吧。一路上穿越各种货架,闪避各个方向的人流,就像在玩FC的冒险游戏一样,最终,没有找到目标,并像超级玛丽一样从一个不知道外面是哪的出口出去了-_-!伴随了这一路的心情已经变成了沮丧,焦躁,愤怒。

[失败场景三] :

  从地面上慢慢往回走,对在周边再找找看还抱有一丝希望,但最终心情从疑惑变成了失望。突然像被一块砖头砸到一样,想起来这样的信息网络应该可以查的到,自己居然没有想到百度一下,汗!于是确定方向,回公司,上网查清楚再出来!

  在百度里输入相关“中关村 照片 冲印”等相关的关键词查询多次,无果;转投知道,答案仍是文不对题;再想想好像平常看到淘宝上不少关于图片冲印的服务,就上去找,结果是有很多,但是直接的都找不到和地点“中关村”相关的内容!这么常用的搜索怎么都找不到答案呢?难道现在的百度和淘宝还不够“智能”?无奈又去百度搜索一些相关的关键词,结果出来的要么是说介绍手机拍照的,要么是介绍打印机彩印的,还有什么相框的,甚至还搜出驾校的来……

[成功场景] :

  最后都不记得换了什么关键词,也不知道翻了多少页,终于找到一个北京的柯达冲洗店列表,再在网页上Ctrl+F“中关村”,终于找到了!但是居然没有详细地址!还好还有联系电话,打过去问了地址,出门,直奔目的地而去!算下来,从我前面出门到找到最佳答案的整个过程花费了我将近1个小时的时间。

  过了最堵的中关村大街街口,沿着电话里说的路线,终于在路边找到这家店。外面好像还在装修,布满了脚手架,但是已经找到了地方,外面怎么样就不重要了。

  进门,询问了价格,5寸要1块一张,我就洗一张,排版啥的都调好了,根据上次在理想洗这一张还被白眼的经验,还真怕他不做这1块钱的生意。不过这家的确不错,服务态度很好,而且速度还很快,我被告知只要10多分钟就可以洗好,于是我选择坐下稍等一会。借此机会,跟店员聊了聊他们制作相册的业务,虽然他们的业务范围不合我意,但也给我了一些相关有用的信息。另外我又把他们桌上好多本样片都翻了一遍,相当于上网看了不少好片,积极的打发了我等待的时间。最后我看完他们的样片,我要的照片已经冲印好放在前台等着我了,又让店员帮我裁切了一下(理想地下的因为我只花了5毛钱不给我裁-_-),因为我只花了一块钱就享受了照片冲印,业务咨询,样片欣赏的服务,最重要的是服务态度还很好,所以最终我满意的走出冲印店!

PS:这家店叫“倩影XXX柯达中关村店”,地址就在中关村北大街太平洋对面,价格稍贵点,但个人感觉服务不错(绝对不是做广告,哈)。

  昨天下午(2007年12月5日)16时左右,北京中关村一工地附近发生火灾。据本人猜测,大概位置是微软亚太区研发总部工地,着火的建筑物是简易搭建的民工宿舍楼。事发十多分钟后,消防队,警察,120急救陆续赶到现场,开始控制局势,最终于16:30左右扑灭了大火,人员伤亡情况不详。

中关村火灾
16:04,滚滚浓烟

中关村火灾
局部放大

中关村火灾
16:07,火势渐大

中关村火灾
16:20,多辆消防车赶来扑救

中关村火灾
16:32,火势基本得到控制

相关链接:

[新闻]工地宿舍失火 消防人员迅速扑救

[视频]中关村核心区失火典藏版-”火灾” “中关村” “自拍” “大火” -视频…

(PS:最近比较忙,都没空整理照片,所以才发此“晚报”。还有,火灾发生的时候,从周围的楼宇里都看到了一些闪光灯,加上网上的很多视频片段,可见草根媒体的力量是巨大的)

在5分钟里你能想起多少个HTML元素?

来这个链接试试吧;)

51

另外,今天场地路考轻松通过,离驾照就剩实际路一步之遥了,呵呵!

  网易博客一直被我当作一个值得学习的产品,除了过度使用ajax造成几乎无法被搜索引擎收录外,其中不管是架构思想还是技术上都还是有一些令人叹为精妙的地方的。

  前几天发现了他登录框的弹出浮动层一个新的变化,在IE下拖动浏览器滚动条的时候,浮动层的居中效果已经不再会随滚动条微弱的抖动了。可以对比一下,显然新浪的博客却还没有找到解决方案,右下角的浮动小广告在滚动页面时仍然会抖动。由于IE并不支持css里position:fixed;的方法,所以我就开始一边拖他的登录框,一边思考他是如何实现浏览器滚动无抖动的。当我把登录框使劲往右侧一拖时,更另我惊奇的事情发生了,整个框居然盖住了浏览器右边的滚动条,感觉像是被拖到浏览器外面去了一样!

  苦于在IE下看不到他ajax出来的源代码,于是换到FF,并打开强大的firebug,小样儿,还不快给爷现出原形!鼠标定位到登录框上,看到他的css里只有个position:absolute;是值得关注的,并没有使用FF下可以固定定位的fixed。继续找到登录框的父级容器,上面的css除了继承的*{margin:0;padding:0;}和body里的字体外,什么都没有了,而且在浏览器上下滚动的时候也不像用JS做的定位,于是更感到奇怪。再看与其同级的有一个id是blog-163-com-body的div,firebug指示其占有的区域是整个屏幕,而且css里第一行赫然的写着height:100%;!再点body看css,同样写了height:100%;。难道就是传说中的100%高度“大法”?果然html标签也是!但还是没想通什么页面里面的元素可以挡住滚动条,还特意测试了下html标签下appendChild,失败,于是又仔细看一遍css,终于发现了里面惊人的秘密:

html大致结构:

<html>
    
<body>
        
<div id="blog-163-com-body" class="bggb">真正内容的区域</div>
        
<div id="_$$_outer_layer">放置各种浮动层的区域</div>
    
</body>
</html>

css主要实现:

html{height:100%; overflow:hidden; border:0;}
body{height:100%; overflow:hidden;}
#blog-163-com-body.bggb{width:100%; height:100%; position:relative; overflow-y:scroll; overflow-x:auto;}

  答案的关键就在于对容器的理解,和对溢出高度滚动条的控制,通过一个普通的div模拟了整个浏览器的滚动条,以使得可以让他同级的元素盖在他上面。分析之后,完成了一个DEMO,并真正发现了这样做的好处:

  1. 实现了无JS相对窗口固定的浮动层
    (主要针对IE不能使用position:fixed)
  2. 让页面里的元素可以盖住浏览器的滚动条
    (这样最大的好处就是在使用弹出层并添加半透明不可点的背景时不再需要根据页面的长度计算高度了,完全css控制,而且滚动条被遮挡后也直接限制了鼠标滚轮的操作)
  3. 拥有了基本的“页面管理器”的思想
    (我个人提出的一种管理页面里各种消息框,弹出层以及类似flash的深度管理的初步思想)

  最后不得不感叹网易做前端这块的人真够变态!这么无敌的招数都能想出来,真是佩服,看来taobaoUED招聘的css题目也应该加上这一道:“如何实现无JS相对窗口固定的浮动层”,或者“如何让页面里的元素盖住浏览器的滚动条”,才算的上足够变态。