Thems style: Alpha 10% Alpha 30% Alpha 50% Alpha 70% Alpha 90%

one two three four five

No Responses to “”

  1. bbqsdd 2007 十二月 20th at 11:42 Says:

    =-=
    有BUG的.
    用右键对其中一按钮点击,然后再用左键点击其它某一按钮,下拉菜单会全部显示,并且不会缩回去.
    http://photo14.yupoo.com/20071220/114433_719052355_natsjoxm.jpg

  2. Gulu77 2007 十二月 20th at 13:44 Says:

    奇怪了~ 没发现”bbqsdd”所讲的问题,请问你是用什么浏览器的?

  3. Firefox光标丢失–Firefox-火狐浏览器中文网 2007 十二月 28th at 13:59 Says:

    [...] Firefox光标丢失 [...]

  4. Lunatic Sun 2008 一月 30th at 18:55 Says:

    你的实例链接好像什么都没有么？

    还有就是你是怎么把四个div定为到四个角并且能够自适应宽高变化的？对#box采用position:relative后再对他们使用position:absolute？

  5. Gulu77 2008 一月 30th at 22:56 Says:

    SORRY哦！ 例子做了还没来得及传上去…
    说得对，先给父级相对定位然后子级用绝对定位。

  6. s5s5 2008 七月 11th at 09:45 Says:

    display与visibility的差异
    这个realazy有篇文章reflow说过，其实是visibility比display要好一些。

  7. Mr.Q 2008 七月 11th at 09:49 Says:

    border的看法正好相反,css2的规定为“none
    没有边框。该值迫使’border-width’的计算值为0”，而且在一些特殊行为下none是不起作用的

  8. weilaixu 2008 七月 12th at 09:47 Says:

    思路一致的，哈哈！

  9. NIPAO 2008 七月 15th at 09:16 Says:

    答案不是很令人满意

  10. weilaixu 2008 七月 17th at 09:50 Says:

    我的link呢？怎么没有了？？？

  11. 爆牙齿 2008 七月 19th at 11:59 Says:

    我比较喜欢这样的思考和答案，呵呵。
    class命名不好，不过枝节问题了。

  12. Gulu77 2008 八月 11th at 10:20 Says:

    对于display与visibility的个人理解,请查看
    http://bbs.blueidea.com/thread-2868928-1-1.html
    第5楼.

  13. Gulu77 2008 八月 12th at 09:23 Says:

    CLASS命名是显得不够严紧，谢谢提点！

  14. tommyfan 2008 八月 13th at 10:34 Says:

    还打算用这招来陷害人,被您公开了我又没得玩了,开心了吧,笑了吧!

  15. Gulu77 2008 八月 13th at 10:46 Says:

    真是非常开心，简直乐意不绝啊…

  16. cc 2008 八月 13th at 10:48 Says:

    记得有bookmarlet的x-ray的

    http://www.google.cn/search?hl=zh-CN&q=xray+bookmarklet&btnG=Google+%E6%90%9C%E7%B4%A2&meta=&aq=f

  17. 一张背景实现自适应九宫格 Gulu77 2008 八月 20th at 21:32 Says:

    [...] 在原来的宽高自适应的九宫格基础上做了一些优化，把八个背景图请求改为一个，以降低网络成本。其实这也只是一些简单的小技巧，不过在切图方面会比较严禁有1px的不对称就会出问题，请留意下面例子的切割分析。 [...]

  18. aoao 2008 八月 20th at 23:09 Says:

    很好~ 很强大　~ 挖哈哈

    不过命名我比较不喜欢。但是好像也没有什么其他好一点的命名方式

  19. Gulu77 2008 八月 20th at 23:16 Says:

    又提到命名问题，看来真需要检讨一下我的命名方式

  20. MarVell 2008 八月 22nd at 22:18 Says:

    好想去…

    等我工作了就不知道开到第几届了= =!

  21. Gulu77 2008 八月 22nd at 22:58 Says:

    多参加这类型交流会是件好事，为以后的工作做好铺垫。

  22. UU 2008 八月 23rd at 14:40 Says:

    其实一大半都是腾讯的人，还是在宣扬所谓页面仔如何强大的理论，今年是这内容，明年还是这内容，没点份量，和淘宝举行的D2简直不是一个级别的。

  23. UU 2008 八月 23rd at 15:22 Says:

    还要什么对现场人员才公开，你们以为个个都那么容易抽空到深圳，这内容还保密什么，人家D2都是提供全场视频录播给遗憾无法到场的人下载观赏的。

  24. tyrone 2008 八月 23rd at 23:29 Says:

    别把D2跟webrebuild一起评论，如果做为一个页面制作者你在D2能学到东西的话我无言，D2是前端开发，完全不是一个职位的

  25. Gulu77 2008 八月 23rd at 23:44 Says:

    感觉webrebuild会比较低调点，webrebuild想发展的是热衷于页面重构的VIP会员，跟D2风格有点不同当然D2也是我所崇拜的。（以上是我个人看法并不代表webrebuild）

  26. will-yang 2008 八月 26th at 14:18 Says:

    个人觉得这样代码更清晰，兼容性也好！呵呵·

  27. will-yang 2008 八月 26th at 14:22 Says:

    代码显示不出来。 具体代码是，把图片放在div内然后给div设置padding,然后给图片设置-margin 撑出去。OK

  28. will-yang 2008 八月 26th at 14:22 Says:

    发不出来代码

  29. weilaixu 2008 九月 9th at 08:50 Says:

    再次提醒，从昵称、邮箱、网站任意一个留言必填选项中按tab键，立刻就跳到搜索………..

  30. 木 黄 2008 九月 9th at 09:09 Says:

    很好很强大

  31. Gulu77 2008 九月 9th at 09:37 Says:

    因为指定了tabindex=”"所以导致tab键直跳到搜索按钮，此问题已经修复，谢谢weilaixu提醒！

  32. weilaixu 2008 九月 19th at 15:19 Says:

    哈哈，有了这个，省的我到收藏夹里的分类去查找了！

  33. 木 黄 2008 九月 23rd at 08:54 Says:

    一张图片实现九宫格 出现的问题：当position在img前的话，left right就不会显示甚至怎么定位的都没有反应，然后问题解决了，原来不需要去更改位置，阿真将 background换成 background-image后，这个问题就不存在了，我想问你，这样的做法会比较好吗？相对于更改位置

  34. Gulu77 2008 九月 23rd at 10:22 Says:

    嗯～这样做没问题，因为background-position{}在前,background{}在后position的值因此被覆盖了，写成 background-image侧避免了这问题。

  35. CSS Sprites图片切割术与图片优化 Gulu77 2008 九月 23rd at 17:16 Says:

    [...] 关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Spirite图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Spirite图片与XHTML关系如《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。 [...]

  36. Ghost 2008 九月 28th at 12:41 Says:

    物极必反。
    几个Dome的数据可以参考下，缺少实际项目经验支持，在应用上会有一些问题。

    回复Ghost 鬼的话也太深奥了,以至我无从辩驳

  37. Gulu77 2008 九月 29th at 00:54 Says:

    资源分享希望能做到利人利己,谢谢支持!

  38. 南山 2008 十一月 10th at 12:49 Says:

    非常强大，找了很久，谢谢了

  39. ErvinTW 2008 十一月 12th at 06:37 Says:

    Thanks! Nice post.

  40. s5s5 2008 十一月 12th at 15:06 Says:

    没想到还有我的啊，挖哈哈哈哈~~~

  41. 落Nicety 2008 十一月 15th at 23:15 Says:

    有意思..

  42. lstar » CSS Sprites技术以及图片优化 2008 十一月 16th at 21:58 Says:

    [...] 关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。 [...]

  43. poor 2008 十一月 20th at 17:14 Says:

    以前发现过，但没有去想这个解决方案，影响并不大。77给的解决方案不错，学习了！

  44. weilaixu 2008 十一月 20th at 18:48 Says:

    一直认为77是个好孩子！

  45. xhlv 2008 十一月 20th at 20:12 Says:

    有时，图片或图标不是一下子就确定了，项目开发的过程中难免会有很多修改和补充，原则上不会对原先摆放的内容进行挪动，否则工作量太大，太不方便。

    另外，个人感觉Taobao的那个png压缩工具更好用，选中图片右键就能压缩

  46. 警方已认定Browser引擎被裁掉(21 фото) - [米随随] s5s5 2008 十一月 21st at 00:25 Says:

    [...] 缩小窗口背景被裁掉 此现状出现在IE7、FF、Opera、Chrome、Safari中，当浏览器窗口少于内容，拖动窗口横向滚动条时能发现定义在<html><body>的背景会被裁掉，似乎背景只计算了当前窗口的宽度。引起这问题的主要原因是在中定义了背景。在IE6不存在此问题。 [...]

  47. 木 黄 2008 十一月 21st at 12:14 Says:

    可怜的菜鸟木还没有遇到，给代码我拉～

  48. amer 2008 十一月 22nd at 15:49 Says:

    不知区块CSS层级选择关系对渲染效率是否有影响呢。。。？

  49. moomu 2008 十一月 23rd at 17:08 Says:

    display:table现在就可以用了吗？

  50. IE5至IE7读取不了4095行以后的CSS| 刻下的幸福时光…..| 翅膀’s blog 2008 十一月 23rd at 19:08 Says:

    [...] 文章来源http://blog.gulu77.com/?p=88 经过测试IE5至IE7会读取不了CSS文件中4095条以后的样式,又一个IE莫名的错误，为什么读取不了4095条以后的CSS实在令人费解。 [...]

  51. Gulu77 2008 十一月 24th at 13:02 Says:

    在没有更好的办法之前我建议可以尝试使用display:table

  52. mon 2008 十一月 24th at 13:15 Says:

    把.block div{ display:table-cell; padding:5px; vertical-align:top; *float:right}

    改成

    .block div{ padding:5px; vertical-align:top;zoom:1;}

    就可以实现

  53. Gulu77 2008 十一月 24th at 13:22 Says:

    只能说以上实例针对定稿而言,请恕本人愚味还没有使用过Taobao的png压缩工具,谢谢xhlv的提醒

  54. mon 2008 十一月 24th at 15:00 Says:

    我也同意你的观点，但到时觉得延时0.5秒久了点，有点卡住的感觉，如果缩短下时间或许效果会更适合~

  55. mm 2008 十二月 12th at 16:22 Says:

    1.你这里的背景图片是指放在哪里的背景图片？我有点看不是很明白第一句话
    2.”在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时，居中的背景图片转向以body左对齐。”
    我怎么觉得这句话有点不确切，要看背景图片是放在什么样的容器中吧？
    3.在ie6、7 下：
    ×背景如果是放在相对body的宽度为100％的标签里，背景图片是相对于浏览器的窗口居中的，在浏览器窗口少于内容宽度时，也会出现文章中所说的错位的问题。
    4.×背景如果是放在固定宽度的标签里，才是转向以body左对齐。而且这个转向body左对齐也不是背景转向，而是所在标签转向，所以背景也转向
    5.×背景如果是放在body里面，在浏览器窗口少于内容宽度时，ie7同样也会出现错位的问题。 ie6则不会。
    回复mm
    1.所指的是body背景图片
    2.3.4 在此文章中注要针对body为解决事例,延伸的问题可参考页面元素的背景及boder被裁掉

  56. mm 2008 十二月 12th at 16:33 Says:

    呃，针对Opera及FF的解决方案很强大，学习了，呵呵

  57. easyQuery 2009 二月 2nd at 16:44 Says:

    正好遇到IE6-PNG透明的问题，多谢学习了^_^

  58. 啊丢 2009 二月 17th at 16:16 Says:

    图片做好以后，有什么好软件测量尺寸么？

  59. Gulu77 2009 二月 25th at 00:34 Says:

    虽然这做法是有点极端，但没有更好的推进方法前希望能得到你的支持，为推互联网作出一点贡献。请转载或加上推广代码^_^

  60. 双色球 2009 四月 13th at 13:43 Says:

    谢谢提醒

  61. 双色球 2009 四月 13th at 13:45 Says:

    尺寸怎么安排啊

  62. 柴鸡不柴 2009 五月 16th at 00:06 Says:

    这个才不极端 极端是给IE6定做一个乱七八糟的页面
    或者一个黑屏 一行提示升级 见淘宝一个彪悍的技术人员 直接屏蔽了所有的IE

  63. cuikai 2009 五月 16th at 19:46 Says:

    为了IE6所写的冗杂代码实在是太多了，希望有一天微软可以强制升级IE，
    第一，抢占市场份额
    第二，为互联网做做好事。大家去掉那些冗杂代码，页面开启速度又会有一个提高。

  64. chami 2009 六月 2nd at 21:22 Says:

    那如果以FF为标准应该怎样设置样式呢

  65. 深圳租房网 2009 六月 26th at 15:44 Says:

    找了很久，谢谢了

  66. lucky16 2009 六月 28th at 14:43 Says:

    短短几天时间!
    现在真的很喜欢你的博客!
    太有风格了!

    希望加QQ:303612518

    想找你学习学习!

  67. 视频聊天 2009 七月 4th at 10:55 Says:

    IE7.0 我一直用IE6.0

  68. 视频聊天 2009 七月 4th at 10:55 Says:

    收藏了 谢谢

  69. moondy 2009 七月 10th at 10:43 Says:

    对于博主精确追求图片大小的精神先先赞一个。
    对于压缩图片，觉得Yslow提供的工具也不错。

  70. moondy 2009 七月 10th at 11:29 Says:

    连包含选择符都不赞成么？
    当然，子选择符属性选择符之类的我也是都不用的。

  71. 汤博客杂志站 2009 七月 17th at 17:17 Says:

    哈哈。又来你博客了，文章不错哦，收藏了。望回访。握手。

  72. Bryan 2009 七月 29th at 22:58 Says:

    说得可以生动一些吗？

  73. weilaixu 2009 七月 30th at 09:46 Says:

    改版了改版了…..

    我的link呢？

  74. ytzong 2009 七月 30th at 10:00 Says:

    博主终于更新了

  75. 14px 2009 七月 31st at 08:58 Says:

    嘿嘿，找了半天米有找到用了CSS3的地方。
    想看看IE6是做了什么处理。
    推动浏览器的更新真是件大难事…唉。

  76. 14px 2009 七月 31st at 09:03 Says:

    要是Qzone首先对低版本浏览器不予支持高级功能，怕是能对国内的浏览器更新做出超级贡献 ^-^

  77. Gulu77 2009 七月 31st at 09:24 Says:

    @14px：据了解正在灰度发布阶段，普通用户可能要等一段时间了哈～
    至于第二点就有点过火了，严重地损害网站的可用性。对企业来说弊大于利啊！

  78. s5s5 2009 八月 13th at 22:27 Says:

    哈哈哈~~~终于大作发表啦~~~

  79. weilaixu 2009 八月 14th at 09:10 Says:

    77是个认真的好孩子。

  80. ytzong 2009 八月 14th at 10:15 Says:

    博主，我知道你写博很辛苦，但我不得不告诉你一些真相：IE Collection中的IE6和原始的IE6是有差异的，即便是IETester也比IEC更接近真实，不信可以再测下，辛苦鸟\(^o^)/~

  81. ytzong 2009 八月 14th at 10:16 Says:

    还有，IEC的IE6很容易无响应，而原版IE6不会

  82. Gulu77 2009 八月 14th at 11:14 Says:

    @ytzong 感谢你的关注并且加以提示醒受益了^_^，再一次测试后发现文中有三个例子只会在IE Collection中出现已经加以标注。

  83. 14px 2009 八月 14th at 20:21 Says:

    先膜拜一下博主。。。遇到这样的问题，我首先就是乍乍乎乎地去找注释的麻烦。
    float确实能产生很多莫名其妙的问题，但有的时候感觉真没什么东西能替代它。
    再感慨一下幸亏我米有用IE Collection

  84. Mr.Q 2009 八月 14th at 22:36 Says:

    佩服楼主的测试精神!
    其实给有问题的元素加上position:relative就能解决问题

  85. 仁心博客 2009 八月 16th at 09:54 Says:

    楼主是细心的人

  86. weilaixu 2009 八月 26th at 09:49 Says:

    展望，继续展望。
    每次跟朋友提到这些新技术的规模应用。我总是这样说！

  87. Yellow 2009 八月 27th at 23:03 Says:

    一直都在关注HTML5，很多让人心动的东西，期待中

  88. AWait 2009 九月 3rd at 00:47 Says:

    我的IE8好像也不能读取。

  89. 嗰個人·徽 2009 九月 15th at 18:00 Says:

    a1.html, a2html, e2.html沒有你所說的情況。

    其它的如你所說。

    測試是用同事的電腦，正常的IE6/7。

  90. 小五 2009 九月 19th at 08:12 Says:

    强啊，分析的很好！学习学习！

  91. 华晨 2009 九月 20th at 08:49 Says:

    真诱人！我要在我的下一个项目中使用它！！！

  92. bunorte 2009 九月 23rd at 11:41 Says:

    在我第一次看到有关html5的东西时,就迫不及待的把自己blog的模板换成了html5的标签.

  93. CloudWeb云端 2009 九月 24th at 17:06 Says:

    真的要为IE6当奴隶哇，万恶IE6

  94. CloudWeb云端 2009 九月 24th at 17:23 Says:

    float确实引起很多怪异的现象，但是float也是个好的功成哟！关键是怎么去巧妙的处理float的问题了。

  95. Insion 2009 九月 25th at 15:05 Says:

    改成html5有没有一个集成的js库之类啊？直接调用就可以让ie支持html5那样多方便啊~

  96. air 2009 十月 16th at 16:38 Says:

    文章研究的不就是多出来的”猪”~,
    感谢博主的总结~

  97. jacy 2009 十一月 1st at 16:26 Says:

    独立于根？

  98. ytzong 2009 十一月 19th at 21:55 Says:

    第一个DEMO，将#nav a:hover{background:url(bg.jpg) no-repeat 0 0;}改为#nav p a:hover{background-image:url(bg.jpg);background-repeat:no-repeat;}后正常
    我的习惯是背景等属性不使用缩写:)

  99. Mr.Q 2009 十一月 19th at 22:44 Says:

    content:”";在这里的作用是什么?

  100. chesanqi 2009 十一月 20th at 12:51 Says:

    把hover放在a前面绕死我了,我想了好大会才理解是什么意思.先定位然后再加载图片,这方法不错受启发了.

    降低a:hover选择符的特殊性方法似乎更简单,将
    #nav a:hover{background:url(bg.jpg) no-repeat 0 0;}
    改为
    a:hover{background:url(bg.jpg) no-repeat 0 0;}
    或者,提高a.nav_1这6个的特殊性,将
    #nav a.nav_1{width:80px;background-position:0 -213px;}
    改为
    div.header #nav a.nav_1{width:80px;background-position:0 -213px;}

    这样a:hover还是放到后面a的下面,火狐里也不会出错了还符合习惯性的阅读顺序.
    看来是IE6对选择符特殊性的计算有问题.

  101. chesanqi 2009 十一月 20th at 13:01 Says:

    另外 DEMO1这个案例在IE6下还有个重复字符的BUG,总宽超过743px;就会重复一次出现nav6字段.

  102. Gulu77 2009 十一月 20th at 19:00 Says:

    @chesanqi ——厉害这样也被你测试出来，我想应该是浮动引起的重复字符问题

  103. Gulu77 2009 十一月 20th at 19:09 Says:

    @Mr.Q——手误的产物content:””;在这里是多余的。曾有人讨论过使用content:””;来处理特殊情况的字体隐藏问题，但根据测试似乎用不上了，至于是那种特殊情况还有待研究。

  104. Gulu77 2009 十一月 20th at 19:16 Says:

    @嗰個人·徽——感谢关注～这是IE的版本不一样，在文章中有标注 ^_^

  105. ytzong 2009 十一月 20th at 19:58 Says:

    YUI有时利用alpha透明的png-8来做渐进增强，比如圆角半透明阴影
    不过国内还没人这么大胆

  106. ytzong 2009 十一月 20th at 20:06 Says:

    1、3给relative的父元素加position:relative
    4给relative元素触发haslayout
    2暂无方案，之前基本没写过怪异模式

  107. Gulu77 2009 十一月 20th at 20:08 Says:

    曾做过测试，做了一张256颜色以下的alpha透明图片，分别保存png8与png32，结果8比32（即ps的png24）节省大约60%的体积。

  108. Gulu77 2009 十一月 20th at 20:18 Says:

    其实1.3已经是有position:relative，但仍有兼容性问题如上文所描述的。而第5个问题堪称绝对经典经常遇到但确没有彻底解决的办法

  109. bigCat 2009 十一月 22nd at 12:19 Says:

    哈哈，我新皮肤的logo就是alpha透明的阴影png-8，ps搞不定，只能fireworks搞，体积小，很赞

  110. Leeiio 2010 一月 28th at 11:48 Says:

    @Gulu77 那是因为没有alpha通道呗，这个很占大小的。

  111. Leeiio 2010 一月 28th at 11:53 Says:

    呃，你的博客的评论提交按钮type=”button”…我得用firebug改为submit…

  112. Gulu77 2010 二月 9th at 10:21 Says:

    @Leeiio 英雄有见地～

  113. lostab@gmail.com 2010 三月 5th at 12:16 Says:

    这个Blog真是漂亮,很是养眼.
    很想有一天也能设计出这样的作品来.
    能共享源码吗?

  114. trance 2010 三月 16th at 10:51 Says:

    工作地点在哪里？ 深圳还是北京？

  115. applezqp 2010 三月 18th at 15:06 Says:

    border:none;在IE下没有渲染吗？
    好像不是吧，原先是border-style:outset;加了border:none; 变为border-style:none。
    都是由渲染吧，只是border:none时，IE下没有渲染border-width，还是为2px，所以win、win7、vista还是会显示边框。
    http://blog.linxz.cn/border/ 这篇文章觉得有点道理。

  116. Gulu77 2010 三月 22nd at 20:30 Says:

    在深圳哈～

  117. 笑就歌颂 2010 四月 18th at 14:57 Says:

    谢谢..找这个找了好久..未能找到适合的..

  118. 龚琛 2010 四月 19th at 08:45 Says:

    你的博客做的很漂亮。羡慕中~~~

  119. feeling 2010 四月 19th at 20:20 Says:

    77哥，技术BLOG怎么改写记叙文了

  120. 重庆seo 2010 四月 21st at 22:55 Says:

    嗯，博主辛苦啦。真的坚持写文章不容易呀。所以我每到一处都会留下自己的简简单单的评论，来支持博主！加油！

  121. redky 2010 六月 3rd at 11:35 Says:

    为什么cc也分为三块呢?

  122. ero 2010 七月 26th at 00:41 Says:

    尽管页面很漂亮但还是死在IE6手里了…

  123. netspider 2010 八月 6th at 14:49 Says:

    背景把内容都盖了，内容文字看起来很费眼。

  124. 重庆seo 2010 八月 9th at 10:33 Says:

    呵呵。。同意楼上所说。页面是很漂亮，但是会死在IE6中

  125. 铁观音 2010 八月 12th at 11:25 Says:

    特别喜欢你的背景图 不介意拿来当墙纸吧。：）