xhtml/css

The best stuff in the world

No Comments 17 September 2006

今天发现了一个很好玩的web2.0网站,和那些新闻社区(digg.com)、图片社区(Flickr)不同,它的内容是选取那些世界上最好的公司、品牌、话题、东西等(只要是你觉得最好的),而且采用了图片tag的形式,得票越多的图片越大,给人到了纽约时代广场的感觉。

当然我最感兴趣的是它的tag展现形式,究竟是人工控制还是程序控制,如果是人工控制,那么在实时性上则相对落后(每次进入tag的展现都有不同);但如果是程序控制,那么在布局上就会面临较大的难度,目前我正在研究,如果哪位朋友知道它的tag运行机制,不妨告诉我。:)

 

Design

一汽豐田4S店設計初稿

No Comments 15 September 2006

負責此項目的人前天晚上出了車禍,項目不得不暫停,項目雖然金額不低,但是在生命面前,一切都變得渺小,祝福你早日康復:)

 

Life

杂记

No Comments 14 September 2006

昨天凌晨2点的时候,我开着我的台灯,坐在电脑桌前飞快地敲打键盘、不停地移动鼠标,接近三点的时候,一汽丰田网站的设计初稿终于完成。可是上午不幸的消息传来,一汽丰田负责网站项目的人昨夜发生了严重车祸,项目不得不暂停….

今天下午6点的时候,经过一天半上班时间的不停编码,搜狗输入法的皮肤CMS已经初具雏形,我的眼睛也已经经不起显示屏长期的刺激开始变得模糊….我在一秒钟之内做了一个决定,带上门卡,握着mini player走出了搜狐的大楼,钻进了科技大厦的钢筋水泥中间……

我躺在四栋可以被记入建筑史史册的庞然大物中间,看着天空慢慢变得阴暗、模糊…这里是清华科技园的核心,我静静地躺在中央的木板上,听着音乐,周围被鲜花环绕,华灯初上,天空变得璀璨…这里也是中关村的核心,Google、搜狐、网易、sun等无数辉煌的IT公司都在这里,这里的天空就是中国互联网的风云;
此刻我觉得自己很渺小,大公司里面的小程序员比比皆是;但此刻我又觉得自己很幸福,感觉像被整个互联网所拥抱;慢慢地,我睡着了…

 

xhtml/css

CSS中expression的用法

No Comments 12 September 2006

IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
给元素固有属性赋值
例如,你可以依照浏览器的大小来安置一个元素的位置。

  1. #myDiv {
  2. position: absolute;
  3. width: 100px;
  4. height: 100px;
  5. left: expression(document.body.offsetWidth - 110 + "px";);
  6. top: expression(document.body.offsetHeight - 110 + "px");
  7. background: red;
  8. }

给元素自定义属性赋值
例如,消除页面上的链接虚线框。 通常的做法是:

  1. <a href="#" onfocus="this.blur()">link1</a>
  2. <a href="#" onfocus="this.blur()">link2</a>
  3. <a href="#" onfocus="this.blur()">link3</a>

粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?
采用expression的做法如下:

  1. a {star : expression(onfocus=this.blur)}
  2. <a href="#" onfocus="this.blur()">link1</a>
  3. <a href="#" onfocus="this.blur()">link2</a>
  4. <a href="#" onfocus="this.blur()">link3</a>

说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为

  1. /*错误的写法*/
  2. input{
  3. star : expression(
  4. onmouseover=this.style.backgroundColor="#FF0000";
  5. onmouseout=this.style.backgroundColor="#FFFFFF";)
  6. }

可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:

  1. /*正确的写法*/
  2. input {star : expression(onmouseover=function()
  3. {this.style.backgroundColor="#FF0000"},
  4. onmouseout=function(){this.style.backgroundColor="#FFFFFF";})
  5. }

注意:
如果不是非常需要,一般不建议使用expression语法,因为expression对浏览器资源要求比较高,一旦页面相关元素太多,将会占用大量的内存,导致浏览器假死。

 

Life

新家照片

No Comments 10 September 2006

新租的房子,房东刚装修的,不过我们没要房东的家具,自己买的家具和电视机,还买了一些墙上的画片和木托,经过两天的修葺,感觉还是非常温馨的。:)欢迎大家来做客。

 

Page 3 of 41234

© 2006 Satellite Of Love. Powered by Wordpress.

Photo Edition, originally Daily Edition.