啄米鸟的blog

表单对齐兼容方法

啄米鸟 — Wed, 01 Sep 2010 02:40:01 +0000

这里有必要设置tahoma字体，不过tahoma在IE6下无法设置13px的字体大小。

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

平面什么的最讨厌了

啄米鸟 — Wed, 11 Aug 2010 10:21:38 +0000

css sprites之img sprites

啄米鸟 — Wed, 05 May 2010 09:16:46 +0000

最先听到img sprites这个词汇是在D2上，口碑网的工程师提出这样一个理论：
在浏览器渲染的过程中，img是顺序加载的，而background是最后加载的，所以会导致背景载入延迟，给用户的体验不好。
于是他想了个办法，把logo加入css sprites的图片，然后用img来引用它，用position的方法来定位。从而让这张图片事先加载，解决背景载入延迟问题。
事实上我在以前就看到过这样的案例，google地图的tips就是用这个方法。
不过现在口碑网并不使用这个方法，口碑的logo也换成了独立的了，据说在圈子里说这个方法鸡肋。
我认为可能性大概有如下几点：
1.图片预加载，不过图片巨大，会影响整个网页的加载进度。
2.当用户用右键另存为的方法存取口碑的logo时，存下来的却是整张背景。

另外在ico css sprites中有种方法是：
使用透明的img来当做容器，使用css sprites来定位图案，生成一个img的ico，这样的好处是减少了http请求，而img在布局中非常容易控制。
大家知道，ico可能会存在任何地方，比如一个高30px的title，比如一个高20的list，甚至可以存在于一段文字当中，如此多变的情况，也只有给图案一个独立容器来的保险。

css sprites之布局排法

啄米鸟 — Wed, 05 May 2010 08:50:09 +0000

在使用css sprites技术的时候，图案的排法是根据设计稿来设定的。
设计搞意味着你的图案如何留出所需的空隙。
如图，我们还是用网易的图片

大家可能看出了，网易这里图标之间的空隙并不是没有道理的，因为设计稿中设定了这么大的间隙。
另外，如果这里你给图标一个额外的容器来陈放，那么你也可以使用紧凑型来布局，当然这样做并不语义，而且增加了标签。

从淘宝、网易的图片可以看出，一般列表符号都放在最右侧，例如网易的新闻列表连接。

事实上一张css sprites制作的图片，四个边都是很重要的位置，特别是左右两侧，例如图案在图片的右侧，那么你的容器可以把图案放在容器左侧，右侧则可以无限延伸，反之亦然，当然这里背景是不能循环的，否则在图片左侧的图案会跑到容器上去。

这就是为什么前面看到qzone的ico图片是竖排的，因为ico右侧往往会跟上文字，这样右侧可以无限延伸的优势就可以体现出来了。

css sprites基础指南(二)

啄米鸟 — Wed, 05 May 2010 01:31:36 +0000

在网页中，背景循环可分为四类:
1.横向循环
2.纵向循环
3.横纵向循环
4.不循环
一般在css sprites中，横纵向循环的背景是不存在的，更多的是使用不循环或者单向循环。
另外，在一张css sprites的拼合图片中，一般只能存在横向循环或者只能存在纵向循环，也就是说，纵向循环和横向循环在css sprites中是不能在一起出现的。

css sprites的思想很简单：
利用background获取容器背景，并在指定容器中显示，利用background-position来指定背景上的图案。
原理如图：

图片出自网易

如图，你必须创建一个容器，显然，这个容器的大小不得超过图案边缘的空白处，否则就会出现别的图案。
这里图案离图片的左边距和上边距是你用来定位图片background-position的参数。
这里要达到图片上容器中的效果，定位参数为:background-position:-3px -131px;
当然，你也得加入容器的大小，容器为block元素，大小也可以根据父层来定，总之，容器大小不可超过它所取图案的周边极限大小如图。

在css sprites中，极限宽度是根据图案的布局来设定的，一般情况下，容器的极限宽度是根据图案和它的上下左右其他图案的边距来指定。
如果图案某侧是图片的边缘，而不存在任何其他图案，那么容器将可以由此无限延伸，如果图案两侧都没有图案，则这块背景就可以循环了，上下没有图案则是纵向循环，左右没有图案则是横向循环。
很常见的就是某个背景横向循环，不过在css sprites中，你的循环背景必须填满整个宽度或者高度，并不是以前常用的1px，如图。

我写了一个关于css sprites的demo，你可以微调各项参数来看容器和背景图的变化。css sprites demo

css sprites基础指南(一)

啄米鸟 — Tue, 04 May 2010 10:03:49 +0000

关于css sprites大家并不陌生，把多张小图拼凑到一张大图里，从而减少页面的http请求数，提高网站性能的一门技术。
以前有同学说，css sprites是鸡肋，因为图片是拥有缓存的，所以对性能并不会产生多大影响。
我认为当服务器是通过cdn来连接的话，那么的网页每个http请求都将通过cdn服务器来转发，这样将会增加cdn服务器的负担，相对的判断一个图片版本是否和缓存文件版本统一也是要通过cdn服务器的，当然这只是很小的一部分好处，减少HTTP请求是最直接的提高网站性能的方法之一了。
css sprites的功能显而易见，不过它的维护难度让许多同学望而生畏，当然这也是仁者见仁智者见智，不予深论。
css sprites的图片我姑且就分为三类。
一、背景型
这类图片里面大多都是背景，常常出现在页首，页尾的统一样式中，在三种类型中也最为广泛，排法也五花八门。

图片出自淘宝

二、图标型
这类图片全由图标组成，常常出现在一些强交互型网站，他们可能会有几十甚至上百个ico。

图片出自qzone
三、文字型
一些设计师经常会使用一些非系统字体来作为title文字，这会给前端增加不少工作量，不过聪明的前端们把他们都放在了一起，从而维护更加简单，新浪是典型案例。

图片出自sina

可以发现以上三个网站的图片排法都有各自的风格，淘宝紧凑，qq中庸，新浪分散。
如何排列图片成为了许多新手的困扰，紧凑显然可以减少一些图片大小，不过这个量微乎其微，分散可以提高维护性，但体现在哪里呢？
下章我将从css sprites的基础开始说起。

ui练习

啄米鸟 — Tue, 04 May 2010 09:28:49 +0000

这次主要是针对一些质感的练习。
工具还是最熟悉的fireworks，其中渐变过渡用的是混合图层，不知道为什么我的CS3混合图层有bug，所以用了BUG更多的CS4，不过起码混合图层的BUG修复了。
据说cs5修复了cs4 900+bug，真恐怖啊，cs4到底是谁开发的。。。

一些新手常犯的CSS误区

啄米鸟 — Wed, 03 Feb 2010 04:32:08 +0000

1.居中写入text-algin:center;然后在内部容器再设置text-algin:left;
这个方法我在禅意花园中见过，作者明确了这个方法是作为解决IE5.5的居中问题而存在的，但现在IE5.5的占有率几乎没有，更何况你能确保你的网站在IE5.5下能正常浏览么？如果你是保守的，那加上吧，不过你必须测试IE5.5，否则会有种画蛇添足的感觉。
2.body中写入width:xxxpx; margin:0 auto;居中。
这样写，可能是为了减少嵌套，写在BODY中让页面居中，但弊端仍旧很大，有些情况下，需求会在页面上端或者下端加入通栏的工具栏（例如Qzone），如果在body中设定了宽度，那么在IE6中通栏的width:100%会只有你设置的宽度那么宽。
3.在css reset的body,input,ul,等标签集中写入字体
在这里写入字体大小，那么它将全局定义这些标签，也就是说，当你想定义一个title中的文字大小，那么你必须顾及到title h3{} title span{}等，必须写全，而写在title中的继承权限是没有reset中定义标签权限高的。
4.在css reset的body,input,ul,等标签集中写入border:0
虽然在img中使用了border:0可以使它在连接中没有边框，而在input中设置了border:0，那么，默认button会从一个按钮变成一个平板，text会没有border ，这些重设都是弊大于利的。

飞机稿

啄米鸟 — Fri, 29 Jan 2010 07:46:34 +0000

自己喜欢的一般都无法通过，偶尔飞机下有益身心健康，看来我不适合做设计。

google使用的png-8 alpha透明

啄米鸟 — Mon, 04 Jan 2010 00:24:43 +0000

今天是牛顿的诞辰，google特意做了个苹果掉下来的动画。
这个苹果是透明的，而且带有alpha透明，不过在IE6下带有毛边，显然是使用了FW的png-8 alpha透明导出模式。
就此保存下来，的确有些地方可以无视IE6的这么点毛边了。

查看demo:http://blog.dmtuan.com/demo/google_png8/Google.htm

IE中input上下1px边距解决方法

啄米鸟 — Thu, 24 Dec 2009 09:19:33 +0000

问题如下

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

解决方法是给input加上浮动。

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

D2前端技术论坛纪实

啄米鸟 — Mon, 21 Dec 2009 05:52:29 +0000

2009年12月19日，这天真够冷的，所以来到阿里巴巴很鸡东，让我印象最深的是那停车场，一个卡车头在外面悬挂着，建筑都是很具有艺术感的设计。
“会场不能开空调”，这句话如同天雷般打到了来自深圳、广东等南方城市的同学身上，鲲哥甚至是抖着讲完的。
伴随着《The Wrong Hole》神曲，D2论坛开始。
具体内容还是等视频吧，总的来说感觉都把前端提升了一个层次，特别是百度的金大为，甚至把模板也带入到了前端的范畴里了，这种匪夷所思的思想虽然可以更好的融合项目，但是再这样下去是不是会表现为所有工作都在前端解决呢？金大为说：只要是肉眼无法分辨的性能问题，都可以无视的，不知道他跟讲述性能的鄢学鵾会不会吵起来。
个人感觉克军的PPT是第二漂亮的，第一的当然是腾讯的，我怀疑他们特地请了个UI来制作那套PPT。YUI3的在YUI2上的确是一个重大的突破，以前YUI2时代会引用一大堆js文件，而现在只需要use某个模块即可异步加载，至于性能方面我认为像yahoo这样的大牛应该会不断的测试和优化，我觉得YUI3还是不错的，毕竟base就26K。
在鲲哥口中的说法，研发SilverlightQQ的时候，使用Silverlight来开发QQ并不是他所期望的，大多是上层的决定，尽管他的导师是开发Silverlight的大牛，他也还是在SilverlightQQ中用了一些flash技术，可见Silverlight目前为止并未多少成熟。
明城这次丢脸丢大了，带着apple上去演讲，结果在演讲中穿帮了，他并不会缩放屏幕，在人间网一些人说他土鳖，其实明城的安全技术还是很强的，呵呵。
鄢学鵾(这个名字好难写啊)，他提出了一套口碑自己新颖的开发流程，把以前许多繁杂的压缩、合并、上传、版本注释等工序都用一行命令来解决，果然是马总的下属，真正的学会了偷懒。
最后的分享中一个(名字忘记了)介绍了他开发的antku.com快速开发平台，不过我认为这东西虽然能减少开发人员的工作，但在后期维护性欠佳，最终代码出现了很多不知所云的垃圾代码，还出现了table的布局格式，貌似实用性不佳。
阿里日本站的阿花让我们见识了阿里如何蹂躏自己的员工并派遣去蹂躏日本员工的惨剧，群众纷纷表示坚决不去阿里日本站。
最后终于见到了hax大牛，就是炮轰js征途的那位传说中的人物，有幸能一睹容颜，虽然有人提出想他PK，但是他的风度还是没有失去。
这次运气比较好，能被抽到赠书，但杯具的是当我上去的时候就剩3本书和一些T恤了，前面好书都被挖走，无奈只能随选了本最厚的Dojo权威指南，以前还是玩过这套JS框架的，我是不常看书的，不过看到中间有句话：Dojo不仅是一个JavaScript工具箱，而且是一个真正的JavaScript工具箱。我彻底内牛满面，看来我的确不适合读书，谁帮忙解释下这句话啥意思。

CSS+(x)html从初学者到职业人的脱变

啄米鸟 — Fri, 18 Dec 2009 02:13:07 +0000

我总结了下，在书写css+(x)html中，从门外汉到初学者要经过三个过程。
1.能脱离DreamWeaver设计视图，手写代码。(无视浏览器兼容，HTML无语意)
2.使用hack兼容各浏览器（HTML无语意）。
3.精通web标准，精通各浏览器之间的差异，书写符合标准的HTML，尽量避免hack的使用（PS:我一般只写IE6的hack并且是它的缺陷造成的问题例如：PNG、最小高度/宽度）。
能达到第三点，恭喜你，你已经成为了一个初学者，你能书写一个完整且标准、兼容的html。
但以上远远不够。

想要作为合格的webrebuilder职业人，你必须要有一个脱变的大脑，为自己写的每一行代码负责，在看到效果图的时候就应该明白，什么地方是可以重用的，什么地方应该做等高特效，什么地方需要扩展，而不是仅仅实现效果图的样子就完事了。
我总结了以下几点：
1.效率的页面。
初学者在切页面的时候并没有考虑页面效率。在压缩页面图片大小的同时，Yslow也提出了一系列要注意的优化方案。
这里需要注意几点：
·图片优化，在图片优化中，单一背景用png-8，照片类用jpge，要学会锻炼如何判断图片该如何压缩的能力。
·减少http请求，背景使用css sprites做成一张图片，这样能减少巨大的请求量，但对于如何合理的布局，划分类型这里要走的路还很长。
·把script放在页面尾部，懂得表现与逻辑分离，html文档中不能存在类似sltyle=,onclick=这样的语句，所有事件都使用侦听来做，这样能让内容更快的出现在用户面前，同时更利于维护。
2.周全的考虑。
昨天在CSS群里出了道简单的图文混排的题目，却发现许多人都没有考虑到位，一个简单题目就可以看出他的经验了。
题目如下：

起先我并没有说需求，但几乎所有人都只是简单的进行浮动，定宽。
这个题目考点在于，表现的扩展。
这个图文混排类似评论模块。
一个好的CSS应该达到以下效果：
1.右侧文字自适应宽度，宽度由祖先级宽度制定。
2.左侧的图片应考虑到没有图片的情况、图片缩小的情况。
3.解决长字符英文串不换行的问题。
达到以上三点才是这题的满分卷。
许多人都在IE6的3PX bug中踩了陷阱，（图片右侧的文字和下面的文字没有对齐）。

这里放我的答案，请先自己练习一遍再看答案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>从初学者到职业人的脱变</title> <style type="text/css"> /*css reset正规写法并不是这样，这里只是演示*/ * { margin:0; padding:0; } ul { list-style:none; } body{font-size:12px; font-family:Tahoma;} /*css*/ .list li{overflow:hidden; zoom:1; padding-bottom:10px;} .box{width:450px; margin:30px;}/*这里宽度不定*/ .img{float:left; background:#000; color:#fff; margin-right:5px; _margin-right:2px;}/*这里的hack是针对IE6的3px bug*/ .big{width:50px; height:50px;} .small{width:30px; height:30px;} .none{display:none;} .content{overflow:hidden; zoom:1;word-wrap:break-word;}/*前面有篇博文是关于word-wrap:break-word;的，可以翻阅。*/ </style> </head> <body> <div class="box"> <ul class="list"> <li> <div class="img big">img</div> <div class="content">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div> </li> <li> <div class="img small">img</div> <div class="content">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div> </li> <li> <div class="img big">img</div> <div class="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> </li> <li> <div class="img none">img</div> <div class="content">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div> </li> </ul> </div> </body> </html>

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

收到D2的邀请函，开始脱变·成长

啄米鸟 — Tue, 15 Dec 2009 01:06:23 +0000

工作算上实习已经有2年了，从一个连HTML都不懂的毕业生，到狂妄之极的半桶水，再到接受业界洗礼的挫折，再次觉悟走向WEB标准与前段之路。
我不断的脱变，不断的成长。
这次D2在杭州召开，好不容易有个机会可以融入到业界顶级的技术交流之中，回想走过的漫漫路程是艰辛的，是坎坷的，我深刻的明白我要走的路还很漫长。

fireworks于photoshop的图片优化比较。

啄米鸟 — Fri, 11 Dec 2009 03:47:19 +0000

原文：http://www.webdesignerwall.com/general/fireworks-vs-photoshop-compression/
谢谢翻译不羁虫

Fireworks vs Photoshop Compression
Fireworks 与photoshop的图片优化能力比较

Surprisingly enough, based on the findings from my recent survey there are quite a bit of Fireworks users. Personally, I never used Fireworks. Photoshop is alway my first choice for designing—from image editing to designing mock-ups. But, did you know that Fireworks is way better than Photoshop in term of image compression? I’m not a software engineer, I can’t explain why Fireworks can compress better. But I can prove it to you by showing a series of experiments I did.
简单说作者是一直坚持用photoshop的，无论做网页设计还是图片优化都是如此，但作者经实验实际发现fireworks在图片优化上有很好的性能

PNG Compression
以PNG格式优化输出的比较
For testing purpose, I used an un-compressed image with transparency. I used Photoshop to export the image to PNG-24 with transparency and the resulting file size is about 352 kb. Then I used the same image and exported it to PNG-32 with Fireworks. The file size is about 332 kb. Visually, they both look the same (at least to me). In term of file size, the image exported with Fireworks is about 20 kb less.

如下图效果：photoshop以png24格式输出，fireworks以png32输出，（不羁虫：个人认为这2个格式在2个软件里输出格式名称不同，实际是相同的，我把ps导出的png24格式拖到fs里打开就是png32格式，而fs里还有一个png24格式输出，个人感觉fs里的png24就是优化质量100%的jpg）实际得出fireworks得到的图片尺寸比photoshop要小20kb（不羁虫：应该说图片的品质是一样的，我是没看出差别来）

GIF Compression
以GIF格式优化输出的比较
Next I exported the image to GIF 256 colors, adaptive, with no dither. The results are: Fireworks = 88kb, Photoshop = 92kb. That is 4 kb less. Also, they don’t look the same. I prefer the image exported with Fireworks because it has more image details.
如下面图所示，这次以gif256色导出图片，结果fireworks88kb，photoshop92kb，从尺寸上来看只相差4k而已，但是从导出的图片细节来看，fireworks导出的图片细节更多，看上去效果更好

JPG Compression
以JPG 格式优化输出的比较
Now, I’m going to try the JPG compression with a different image. I exported the image with Photoshop to 60% quality JPG and the file size is 80 kb. Then I exported the same image with Fireworks to 80% quality JPG and the result is 72 kb. Both exported images look pretty much the same, but Fireworks beats Photoshop by 8 kb in this case.
如下图：最后是以jpg格式输出的比较，在photoshop以品质60%导出，fireworks下以品质80%导出，（不羁虫：作者的体会和我一样，这2个软件导出品质不同，ps里的60%效果相当于fs里的80%），图片看上去效果差不多，不过尺寸上还是fireworks胜出，fs72kb,ps80kb。

Please note: Fireworks and Photoshop have different compression technology. 80% compression rate in Fireworks is relevant to Photoshop 60% compression rate.

What Is The Big Deal?
有什么大问题？
You’re probably thinking: what is the big deal? It is only a few kilobytes… Well, don’t under estimate the little difference in kilobytes, it can make a big difference on your bandwidth and load time. Lets use the background image on WebDesignerWall as an example. If I export the background with Fireworks, I can reduce its file size by 20 kb. I get about 16,000 visits per day on average. 20 kb x 16, 000 = 320, 000 kb. Yes, that is 320 megabytes per day! I’m only talking about the background image here. Could you imagine how much bandwidth I can save if I compress all the graphics on the site with Fireworks? Most importantly, I can make my site load faster and that is a big deal!
这段想法是比较深远滴，我就半参着自己的想法讲了：可能从优化上来讲，从上面的实验我们可以看到，一个图片优化下来想得到同样效果的图片，ps和fs虽然只差3，5k（视图片尺寸和格式，尺寸越大的图片，这个差距应该是越大），但如果整站下来，你会发现，fs优化后得出的图片尺寸整体要比ps要小很多，而从单个图片来看，如果一个图片能小20kb，而你的网站每天的访问量如果是1万6，那网站所要承担的流量差距是：20k*16000=320m，而从用户体验上来讲，更快的下载将给浏览者带来更好更快的加载效果，更好的用户体验，这是个很大的问题！

Conclusion
结论：
If you have Photoshop and Fireworks installed on your computer, try it yourself. You will be surpised with the results. From now on, I’m going to use Fireworks to export my web graphics, particularly the template graphics.
不用说了，如果你还在使用ps优化网页图片的话，赶紧换用fireworks吧，ps不是万能的，用fs优化图片的、将得到更好的效果，而且优化图片的方式你会发现ps的切片将会让你的优化操作更快更准确

最后，我觉得很讽刺也比较可笑的是：
我想作为大多数fs用户着来讲，很多还和我一样，停留在使用fireworks8的阶段，
对adobe这几年对fs的更新实在是很失望，
cs3,cs4里实在是没有太多有用的东西，
除了添加了不能兼容的ps图层效果和一些莫名其妙的多页面导出方式之外，
真没有看到什么有用的更新，
而且安装文件的大小是成倍的往上翻，真是很adobe，
可以说adobe对fs的态度基本是不改进也不丢弃，fs完全处于不死不活的状态，

可是当你真正熟悉fireworks时，你会发现在fs里做个web2.0的按钮是多么的方便快捷，
虽然只是8.0版，2005年上市的软件，但图片的优化能力，现在的ps根本没法比，这确实是个讽刺，
当然使用8.0版还有一个好处，估计adobe是不会来向你收版权费，
呵呵，毕竟fireworks8.0还是属于MacroMedia，没有什么adobe验证措施，
你就是全公司办公人员装了fs8.0，adobe也不会来向你要版权费

希望越来越多的网页前端工作者加入使用fireworks的行列，
当你熟悉他以后，你会发现fireworks才是真正为网页设计及优化而生的软件

怀念下小时候的剪窗花

啄米鸟 — Wed, 09 Dec 2009 04:05:49 +0000

小时候经常玩，而且就算你瞎剪都能漂亮。
http://snowflakes.barkleyus.com/

平面作品——汽车盛典

啄米鸟 — Tue, 08 Dec 2009 03:38:27 +0000

汽车盛典的一则广告，平面总是FW的痛，没办法，这次要用到笔刷，所以只能PS上了。

gov网站——实习生温暖的家

啄米鸟 — Mon, 07 Dec 2009 05:52:44 +0000

我跟一网友聊天，她做的是政府项目，让我调试样式，我发现她的网站只能在IE7下观看，其他浏览器惨不忍睹，于是我问她：
“你们难道不在乎其他浏览器用户嘛？”
“没事的，只要领导一句话，全部改成IE7就可以了”
当时我彻底无语了，这就是传说中GOV的项目网站，真正的饭局上的项目。
今早又碰上了一件很雷的事情，在浏览杭州网的时候，惊人地发现我有史以来见过嵌套最多无效标签的一个网页。
整整40层center标签，那是多么壮观的画面那，有幸能一截盛况。

悼念洛克MM(RockHward)陨落

啄米鸟 — Mon, 07 Dec 2009 03:47:19 +0000

洛克的性别应该是个男生，但我习惯叫他洛克MM。
QQ头像是个女生的头像，我一开始还真的以为他是个MM。
记得刚工作的时候，为了注册BI的一个账号，到处找邀请码，在最绝望的时候，洛克给我了一个极其珍贵的邀请码(虽然在注册的时候发现原来我以前注册过的)，但还是得谢谢他。
后来才知道他是FW区的斑竹，他写了无数FW教程，令我印象最深的就是青花瓷按钮教程，虽然那时候我说这个按钮有点像舒肤佳，不过那个教程也唤醒了我对FW至死不渝的兴趣。
他写过很多教程，甚至在无意中阅读过，但常常会忽视了作者，就算他已经很努力的打水印了。http://home.blueidea.com/apps.php?do=case&ac=lists&uid=174010
事件源于洛克在水区一次灌水的时候，送上了一张MM生日蛋糕图，虽然那张图让我有种想求片的欲望，不过穿着还是属于正常范围。
至后来洛克被警告后，大肆反驳，认为自己根本没有错，水区图片难道不行么，并且这张图也不违反“不得发布无意义MM图片”的版规之类的说法，闹到后来一气之下直接举报图片。而洛克则被关进小黑屋。
对于我这个经常在MOP混的猫宅，绝对同意洛克的思想，一个没有激情的技术论坛，打破腐朽的思想，改革成艺术于欢乐的走廊，工作之余也不乏笑谈人生，是多么惬意。

链接文字下划线贴住问题研究

啄米鸟 — Thu, 03 Dec 2009 07:17:24 +0000

在使用PS设计的时候，会发现给12px的文字加下划线的时候，下划线会紧紧贴在文字下面，很不美观，FW CS3以下都很漂亮的分离了这两对小冤家。
但在编写页面的时候也会出现这样的情况。
以下是测试结果：

从以上测试看出，当字体为tahoma的时候，下划线却紧紧的粘在了一起，而arial和verdana正常，另外gb2312下的宋体也正常。
其他浏览器我也做了测试，XP中：火狐在任何情况下，下划线均不粘在一起，chrome/opera/safari/ie8(正常渲染模式)，任何情况下均粘在一起。

==============华丽的分割线================

而在VISTA中，问题更加严重，VISTA使用的宋体，让下划线再粘一层。

以上测试均为IE8，vista下IE6/7可以忽略(默认安装的是IE8)，另外，先前测试的chrome/opera/safari表现均和IE8相同。
而火狐表现则稍微好些，另外IE8开启EmulateIE7模式也和火狐一样了。

这时我发现，只要把字体设置为13px，IE8和火狐下的下划线就乖乖的分开了，而chrome之类的也和先前12px的火狐相同，但郁闷的是tahoma在IE6下13PX字体表现为14px的字体。

这里是我用chrome截取的新浪网页（下划线较多），感觉就像字被隐藏了一半似地，很痛苦。

结论：
方法1. 字体使用tahoma 12px，开启IE8的EmulateIE7模式。
优点表单对齐兼容性好，且文本对齐容易控制，空格不会太细。
缺点 IE6/chrome等浏览器下划线贴住，chrome等浏览器在vista下下划线帖掉某些文字最下面一个笔画。

方法2.字体使用arial和verdana 12px，开启IE8的EmulateIE7模式。
优点 IE6/ie7/IE8/FF3表现可接受，只有CHROME等国内不常用的浏览器会贴住，遇到表单对齐时独立定义tahoma字体。

方法3.字体使用字体使用arial和verdana 13px。
优点所有浏览器在XP，VISTA下均不会产生下划线遮住笔画的问题，遇到表单时独立定义tahoma字体。
缺点不能使用12px字体。

滑动门真正的魅力

啄米鸟 — Fri, 27 Nov 2009 06:36:40 +0000

许多人把滑动门当成tab/选项卡，认为滑动门只是简单的鼠标滑过JS切换效果，事实上滑动门是一项基于CSS的自适应技术，它的魅力远比tab/选项卡来的吸引人。

下面是滑动门的演示。

滑动门的原理：

废话不多说，直接上demo，自行领悟。

demo预览

demo打包下载

注意：这样的滑动门好处显而易见，没有无语意空标签，结构清晰，弊端则是无法透明，如果要透明加上一个空标签即可，在demo中制作tips的时候我就用到了这样的技巧。
另外，tips中如果三角在右边则这个标签不得使用float:right;浮动，在IE6中，此元素会跑到屏幕最右侧，所以我使用了定位和right:-10px;来做。

ie打开页面变成下载文件解决方法

啄米鸟 — Mon, 23 Nov 2009 08:50:49 +0000

在访问论坛、提交网页的时候，跳转页面会变成下载页面，不过提交是成功的，但是无法跳转。
解决方法，运行：REGSVR32 MSXML3.DLL

fireworks导出png 8 alpha透明研究

啄米鸟 — Thu, 19 Nov 2009 02:04:05 +0000

fireworks(以下简称fw)是一个切图利器，使用它切图可以很方便的导出想要的图形，大家知道PNG8导出的图片比gif要小，并且用FW切出的png 8比ps还要小，甚至用它设计网页也远比ps方面的多。
在fw中png8的导出属性一般有三种。

首先我们要了解索引色透明是什么。
索引色透明：
一个像素点只有两种属性，一种是全透明，一种色素，如果某色块颜色是色板的颜色，那么这个色块就是全透明的，如果图片存在半透明（alpha透明），那么导出的时候，fw会将色板色和半透明区域叠加，展现出来的颜色加到色块上。
色板默认是画布的颜色（PS是没有画布色的，只有独立的层做背景），画布色一般是白色，所以在fw导出PNG 8的时候常常会遇到白色区域变成透明的情况。
alpha透明：
这个透明模式非常奇怪，他秉承了png32的半透明属性（ps中的png24），又包含了png 8的布尔透明。
众所周知在IE6及以下浏览器中，是不支持png 32的半透明属性的，背景会呈现灰色，在其他现代浏览器中可呈现半透明的效果。
用这个方法导出的png 8，在现代浏览器中呈现的效果与png 32完全一样，同样可以呈现半透明效果。
在ie6及以下浏览器中，半透明的色块被表现成全透明色块，且不会出现灰色背景，但弊端就是不会呈现索引色透明那么自然的过渡，会出现毛边现象。
要注意的是：这里的索引色是透明色块及半透明色块，并不是色板的颜色
令人庆幸的是，alpha透明导出的图片甚至比索引色透明导出的png8还要小，相信png8的alpha透明模式会成为将来IE6淘汰后的主流格式。
当然目前来说作为像素化的图像使用此格式也会大大压缩图片大小。

这里是demo 大家可以用不同浏览器浏览效果

超级无敌各种浏览器css hack

啄米鸟 — Mon, 16 Nov 2009 04:27:05 +0000

^?View Code CSS

.styleName{
color:#FFF;/* FF,OP,IE8 */
[;color:#0F0;]/* Sa,CH */
*color:#FF0;/* IE7 */
_color:#F00;/* IE6 */
}
.styleName{
background-color:#332200;/* FF*/
}
html* .styleName{
background-color:#FF00FF;/* Sa IE7 CH */
}
*+html .styleName{
*background-color:#0000FF;/* IE7 */
}
* html .styleName{
background-color:#00FFFF;/* IE6 */
}
html*~/**/body .styleName{
background-color:#055000;/* IE8 */
}
@media all and(min-width:0){
	.styleName{
		background-color:#FF5500;/* OP */
	}
}

另加一则简化版。同样适用

^?View Code CSS

.styleName{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
	.styleName{
		background-color:#FF5500;/* OP */
	}
}

真爱生命远离hack

IE下边框(border-bottom)消失显示不全解决方法

啄米鸟 — Fri, 13 Nov 2009 02:33:58 +0000

当inline元素加上border的时候，会遇到下边框消失的情况。

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

当使用tahoma字体的时候，IE6上下边框都不见了。

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

解决方法是加上行高line-height

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

拥有自己的css reset

啄米鸟 — Thu, 12 Nov 2009 01:50:50 +0000

yui的css reset很好用，不过对于我来说显得过于臃肿，许多标签都是不常用的，加以修改就可以生成一个精简的属于自己的css reset。

先看yui的css reset

^?View Code CSS

/*归零*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
/*设置表格边框合并,间距归零*/
table { border-collapse:collapse; border-spacing:0; }
/*fieldset,图片边框归零*/
fieldset, img { border:0; }
/*字体样式,粗细统一*/
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
/*取消列表样式*/
ol, ul { list-style:none; }
/*caption,th对齐方式为左对齐*/
caption, th { text-align:left; }
/*统一H标签文字大小,取消加粗效果*/
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
/*取消q标签前后的引号*/
q:before, q:after { content:''; }
/*取消缩写标签的虚线下划线*/
abbr, acronym { border:0; }

既然我们要拥有自己的reset，那么应该根据自己的需求来定义。
首先我们不需要用到blockquote标签，这个标签是引用的作用，默认是会加一个margin属性，达到缩进效果，这个标签我用不到，所以去掉了。
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, th, td { margin:0; padding:0; }

table的reset很好用，必加。
table { border-collapse:collapse; border-spacing:0; }
fieldset的边框是他的特色，我觉得不需要归零，所以去掉了。
img { border:0; }
strong,th默认都是粗体，em是斜体，我觉得没必要统一设置，去掉一些不常用的标签。
caption, cite, code, { font-style:normal; font-weight:normal; }
取消列表样式，必加。
ol, ul { list-style:none; }
关于caption,th的对齐方式，我觉得没必要统一，居中挺好的。
统一h标签为100%，相当于16px，我觉得没必要，取消加粗，也没必要，我觉得H就应该加粗，特殊情况可以后面设置。
q标签表示的是引用，前后会有个引号，不常用的标签。
abbr和acronym标签的语意是缩写，在FF下会有个虚线下划线，html5不支持acronym，留个abbr就够了。
abbr{ border:0; }

这样就生成了自己的css reset

^?View Code CSS

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
img,abbr { border:0; }
caption, cite, code, { font-style:normal; font-weight:normal; }
ol, ul { list-style:none; }

IE6到底支持!important吗

啄米鸟 — Wed, 11 Nov 2009 05:39:28 +0000

!important是CSS1.0的属性，IE6当然是支持的。
但是很多同学被一些没有说明问题的文章误导，认为IE6是不支持!important属性的，而事实并非如此。
以下是IE6支持的情况。

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

以下是IE6不支持的情况

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

可见 写在同一选择器中的!important是不被IE6所认的，而分开情况的则正常

你可能会会略的xhtml中必不可少的属性

啄米鸟 — Wed, 11 Nov 2009 05:28:37 +0000

标记的content属性。

margin:10px;

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

美女时钟3d文字特效

啄米鸟 — Mon, 09 Nov 2009 09:37:06 +0000

是要放到海报上的，大小是6000*6000，用fireworks做的，卡死我了- -！字模是用Xara3D6做的。
具体教程可以搜索fireworks 3d文字，我在蓝色发的帖子，应该有不少转载的。

美女时钟

使用@font-face读取服务器字体文件.eot

啄米鸟 — Mon, 09 Nov 2009 02:56:01 +0000

@font-face可以把字体压缩到服务器，在客户端读取后渲染，从而达到在没有安装字体的客户端也可以浏览到艺术字体的功能。

语法：@font-face { font-family : name ; src : url ( url ) ; sRules }

取值：
name :　字体名称。任何可能的 font-family 属性的值
url ( url ) :　使用绝对或相对 url 地址指定OpenType字体文件
sRules :　样式表定义

需要下载一个软件：
http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm

软件能自动读取html中使用的字体，按照流程就可以生产eot文件和css了。

demo

不过微软的东西只有微软才支持，（他们向来是这样做的），这次也是只有IE才支持。所以还是悲剧吧。

—————–华丽的分割线————————

发现个能兼容主流浏览器的方法：见http://css9.net/css-font-face-solution/

中国式英语翻译（巨雷）

啄米鸟 — Mon, 02 Nov 2009 12:42:06 +0000

我一直对英语很纠结,考二级靠了两次才过,四级直接就不报了,省得浪费钱.现在看到如此高水平的翻译.我悉然了.觉得我的英语水平也没想象中的那么差.至少我不会这样翻译.——–闲云

下面就让你见识一下站在翻译界巅峰的人们是怎么翻译的。

ICBC只为男性服务！啥时候也出个对母业务啊？

中国海事，拼音大王！

干货。注意，“干”读四声……

No May……不作点评

办-公-室。幸亏没像干货那样理解，否则，办…公…开始往耽美方向发展

好吧好吧，我承认，你说的是“中-山西路（middle shanxi）”，不是“中山-西路”

很销魂的翻译

Pissing or shitting……I服了U！

进站口，Jin mouth。不介意的话你们可以翻译成Jin ass。

又来了。Fuck the fruit……

芬达——我很芬芳的到达了
小可乐——（我不知道该怎么说了）small may be happy。知识补充：大可乐是——big may be happy。
小雪碧——这个理解起来有点难度，想来想去搞不懂译者是这么想的。看来我对中国文化了解的还不够深，原来20th solar term——是二十四节气中的“小雪”，加上blue，就是小雪碧了……

金银馒头……果然商人的眼里只有钱！

Last Bridge…是上桥不是上一座桥！！

一次“性”

可以借我个电子词典吗？我想翻译一下四大名著…

下次一定要选个稳定的翻译网站啊，都服务器错误了……

css中的哥德巴赫猜想

啄米鸟 — Mon, 02 Nov 2009 09:47:20 +0000

提出这个问题的是传说中《精通CSS网页布局》的作者朱大师，也是《js征途》的作者。
问题如下，当使用padding和margin制作等高效果时，内容中不得含有锚点，被喻为CSS中的哥德巴赫猜想（他自己说的）。
看demo
当在FF和chrome中点击锚点或者在网址中加入锚点，其他的文字都会往上移，此问题至今没有人解决。

利用tabindex设置tab键跳转焦点的顺序

啄米鸟 — Mon, 02 Nov 2009 09:05:22 +0000

在form中常常会用到使用tab键跳转焦点的情况，一般是按照input和a的顺序依次向下。
但是例如一个用户名的input中间夹入一个注册用户连接，焦点顺序在用户名后就会跑到a上面了，正常的顺序应该是用户名-密码-登陆按钮-注册用户-忘记密码。
这里可以用到tabindex来设置，看demo

type=”image”和type=”submit”的区别

啄米鸟 — Sun, 01 Nov 2009 08:10:45 +0000

最近发现有些网站使用input的type=”image”来作为提交表单的图片按钮。
我并不推荐这样做。
虽然type=”image”和type=”submit”都可以相应回车，并且都能提交。
不过type=”image”的input会提交点击坐标x,y。事实上这个type的发明并不是用在做提交按钮上的，他独特的作用是获取图片上的点击坐标，并且提交。
另外他和type=”submit”是一样的，所以经常会有人问，为什么type=”image”会提交两次，事实上把他当成submit处理就可以了。
我的建议是使用input type=”submit”或者button type=”submit”来做，图片则使用背景，这样可以通过css sprites来减少http请求。
文字则可以用text-indent或者line-height来隐藏。

《超时空效应》观后感，以及关于平行宇宙的推论。

啄米鸟 — Sun, 01 Nov 2009 07:02:31 +0000

看过很多穿越时空的电影，包括《蝴蝶效应》、《回到未来》等都是不错的。
于是我产生了关于平行宇宙时间轴的一些想法。
剧中女探员提到的改变过去，那么将来的时间轴也会改变，甚至现在这个时段已经不存在了。这个思想在《回到未来》中博士的思想是一样的。
但是我并不这样想。
我把4天后的道格所在的平行宇宙称为A宇宙，4天前的称为B宇宙。
A宇宙和B宇宙是有关联的，在剧中说明了这点，应该说A宇宙和B宇宙在正常情况下是平行的。
那么当道格回到了B宇宙，并且改变了B宇宙的一些事情，例如让渡轮不爆炸，这时候就产生了分支，应该说A宇宙中的道格消失了，因为他被传送到了B宇宙并且在车中炸死了，A宇宙还是继续运行的，只是道格死了。
这时候B宇宙因为A宇宙道格的行为，让克莱尔活了下来，并且爱上了B宇宙的自己。A宇宙是悲剧，B宇宙是喜剧。
这本电影没有像《回到未来》那样的时空机器，但我相信，如果有回到未来和过去的机器，那么也只能在当前平行宇宙中进行，只是当你回到过去的那一刹那，你就创造了个一个新的平行宇宙。
其中道格说在克莱尔家中的留言就知道了，事实上克莱尔并没有让对方把话说完，但道格却知道全部留言。
所以A宇宙的道格有可能是C宇宙或者D宇宙回来的，在那些宇宙道格并没有成功阻止渡轮的爆炸，于是让科研小组再让他回到B宇宙。
但是在《黑洞频率》中的剧情显然是很奇怪的，儿子在将来通过电话给父亲指示来改变过去，而当前世界却可以以肉眼看的到得速度变化，难道别人看不到吗，别人的记忆被改变，难道通话的主人翁记忆就不会被改变？
显然《黑洞频率》的思想违背了我的推论，那么他将会出现很多难以让人信服的漏洞。

ip_confirm.exe下载

啄米鸟 — Fri, 30 Oct 2009 08:54:30 +0000

000webhost ip_confirm.exe下载
下载地址

关于X-UA-Compatible

啄米鸟 — Fri, 30 Oct 2009 06:19:42 +0000

目前绝大多数网站都用

来作为IE8的兼容方法，虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。
谁让IE6那么多呢，或许2014年以后我们可以有更多的时间去关心IE8，而不是IE6或者IE7。
在X-UA-Compatible中可用的方法有：

其中最后一行是永远以最新的IE版本模式来显示网页的。

另外加上

而使用，Emulate模式后则更重视

所以目前来说还是以

为首选。

微软自己创下的罪孽让他自己去扫吧。

iframe自适应内容高度

啄米鸟 — Fri, 30 Oct 2009 03:19:50 +0000

先看demo吧。
http://blog.dmtuan.com/demo/iframe/iframe.html
这个js很奇怪，在本地浏览器的时候使用绝对路径会无效，另外在FF3.5下测试为无法使用上级目录”../”否则也为无效。
上传服务器一切正常，所以放心使用。
转自：愚人码头

另外如果iframe牵涉到跨域，那么看支付宝的这篇文章http://ued.alipay.com/?p=707

ie无法显示图片

啄米鸟 — Fri, 30 Oct 2009 02:21:44 +0000

以前碰到过IE无法显示PNG的情况，因为卸载了ADOBE PS后，导致pngfilt.dll文件注册错误，这时运行regsvr32 c:\windows\system32\pngfilt.dll即可解决问题。
这次又碰到一个问题，也是IE无法显示图片，这次是GIF了，GIF是程序批量导出的，但是在IE6下看有灰色的背景，类似PNG32的alpha透明表现形式，其他浏览器显示正常。
GIF在PS中无法打开，显示为无法完成请求，因为文件格式模块不能解析该格式，于是我把文件后缀改成PNG就可以用PS打开了。
另外，大家可能发现一些jpg也可以做成动画，而事实上这个jpg是gif，后缀名不同而已，ps中也无法打开，显示为无法完成请求，因为JPEG标志符段长度太短（该文件可能被截断或不完整)。修改后缀即可打开。

关于网页分辨率——通俗解说

啄米鸟 — Thu, 29 Oct 2009 07:38:09 +0000

许多设计新手都对分辨率有个很模糊的概念，网页分辨率是72，打印分辨率是300之类的，那么到底分辨率是用来干什么的，我在这里简单说明下。

分辨率只是打印的时候需要用到的！当你设计网页的时候，分辨率设置多大都一样，没实际意义。

分辨率的概念相信大家在搜索引擎里都搜过，“一段实际范围中的像素点的多少”。

这里要强调的是：“实际范围”这个概念。

在印刷中，一张A4纸或者16K的纸都是固定的大小，如果你要用位图来印刷，那么你就要按照对方打印设备的打印分辨率来设置图像大小。

你或许会发现，你在PS中修改分辨率的时候，只是机械的修改图像大小而已，这就是印刷推荐矢量图的原因。

你会发现，当你打印950PX宽的网页的时候，页面会变的很小，为什么？因为打印机的分辨率比屏幕要高，打印机是300，而显示器呢?你认为是72吗？

所以这里要明确前面提到的“实际范围”A4 16K纸都是固定大小，那么你的显示器是固定的吗17寸，19寸，22寸？你的显示器分辨率会是固定的吗1024*768，1280*1024 1440*900？当你使用一台19寸宽屏显示器，使用 1680*1050的分辨率的时候，你会发现你的网页变得很小，因为分辨率大了，而你用17寸的CRT，1024*768的分辨率，你会发现网页甚至比那台19寸宽屏还大，因为分辨率小了。那么72网页分辨率又是什么呢，它只针对某个特定大小、特定分辨率的显示器，而其他的你却无法顾及！

总结，当你是做平面印刷设计的时候，使用分辨率和实际单位尺寸结合，你可以确定图像的实际打印出来的大小。但你做网页的时候，宽高单位是像素，你无法控制他呈现在用户面前的实际大小，这时分辨率是毫无意义的，你只需要控制页面的像素宽度950PX、900PX、780PX等。

动漫团论坛悲剧了

啄米鸟 — Tue, 27 Oct 2009 06:51:05 +0000

动漫团以前是7.0的版本。发现始终找不到发帖添加flash的按钮。得知7.1可以添加，兴冲冲的去升级了。发现第一次升级后首页裸奔，无法登陆后台，崩溃。
然后重新安装7.1，发现数据结构不符，只能删了数据库（哭啊，就算备份也用不了啊）。
装好7.1，发现编辑器好大一个flash添加按钮，开始换风格，发现以前的风格因版本问题根本无法导入，继续悲剧。
哎。。DZ啊，你咋能这样呢。

word-break:break-all和word-wrap:break-word该怎么用

啄米鸟 — Tue, 27 Oct 2009 06:44:21 +0000

word-break:break-all和word-wrap:break-word经常用来解决长字符串换行问题。

经过一系列测试后，发现word-break:break-all在IE6/7/chrome/safari为一派，表现为尾部截断，而ff3.0/opera表现为无效。既过长单词换行显示，然后溢出边界。
word-wrap:break-word;在IE6/7/chrome/safari为一派表现为长单词换行，再显示不下才裁切。而ff3.0/opera也表现为无效

显然word-wrap:break-word;要更符合用户体验，word-break:break-all则可以忽略了，外国人不喜欢把英文单词切开来看。而针对于ff3.0和opera则只能用overflow:hidden隐藏了(ff3.5已经支持此属性)。

所以这里建议
word-wrap:break-word;overflow:hidden;width:500px;

如何提升网站的alexa排名

啄米鸟 — Fri, 16 Oct 2009 01:45:27 +0000

alexa排名是比较老的一个网站排名了，中文版可以去http://alexa.chinaz.com/查看自己的网站排名。
动漫团的当日排名达到了20W。

而事实上经过google统计来看，动漫团开张6天来的日均访问在20个IP左右。而alexa上则显示为600个IP。

alexa排名，信的人很信，知道规则的人不屑一顾。

前面我就说过alexa排名在1W以下都可以无视的，事实上只要有50台机器每天访问一次就可以达到2W左右的排名。
当然前提是必须安装alexa工具条，alexa是根据安装alexa工具条的用户比例和访问网站结合来得出访问量的，注意这里的安装alexa工具条的用户就算是相同的局域网IP，alexa也会统计成一个独立IP。

目前安装alexa工具条的用户访问一个网站给其计算的IP量约为180个IP，以次类推，只要4个安装alexa工具条的人访问动漫团，动漫团在alexa就可以达到600IP了。

至于你如果想快速提高，可以找网上专刷排名的人花钱去做，也可以上互刷联盟。但是要有被alexa列为作弊用户的决心哦。

动漫团正式启用二级域名

啄米鸟 — Fri, 16 Oct 2009 01:33:53 +0000

动漫团大家族(空间)
以前的 ~~http://dmtuan.com/home~~ 正式改成
http://u.dmtuan.com/
也可以用http://dmtuan.com/ 直接访问

动漫团论坛(大杂烩)
以前的 ~~http://dmtuan.com/bbs~~ 正式改成
http://bbs.dmtuan.com/

动漫团博客
以前的 ~~http://dmtuan.com/blog~~ 正式改成
http://blog.dmtuan.com/

如何快速制作discuz论坛风格

啄米鸟 — Wed, 14 Oct 2009 01:22:37 +0000

DZ的风格做起来是真够麻烦的，相比之下WP的操作要方便许多了。

DZ的风格CSS是同一合并的，也就是说它本身有独立无法编辑的CSS文件，外加你上传皮肤中的风格CSS，这样才算一个完整的DZ样式表。

DZ的风格CSS是htm格式的，且独立出来的，这导致了你无法在本地直接浏览页面，当你想要测试效果的时候，上传CSS文件后，必须登录到DZ后台在界面-风格里更新CSS文件，再到工具里更新缓存，这样两步才能看到你的更新。

所以我采用的方法是下载一个共享风格，在它的基础上，使用firebug一口气做完一系列修改(firebug可以在任何网页上修改网页元素/css等，当然你必须安装firefox)，这样一口气更新CSS文件，再上传，虽然痛苦了点，但还是大大提高了效率。

动漫团论坛：http://www.dmtuan.com/bbs

让IE6崩溃的一句代码

啄米鸟 — Mon, 12 Oct 2009 06:58:17 +0000

动漫团成立3天的统计数据

啄米鸟 — Mon, 12 Oct 2009 03:36:40 +0000

google统计

3天一共89个访问，1292个PV，还是很可观的，推广的时候被两个群踢了出来，原因是我推广了自己的QQ群(以后推广网站时要多注意啊)。

alexa排名

alexa的排名在10000以下还是很假的，短短3天动漫团的alexa的排名已经达到了28W，日均IP180，PV1W4。

uchome添加webim应用

啄米鸟 — Mon, 12 Oct 2009 03:05:36 +0000

webim可以通过ajax和在线的好友实时聊天，功能强大。

动漫团webim

这里动漫团采用了nextim 注册后获取API，在下载页面下载文件，安装后，会有一步步提示操作。

nextim的整合做的很好，可以获取在线好友、群组信息，网站应用信息。类似人人网的底部工具栏。