HTML CSS JS

目瞪口呆视频系列之——不是所有主机都有能力当砖头!!!

11月 27th, 2008

展会喷画

11月 26th, 2008

房网主题:在网上看房,在房中上网

车网主题:名车品鉴,魅力体验

 

评论:揭开51.com – 彩虹QQ的流氓文化

11月 26th, 2008

没想到51.com一开始死命反驳自己不是彩虹的幕后黑手,现在又承认了,看了51的这个什么声明,一开始直接怀疑他的真实性!
怎么有这么流氓的企业?腾讯,我支持你与流氓斗争到底!
 

1、你这个彩虹QQ有国家什么什么版权局登记?
这个登记是否意味着你就是绝对合法的?你怎么登记下来的?你用了别人的平台给自己创造利润居然还说自己是合法的?如果你是合法的,珊瑚虫、番茄花园还不冤死?你跟他们有什么区别?不!你比他们还恶劣。至少他们没成立一个公司一个部门专门从事盗版交易!至少在我们看来,他给我们带来的实际利益益要大很多,而你?只是为了自己的利益! 阅读全文

08年最黄最隐晦游戏广告赏析

11月 25th, 2008

记得是当年《天堂》的一则广告语“狂抽猛送”开了国内网游隐晦广告的先河,后来在各级厂商的大力推动之下,很黄不暴力的网游广告越来越多。此后还出现几条经典广告语,如:
又粗,又壮,x月x日,试一下吧——《信仰》的。/激荡你的一夜情,勇闯美人关——这是《征服》的。/激情周末——这是《封神榜》的。 阅读全文

街头象棋骗局详解

11月 25th, 2008

中山团购网

11月 24th, 2008

雷!“网络语”图文并茂词典

11月 21st, 2008

被雷到了。
自己慢慢看

阅读全文

数字都市图标

11月 19th, 2008

ONCITY

ZSNEWS

《昨天》一个80年生人的回忆

11月 17th, 2008

 

图形化按钮

11月 17th, 2008

图形化按钮,就类似这个样子的:

当然,它其实就是一张图片而已。这样做纯粹是为了好看。这里探讨的不是怎么设计这种按钮,而是怎么在网页里把它做出来。这里要提几个要求:
A. 语义化。如果这个按钮叫“完成注册”,就要在HTML中写出这四个字,以保证只读HTML的情况下也知道这个按钮是什么文字。
B. display:inline。用display:block可以很容易的调整大小。但是如果一横排并列两个按钮,就比较难解决。用float?不好。万一我需要两个按钮并排,且居中,用float会增加更多额外的代码。
C.理所当然,跨平台兼容性。所以inline-block的想法,在IE6上就行不通。

有几种方法可以做这种按钮:
1. 用image类型的input标签,或是button标签。这样做最大的问题是,必须在HTML里引用图片地址。我个人是倾向于不要将修饰图片地址放在HTML代码里。结构和表现要分离嘛。此外,用button环绕img,你会惹一堆布局上的麻烦。

2. 用a标签,CSS加背景。这种方法挺容易。但是有几个问题:
a) 对inline的a标签设置高宽,你会遇到一堆麻烦事儿。
b) 此外,为了达到要求A,需要在a里面写入文字,并且将文字隐藏掉。这里如果用text-indent的话,就不能用inline了。另外一个方法是vertical-align,但是,这个属性基本上被我废止。原因是vista里,用微软雅黑及vertical-align,你会遇到很可怕的事情。记住要求C:跨平台兼容性。
c) 用a标签,你还得写JS来提交表单,麻烦。

3. a标签环绕图片。这个同样不是太好,理由在1和2里都有讲。(但它倒是可以满足要求B:display:inline)

4. 用buton类型的input,加CSS背景。这种方法看上去是可以满足要求A和B。关键的问题是:在保证跨平台兼容性的同时,如何隐藏掉button的文字。

我这里给出一个比较好的方法:

提示:你可以先修改部分代码再运行。

解释一下:在FF3和Chrome中,将按钮的text-indent设为-3000px,就可以将文字隐藏。但同样的设置在IE下,会导致按钮本身也跟着跑到-3000px的位置去,除非按钮被声明为display:block(但这就不满足要求B了)。

对此有一个巧妙的解决办法:首先用hack在IE里将text-indent恢复。然后再将左padding设置成120px,和width一样。这个方法之所以很妙,是因为按钮是唯一一个不遵守盒模型的元素,无论在哪个浏览器下。所以将左padding设为和width一样宽,会将真正的文字空间压缩到0!。

但是这个解决办法在FF中却会有问题。原因是,即使文字空间压缩到0,FF仍然会将文字显示出来,而不受overflow的影响(事实上这样处理是符合标准的,理由自己思考一下)。所以仍然要写text-indent。

还有一个问题是,在Opera里,左padding要设为差不多180才能将文字隐藏。原因不详。至少我用的9.2版本是如此。所以上面的代码在Opera中并不兼容,需要再单独为Opera做hack。

还有一层更深入的思考:那为啥不就将padding: 0 0 0 180px以正常的形式写到CSS中呢?这个就作为思考题啦,提示一下,180px会对FF造成不利影响。

综上呢,我给的代码是多一不可,缺一不可的(当然,我没写对Opera的变态hack,因为这家伙已经开始背叛标准了,而且不同版本之间兼容性很差,所以放弃掉它)。

此外还可以补充一下,cursor:pointer是为了增强可用性。这是个很奇怪UX问题,如果是正常的button,鼠标不改变,也不会觉得奇怪。但是如果按钮没有突起感,鼠标移上之后不变形,就会感觉是不可点。