Music & Movie

音乐和动画的完美结合

No Comments 30 September 2006

今天是国庆前的最后一天,下午4点下班,但是心早就飞向了东方新天地……..
寂寞难耐,在网上却找到一段非常棒的视频,或许可以说是完美,看看听听吧。

Flash动画

 

xhtml/css

一个非常棒的纯css菜单生成器

2 Comments 28 September 2006

官网:http://www.opencube.com/

今天在蓝色论坛上发了上一篇文章,结果斑竹兄弟鄙视我说“现在纯css菜单已经很多了…”,我当然知道已经很多了……………感叹我写文章写到被人误解……..

不过我还是要给大家推荐这个非常非常非常棒的纯css菜单生成器!
它是我迄今为止见过的最稀饭的软件(请恕小弟孤陋寡闻,我向来都是这样的….)!!
官网提供下载的压缩包里有几个非常不错的模版以及安装文件,安装软件之后立即运行,会出现一个loading软件界面的提示(java做的???),然后你就会看到一个激动人心的软件呈现在你的面前,比DW好太多了……
你可以在这里自定义菜单,然后保存到一个html文件里,菜单不仅漂亮,更重要的是纯css的“绿色代码”哦。

 

xhtml/css

用a和span原理制作CSS二级菜单失败的反思

No Comments 28 September 2006

前天写了一篇用css制作title和alt效果的文章,今天又看了看这篇文章,转念一想,既然可以做title等提示效果,那么是否可以用这个原理来制作一个二级菜单呢?如果可以的话,那么肯定要比用li来制作菜单更加简便和节省带宽,心动不如行动,可我改了好几次代码都没有成功。

HTML代码

  1. <style>
  2. .info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}
  3. .info:hover {background:#eee;color:#333;}
  4. .info span {display: none }
  5. .info:hover span {display:block;position:absolute;top:25px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
  6. </style>
  7. <a href="http://www.achome.cn">http://www.achome.cn</a>
  8. <a href="#">55555555555555</a>

大家可以看到当鼠标悬停的时候会出现子菜单,但是当想把鼠标移向子菜单的时候,子菜单会突然消失。
后来我对比了一下用js和li写的二级菜单,渐渐明白了其中失败的原因。a的hover属性只能覆盖到当前a的范围,当父a的范围内又出现一个子a时,父a的hover属性将不能覆盖子a的范围,因此当我们把鼠标移向子a时,整个父a就失去了焦点,也可以理解为父a的hover属性已经不管用了,所以子菜单会消失。
后来我又用onmouseover和onmouseout尝试了一遍,发现仍然失败,更加坚定了我关于父a和子a的认识,我在网上搜索了一遍,并没有发现关于此结论的资料,也或许是我孤陋寡闻,没有系统学习过css所有的标签属性和方法,如果真的是这样,见笑了:)

 

xhtml/css

css的tooltips提示效果

2 Comments 26 September 2006

这段时间写了很多页面代码,除了一些知识重复以外,也学到css的一些新东西,或许是旧东西,但是还是希望能对大家有用。
其实在css里面有很多对a的样式应用,因为a标签是仅有的默认可以触发动作的标签,因此在很多时候可以用css来控制a达到js才能达到的效果,比如今天要介绍的css仿title和alt的提示效果:
先来分析一下这种效果的特点,无非就是在鼠标悬停的时候出现一个包含介绍文字的提示层,如果用传统的javascript来实现,就要设置对象的onmouseover和onmouseout属性,而如果把对象看作是a属性中的link和hover的话,这个问题就更清晰了,因为只要把对象的link属性设置为隐藏提示层、hover属性设置为呈现提示层即可,那么这个提示层的位置究竟在哪里呢?当然是在a标签中间了,目前常用的办法是把提示内容放在span标签中间进而包含在a标签内部,然后设置a:link和a:hover下不同的span样式即可。

下面结合代码给大家说一下这个简单的原理:

  1. <style>
  2. a {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
  3. a:hover {background:#eee;color:#333;}
  4. a span {display: none }/*设置正常下的span为隐藏状态*/
  5. a:hover span{display:block;position:absolute;top:30px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;} /*设置hover下的span属性为呈现状态,并设置提示层的位置*/
  6. </style>
  7. <a href="http://www.achome.cn" class="info">http://www.achome.cn<span>Welcome to www.achome.cn</span></a>

 

Life

搓麻将的日子和2s studio

No Comments 25 September 2006

周六上午去了搜狐运动会,回来之后一直从事麻将事业……….
周六下午从1点到5点半,手气差到掉渣,只胡了两把,我老婆更惨,只胡了一把………..一毛钱一分的麻将,整个下午我输了三块多(刚开始打的时候我还叫嚣打5块钱一分,幸好他们没有同意…)

周日下午打起精神关上门和窗、拉上窗帘、打开台灯,把客户两周前预定的首页设计完稿。
还有一件事情,就是加入了2S-studio,过段时间应该会有自己的名片,既然加入了就好好干吧,章杰说得好:“我们要赚足够的钱,然后提前退休…”,耳熟吧?貌似是一个毒品贩子在电影里的对白。

 

Page 1 of 41234

© 2006 Satellite Of Love. Powered by Wordpress.

Photo Edition, originally Daily Edition.