http://www.ediyang.com Creative change lives Tue, 23 Feb 2010 09:40:18 +0000 http://backend.userland.com/rss092 en 同学们好，我的博客已经很久没更新了。谢谢你能阅读这篇文章，在这我想把我大学毕业找工作的一些经历与感谢记录在此，一方面是自省，一方面也给需要的同学提供参考。 被“流水账” 记得大四开学不久，我就开始关注淘宝，腾讯等等公司的校园招聘活动，关注职位是前端开发以及页面重构。 最开始我面试了cvt这家我不太熟悉的公司，职位是ui设计师。当时只是想去试试胆，而感受是整个招聘现场只有我没有穿正装。不出意外的，我一面都没有通过。 第二次面试比较意外，是在我在理发店刚要开始剪发的时候，一个杭州的电话打了过来，心里既紧张又兴奋。同样的，这种毫无心里准备的面试让我有点措手不及。而整个面试过程虽然时间不短，但是我却表现得十分糟糕，很多技术上的题目我都答不出来或是答得很别扭。印象深刻的是面试官问我“相对定位与绝对定位的区别”的时候我脑子里一片空白，乱说了几句就结束了。虽然这次面试很失败，但是我很深刻的认识到自己的不足，就是“很多问题总结后没回顾，忘记了”，“有些技术问题我懂，但是当面试官用语言问我时，我却不知道其具体是什么”，同时我发现margin跟padding不知道该用什么中文替代，还是用英文。这次面试后我也基本放弃了淘宝实习职位的希望。 10月17日，我跟我的好朋友麦嘉两人去了在网易大厦举行的网易邮箱现场招聘会，网易大厦环境给人感觉很轻松很愉快。但是我们没想到招聘会人很少，以至于我们一进去就马上开始面试。当时面的是“页面架构工程师“这个职位，面试官问的都是比较基础的问题，我感觉我答的还可以，只有一题“你有没有做过换肤”，我说了“没有”。我被面试官告知“等待通知”后等了我朋友接近一个小时，看了他进了一个小黑屋，之后又进了一个玻璃屋。而后来他出来之后我才知道，被“等待通知”都是没戏的。而后我们俩在公车上一直唠叨说“真的太可惜了，那么少人去应聘居然都没进”。 而后我跟麦嘉都急切的等待腾讯以及淘宝、阿里巴巴在广州的校园招聘。记得那天早上我们在大学城华工参加了腾讯的笔试，而同时举行的网易笔试我连机会都没。腾讯的“页面重构”题目难度一般，只是加分题比较烧脑袋。因为我几乎没在纸上写过布局的代码。而我也发现在教室监考的老师就是彪叔（因为大三他在广州招聘时我去偷瞄过），交卷时彪叔还面带微笑问“很容易吧”。中午与麦嘉及珍一起吃过午饭后，我们又参加了淘宝的笔试，淘宝在笔试环节准备得不周全（第一次在广州招聘），教室里挤满了人，试卷也是临时加印。而淘宝的笔试题目我答得没早上那么好，这是因为平时javascript实践太少所致。 正是由于淘宝的题目答得不好，我并没有抱什么希望，而是把更多的期待放在了腾讯的面试。正因为此，我一心在研究腾讯笔试的加分题，没有太在意淘宝的错题及不懂的题目，这也成为了后来淘宝面试失败的重大原因。不出意外的我在笔试当晚4点收到了腾讯的一面通知，同时庆幸面试是在笔试后2天，这样至少可以睡个饱觉。 2天后的早上我坐了1个小时车到了大学城中大进行腾讯的一面，面试安排在面试官的酒店客房里。房门打开，面试官还是彪叔，彪叔亲和力十足，面带微笑并且摆了几瓶可乐在桌子上招待应聘者。由于我有事先准备，所以彪叔问的问题我基本都答得出来，唯独其中一题我答得不好。整个面试过程很愉快也比较轻松，而从面试官的表情我内心也自我暗示进下一轮应该没有问题。 早上面试完回到学校宿舍想好好睡一觉的时候，我又意外的接到了杭州的电话，而且是很多个8结尾的电话。原来是因为我没法参加上海举行的支付宝的校园招聘，他们帮我安排了电话面试。支付宝的面试官给人比较轻松的感觉，特别当我答不出的时候还主动安慰我说“没关系”，这也让我慢慢进入状态。而电话面试一共进行了3轮，当天晚上我在上选修课的时候，接到了支付宝hr的电话，才知道offer已经离我不远了。 面支付宝后当晚我又意外的收到了淘宝发来的在体育西面试的通知短信。由于腾讯的表现良好以及支付宝的电面，我心里大意了，以至于我到了面试现场，我才发现淘宝笔试的题目我还没去纠正答案。当我懊悔不已的时候一个头很光亮的同学叫了我进去，后来才知道他就是秦歌同学，口碑ued的大佬。如前面所说，由于我的大意，我犯下了一个我自己都无法原谅的错误，那就是错的题目没有去改正。虽然秦歌没有让我通过面试，但是他正如他所说，他希望我明白自己未来的路是怎么样的。秦歌对待毕业生这种态度让我佩服，我也毫无掩饰的承认自己的不足以及对前端的爱好。 而当天晚上，我的心跳又快了起来，因为今晚是公布腾讯2面的时间了。腾讯2面的面试官是一位“很像海归很有修养”的大年龄的同学，后来听说应该是QQ空间的部门经理了。这次面试简直打破了我面试的最短时间记录，因为只持续了7分钟。-_-#然后又不出意外的我败在了这一面了。 到这里，我的找工作经历也基本结束了，虽然我不像一些同学一样同时拿到几大公司的offer，但是对于支付宝的offer我一方面心存感激，一方面感到十分幸运。而我在这也要好好地谢谢那些我认识的或是不认识的帮助过我的朋友。谢谢 @dleo,adrian cheng,秦歌,彪叔,丁忠辉,麦嘉，还有我亲爱的爸妈，姐姐，还有一直陪我到处奔波的珍珍。 可以只看这几句 希望这几句话能对以后的应届生有所帮助： 不要大意 提前准备 诚实最重要 保持乐观，不要放弃 http://www.ediyang.com/job-hunting-tips/ 昨天有一位朋友在谈到了图片幻灯片效果的时候说ediyang.com那个幻灯片太“平庸”了，的确我从来都没考虑过这个问题。呵呵，碰巧我今天看到一个相当不错的Flash幻灯片效果CU3ER，在这里介绍给大家： 1.真的很酷？ 首先我建议大家看看官网这个惊艳的DEMO: http://www.progressivered.com/cu3er/ 可以看到一个图片幻灯片该有的功能它CU3ER它都有了，而且更漂亮更酷。 2.我也要试试 CU3ER的使用十分简单，保证3分钟内你就可以学会了。 下载 到http://www.progressivered.com/cu3er/download/猛击那个红色的大按钮，下载源文件。 配置 配置上最核心的就是config.xml这个文件了，接下来介绍一下大致标签的含义： <?xml version="1.0" encoding="utf-8" ?> <cu3er> <slides> <slide> <url>images/slide_1.jpg</url> </slide> <slide> ... http://www.ediyang.com/cu3er-introduction/ 密码输入框，或者说表单是我们普通网民需要经常接触的网页元素之一。但是密码输入框的用户易用性却一直没有没有列入到设计者的考虑中去。 我今天介绍这2个jQuery插件分别是Chroma-Hash以及跟iPhone一样的密码输入框，他们功能不同，但却一样提升了密码输入的易用性。 1.Chroma-Hash 首先介绍Chroma-Hash，它可以实时用3条色块（可以更多）来形象化你的密码。试试demo演示，或看下图你就明白： 可以看到在密码输入框的右边有3个色块表示你的密码，这么做的好处有2个： 登录时，用户可以通过颜色判断密码是否输入正确 注册时，用户可以通过对比2次密码输入的色块，判断2个密码是否一致 而完成以上步骤是实时完成，更不用通过将数据输送到服务器端，因为用户可以提前知道自己的密码是否有误。 如何使用 1.首先到http://github.com/mattt/Chroma-Hash/tree/master下载chroma-hash.js 2.html代码如下： <fieldset> <label>Username</label> <input id="username" name="username" type="text" /> <label>Password</label> <input id="password" name="password" type="password" /> <label>Confirm Password</label> <input id="confirm-password" name="confirm-password" type="password" /> </fieldset> 2.接着在我们的html 文件中引入jQuery以及chrome-hash.js <script src="http://www.google.com/jsapi"></script> <script type="text/javascript" charset="utf-8"> google.load("jquery", "1.3.2"); </script> <script src="chroma-hash.js" type="text/javascript" charset="utf-8"></script> 3.调用函数 <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $("input:password").chromaHash({bars: 3}); $("#username").focus(); }); </script> 详细信息可以浏览作者的网站 2.像iPhone一样的密码输入框 如果你没有用过iPhone可能并不会明白这个插件的功能，简单的说，就是在密码输入框键入一个字符时它并不会马上变成星号，只有再键入下一个字符时它才会变成星号。 还是看看demo演示好了吧，或者看下图： 这样做的好处是： 用户可以及时知道自己输错密码 如何使用 1.到http://dpassword.googlecode.com/svn/trunk/lib/jQuery.dPassword.js下载jQuery.dPassword.js文件 2.在我们的html文件中引入jQuery与jQuery.dPassword.js并调用 <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jQuery.dPassword.js"></script> <script type="text/javascript"> $(document).ready( function() { $('input:password').dPassword(); }); </script> 详细信息可以浏览作者的网站 http://www.ediyang.com/2-jquery-plugin-improve-password-field-usability/ 最近我因为要安装Firebug 1.4导致我不得不安装了Firefox 3.5,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发. 首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的. text-shadow是什么? text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣. text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片. 目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的. 接下来看看text-shadow的语法: text-shadow:color length length length; color:颜色; length分别按顺序指"X轴方向长度 Y轴方向长度 阴影模糊半径" 正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上. 其中任意一个值可以为零也可为空(将做默认处理) 举个例子: text-shadow: -1px 2px 3px #ffb69a; 表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a 一些试验与demo 我做了点小小的试验,做成了一个Demo页面. 为了向浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个"火鸟"看起来像"鸡"): 如果你使用的是Firefox 3.1+,Safari等浏览器,那请直接点Demo演示 为什么使用text-shadow 可以增强文字质感 可以减少图片的使用,减少带宽支出 随着Firefox 3.5支持text-shadow,不久很多人将可以看到你定义的阴影 不相信?请看看下面的截图,这是对http://tweetcc.com/网站分别在safari 4(win)与Firefox 3.0.11下所进行的截图.很明显在有text-shadow应用下整体文字层次感好了许多. 其他例子 接下来我们继续看看一些有趣的text-shadow下的例子吧,首先看看vikiworks用text-shadow来显示程序代码.很多人都觉得这个效果很赞,没错,该网站用的就是css3属性. 参考资料及常见问题 看完上面觉得不够,那么可以参考一下下面的文章. http://www.css3.info/preview/text-shadow/ http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows http://www.quirksmode.org/css/textshadow.html 问题有: 如果使用了blur,也就是定义了阴影模糊半径,会导致页面在滚动时变慢. 转载请注明来源:http://www.ediyang.com/css3-text-shadow-why-and-how/ 请留意:本文章旨在借刀杀人抛砖引玉引起大家对CSS3的兴趣. 也比较侧重该属性呈现的效果,所以对该属性的技术性讲解及定义都有所偏差,请原谅. http://www.ediyang.com/css3-text-shadow-why-and-how/ 我们知道在制作网页过程中图片占了一个十分重要的地位.尽管网速越来越快,但是图片太大依然是造成网页载入速度过慢的最重要原因之一. 那么到底在GIF,PNG,JPG这些格式我们要选择哪一种作为候选格式,而哪种图片格式可以让图片更小,却拥有更好的图片质量呢? 1.图片格式 GIF GIF最突出的地方就是他支持动画,同时GIF也是一种无损的图片格式,也就是说你在修改图片之后,图片质量并没有损失.再者GIF支持半透明(全透明或是全不透明). 根据Google的说法,GIF适用于很小或是较简单的图片(10x10以下或是3种颜色以下的图片). PNG 首先,PNG包括了PNG-8跟真彩色-PNG(PNG-24 or PNG-32).那PNG相对于GIF最大的优势是: 通常体积会更小 支持alpha(全透明) 但是我们知道PNG是不支持动画的. 同时需要留意IE6是可以支持PNG-8的,但是在处理PNG-24的透明时会显示会灰色.相关例子可以参考sitepoint. 通常图片保存为PNG-8会在同等质量下获得比GIF更小的体积,而全透明的图片我们现在只能使用PNG-24.但是请留意在保存图片在PNG-8与GIF中进行比较.因为定律并不一直正确. JPG JPG所能显示的颜色比GIF,PNG要多的多,同时得到很好的压缩,所以JPG很适用于保存数码照片.但是注意它是一种失真压缩,这意味着你每次修改图片都会造成像素失真. 看了上面的介绍你应该对使用哪种格式保存哪种图片有了大概的了解.简单的说就是: 一句话:小图片或网页基本元素(如按钮),考虑PNG-8或GIF.照片则考虑JPG. 2.图片的压缩 首先,我们如果是在Photoshop中制作的图片或是网站素材,在保存图片时,切记选择"文件-存储为Web和设备所用格式".因为这样往往在同等质量下能获得更小的图片体积(相比直接"存储为").请看下图: Smush it! 在按照上面方法存储图片之后,其实还是可以继续压缩图片大小的,而且我谈论的是不对图片质量造成损失的方法. Smush it!包含在著名的著名插件YSlow之中,并确保已经安装了Firebug.使用方法很简单,只需要在YSlow中打开"tool"下的All Smush it! 将会跳转到一个新页面,对当前网页的图片进行压缩.而这些压缩都是在不损失图片质量下进行的.所以你大可放心. 6-15更新:由于"实践是检验真理的惟一方式",那么我现在用Smush it!对本网站及vikiworks.com分别进行测试,结果显示ediyang.com首页的图片压缩了6.52K,而vikiworks.com的首页压缩结果十分惊人,竟是46K,截图如下: 由此可见Smuch it!真的是图片压缩的一大利器. 如果你想要单独压缩某一张图片,你可以到 http://developer.yahoo.com/yslow/smushit/index.html 只要填写图片的网址就可以进行压缩了. Tips:先在PS中保存为web格式图片,然后再使用Smush it!压缩图片. 3.其他资料 当然,如果你想要更深刻地了解这些知识,你可以选择下面的文章进行阅读: http://code.google.com/speed/page-speed/docs/payload.html#CompressImages http://yuiblog.com/blog/2008/10/29/imageopt-1/ http://www.ediyang.com/image-optimization/ 上次我介绍了在Photoshop加强网页设计中的细节,很多朋友都觉得讲的不够多,并且一些朋友很想了解如何在Photoshop制作一些文字的特别效果(还有一位朋友问我在photoshop如何生成艺术字,这在Word才有). 其实在现在的网页设计中,比较常用的文字效果并不多,实现的方法也很简单.所以接下来的内容我希望能对网页设计中的新手有所帮助. 我这篇教程将围绕2个关键字:"渐变","阴影". 1.更有质感的字 我们先看图片里这个LOGO,它显得更有质感,文字有一张向外伸展,不会死板地贴在网页上.如果你仔细观察,你会很容易发现文字的brightkite都使用了色彩"渐变".是的,文字的颜色都不是单色填充,而是"渐变"."渐变"为什么看起来更有质感呢?这是因为这里模拟了大自然光照中的效果,即高光部分在文字的上方,而低光在下.同时也不要忽略了另一个细节,就是文字的"阴影",. 那到底要怎么做呢? 留意图中的2跟3,如果你还不懂如何添加渐变.请在图层面板中双击"图层名"右边的空白处,或是点击下图中的第2个按钮(在图层面板下方)打开样式面板. "渐变叠加",然后按下图设置.渐变的颜色选择2个同色系但是有"深浅对比"的颜色.例如例子中,一个浅绿跟深绿.这样才能模拟光照效果. 好了,剩下阴影.还是一样在样式面板左侧点"投影",然后按下图设置: 再看其他使用了这个方法的网站设计: 2.凹陷的字 照例我们看一个例子: ALEX BUGA网站的LOGO,我觉得是凹陷字体的典范.而这样的字体效果很明显有一种凹陷在背景里的感觉,甚至文字像是刻在石头上一般. 如果你已经完成了第一个文字效果,那么接下来的内容对你是相当简单的. 1.首先输入文字,颜色填充为较背景更深的颜色,例子中为#4e3400 2.添加"内阴影"样式,设置如下图: 3.添加"斜面和浮雕"样式,设置如下: 作品完成. 该效果需注意: 字体颜色选择与背景色要搭配 第2部的内阴影设置时,"大小"与"距离"可以根据你的文字大小来调整 添加内斜面只为增强白色的光照效果,可以选择不加 接下来看一些使用"凹陷"效果的网站设计: 额外赠送 在这里推荐一个下载英文字体很好的网站,而且是全免费的:www.dafont.com. 同时也在最后说明一下,虽然字体的效果可以有很多种,但是也要注意使用的场合,不是什么地方,什么类型的网站都适合我上面介绍的方法.有时候就是不加修饰的字体,也可以做出很好的效果. http://www.ediyang.com/photoshop-text-effect-skills/ 在网页设计中细节的处理十分重要，我个人也经常观摩外国佬的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单，但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。 并且你会留意到这些技巧都围绕一个词，就是“像素化”，简单地说就是一些1px，2px的小线。 好吧，我们开始。 1.像素分隔线 第一个介绍的是分隔线，请看下图，为Pixel2Life.com的导航栏。 留意图中红圈圈中的线已经按钮之间的分隔线，这些线看起来有一种凹进去的感觉，形成一种很好的分隔线的感觉。接下来我把这张图放大，我们看看其中原理。 上图放大300%效果 我们可以看到这些分隔线，都是有2条相邻的1px直线构成的，并且一条颜色较背景色更深，一条较浅。接下来，看方法： 选取铅笔工具（不要选错为画笔）,大小调为1px 选取一个较背景色更深的颜色，如图中的深蓝色，按住Shift画出一条直线 选取一个较浅的颜色，再画一条直线。OK PS.画线过程可以放大画布（Z）以便观察。 怎么样，效果比单色的分隔线要好很多吧？接下来再看一些使用这个分隔线技巧的例子： clearspring.com tutorial9 2.像素边缘 首先我们看一张没有加“像素边缘”的原图： 接下来是加上后的： 看出来区别了吗？没关系，接下来请看放大下的图片： 可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇，而有一种灯光反射（高亮）的效果。使得白色块的边缘更加突出。 而方法跟第1个技巧是一样的，就是用铅笔工具画1px的线。需要注意颜色的选择，一般选择比背景色更浅的颜色，才能制造高亮的效果。 3.像素阴影 这是3个技巧里面最容易实现的，但它一样特别实用，甚至经常会用到。照例我们先看图片： 可以看出在有阴影下，文字立体感得到加强，特别在文字的背景较复杂，比较多噪点时使用该技巧会使文件比较突出。 而加上阴影方法很简单，只需双击图层名称，添加“投影”的图层样式。然后按下图设置参数： 也就是把距离与大小调为“1”。 接下来我们看看一些使用该技巧的例子： 总结一下 以上这些技巧都是我自己看来学来的，在这里希望需要的人可以学会它。这些1px的线很多人会说，用户根本就不会去注意，就是瞪大眼都看不到。是的，这的确没错。但是我认识很多好的设计，能经得时间与多人的考验，那都是很多细节来构成的。这些细节尽管你觉得看不到，但是它却为成功的设计打下坚实的基础。 http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/ 半个月前我向大家介绍过Asaph这个很不错的微型图片博客系统.但是如大多数人一样,我们使用的主要发布平台,还是Wordpress,我们希望将Asaph整合到Wordpress中,这是一种很好的取长补短的方法. 如果你看过我之前介绍Asaph的文章,你应该明白Asaph是一个图片搜集博客,而我们之前看到过很多博客(多数为外国),喜欢将Flickr的图片整合到WordPress之中,并展示在边栏或是底部.那么今天,我会教大家如何将已经生成的Asaph图片数据展示在WordPress之中.也正如你现在看到的本网站的右边栏下方的"picture wall"vikiworks边栏一样的图片秀. 看前须知 Asaph不是一个wordpress插件,而是一个独立的博客系统 确保你已经安装好Asaph,否则请看该文 我们开始 其实接下来很简单,之需要一个步骤,就是复制下面的代码,放到你的WordPress主题下的sidebar.php(或是其他你要显示的地方). <?php // Get RSS Feed include_once(ABSPATH . WPINC . '/rss.php'); $rss = fetch_rss('your-asaph-feed'); $maxitems = 24; $items = array_slice($rss->items, 0, $maxitems); ?> <ul> <?php if (empty($items)) echo ‘<li>No items</li>’; else foreach ( $items as $item ) : ?> <li><a href=’<?php echo $item['link']; ?>’> <?php echo $item['description']; ?></a></li> <?php endforeach; ?> </ul> 请留意代码中的注释部分需要自行修改,也就是自己的feed地址以及显示的图片数量. 在将代码复制到模版文件中之后,如果一切顺利,那么你将会看到9张图片了,至于说大小问题,你需要在CSS中定义width:80px之类的.详细的可以用Firebug来查看我的CSS. 在这里,首先要感觉Asaph作者,再者感谢vikiworks的yichi大哥的文章.才让你我有机会认识与使用到如此优秀的功能. 同时我也留意到一些朋友在安装Asaph过程中无法成功,而大多数应属于服务器无法支持的原因.如果你遇到问题了或是你知道这其中的原因.麻烦请到下方留言. http://www.ediyang.com/how-to-creat-image-roll-in-wordpress-use-asaph/ 我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat. 而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>. 看Demo 原理 这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜. 使用方法 1.在这里下载DD_belatedPNG.js文件. 2.在网页中引用,如下: <!--[if IE 6]> <script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script> <script type="text/javascript"><! <! /* EXAMPLE */ DD_belatedPNG.fix('.png_bg'); /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/ // --> 3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名. 使用a:hover请留意 5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以"a:hover"来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码: <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG.js" ></script> <script type="text/javascript"> DD_belatedPNG.fix('.trans,.box a:hover'); </script> <![endif]--> 其他方案 在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好 Unit PNG Fix ie7-js IE PNG Fix 最近我还发现一些很不错很好玩的jQuery插件,接下来也会陆续介绍给大家使用. http://www.ediyang.com/dd_belatedpng-best-way-support-ie6-png/ 前阵子在vikiworks那里看到yichi介绍用Asaph建设一个自己的FFFFound,也就是一个图片搜集博客.所以我试了一下,觉得很好玩,在这里特地推荐给大家. 是什么啊? 你可以先看看我的图片博客.Asaph根据官方介绍:它是一个用来搜集外部链接及图片的微型博客系统.允许你在任何其他网站来发布你要的图片或是链接. 我个人认为最特别的地方,就是Asaph有发布文章的Bookmarklet,无论我在任何页面,只要点一下Bookmarklet,再选择要发布的图片,再点确定,就完成了整个发布文章的过程.看下图 怎么安装呢? 5-1号更新:安装之前请确保满足以下条件: 服务器是PHP5以上并装有GD-lib或者开启了allow_url_fopen 使用现代浏览器(非IE) 在上传完全部文件后,确保data/ 文件夹是"可写"的 如果不知道怎么看服务器的php版本,请下载php探针,上传到服务器后运行探针查看即可. 下载压缩包,解压放上服务器(需要php支持).接着需要修改lib/asaph_config.class.php 这个文件中的$domain, $absolutePath 与 $db这三个项目.接着在浏览器打开目录下的admin/install.php进行安装.装过Wordpress想必没有问题了. 怎么使用? 如图所示,在后台管理左侧,用鼠标将bookmarklet下的ASAPH拉到你的书签栏,或是加入书签.接着你可以去flickr等图片网站, 看到喜欢的眼睛发亮的图片,就点一下那个书签.OK,懂了吧?(最好使用现代浏览器,不要使用IE) 总结 Asaph的作者也说明了,这个博客系统就是这么简单,简单到后台只有几个按钮.而这就是他做这个系统的目标.Asaph也很好的完成了他的工作.在我看来,用来制作这种图片搜集博客,Asaph真的是很好用,很容易用.所以喜欢的朋友赶紧试试吧. 最后大家可以看看我自己建的Asaph博客 www.ediyang.com/fave 我也要试试 发布页面 下载地址(v1.0) http://www.ediyang.com/asaph-introduction/