其实，任何支持HTML代码，或者支持图片的地方，都可以加上你的图片签名，如果你要在你的网页中插入图片签名，只需要添加如下代码：

<img src="http://digushow.com/sign/foxling/bbs_sign.png" alt="Foxling's digu" />

其中，foxling改为你的用户名，alt的属性改成你的说明。
如果是要在支持UBB代码的论坛里做签名，使用下面的代码：

[img]http://digushow.com/sign/foxling/bbs_sign.png[/img]

Flash版提供了5种颜色可以选择，不过我都不喜欢，定制性较差~但大多数博客提供商都不支持JS，Flash就是一个不错的选择了。

嘀咕秀JS版

对于众多自建博客来说，JS版应该算是最好的选择了，CSS样式完全自主控制，如果熟悉JS的话，HTML结构也可以由自己定制，JS的链接代码：

<div id="diguShow">正在加载嘀咕...</div>
<script src="http://digushow.com/js/digushow.js" type="text/javascript">
</script><script src="http://digushow.com/api/digushow.jsp?callback=diguShowCallback&username=foxling&count=5" type="text/javascript"></script>

有三个可定义的参数，callback后面会说到，先说后两个参数：
username:嘀咕用户名
count:读取的嘀咕数目

JS加载的效果如下

在PJBlog和WordPress里添加嘀咕秀JS模块

在Wordpress和Pjblog里添加JS模块都是比较简单的，PJ里可以添加模块，写入HTML代码完成，在WordPress里添加也是非常容易，有多种方法：
1.添加到边栏：后台-外观-小工具，添加一个文本工具，然后进行编辑，填入标题，然后把上面的JS代码复制进去，保存即可。
2.添加到内容栏：写一篇新文章，在HTML代码里输入上面的JS代码，然后把文章置顶~
3.添加到自定义位置：修改你的主题里的index.php文件，把JS代码插入到相应的位置。
我是用第2种方法~可以在首页看到我的嘀咕秀模块。

自定义嘀咕秀JS版的CSS样式

嘀咕秀JS版没有自带任何CSS样式，这样嘀友们可以自己无限发挥~~

JS生成的HTML代码格式如下，生成的代码结构比较简单，并且加上了ID，只需要写相应的CSS即可。

<div id="diguShow">
    <ul id="diguShow_List">
        <li>求Window空间，让我挂个东东吧。<a href="http://digu.com/jump?aid=detail&twId=169480" class="diguShow_time">11小时前</a></li>
    </ul>
    <p id="diguShow_More">
        <a target="_blank" href="http://www.digu.com/foxling">进入<strong>FoxLing</strong>的嘀咕主页»</a>
    </p>
</div>

在主题的style.css里写入CSS(我稍微写了一点样式，不过还是按照我博客简洁的风格)，给每条嘀咕加上了一个小icon，显得更有条理点，可以在我的博客看到效果：

/*DiguShow*/
#diguShow_List {list-style:none;margin:10px 0;padding:0;}
#diguShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.diguShow_time {color:#999;}
#diguShow_More {text-align:right;margin:0 0 10px 0;}

加入Loading图标

嘀咕秀是在网页加载完后才会加载JS，这点比较好，不会因为网络的原因导致页面卡住~
在加载的时候，显示：正在加载嘀咕…
可以加入一个Loading图标，这样显得更爽点~
Loading图标生成网站：http://www.ajaxload.info/，提供各种样式的Loading图标，可以自定义前景色和背景色。

将默认代码里的
<div id="diguShow">正在加载嘀咕...</div>
替换成
<div id="diguShow" style="background:url(/wp-content/themes/sandbox/ajax-loader.gif) no-repeat left center;padding:5px 0 5px 20px;">
正在加载嘀咕...
</div>

更强的自定义

如果你对JS比较熟悉，可以完全重写JS回调函数，输出你需要的HTML结构。
嘀咕秀是通过JSONP的方式传入函数名，返回相应的格式，解决跨域问题。
上面提到的callback参数就是处理数据要用到的JS函数名，给函数传递了一个参数，是JSON格式的数据。
服务端传回来的JS代码如下：

diguShowCallback(
{
user:{userId:10013552,
nickname:"FoxLing",
signPicName:"http://121.14.39.139:80/file/10/01/35/52/default/SIGN10013552_24x24.jpg",
homepage:"http:\/\/www.digu.com\/foxling"},
status:[{created_at:"3小时前",
text:"嘀咕",
id:181855,
picPath:[]}]
}
);

写好了JS函数后，将JS代码里的这一句替换成你自己写的JS函数的文件链接：

<script src="http://digushow.com/js/digushow.js" type="text/javascript"></script>

完工！

———–2009-09-08 更新——————————————
嘀咕秀更名为无敌秀，目前可以使用
CSS的ID和Class名有所改动，改动如下：

/*Wudishow*/
#wudiShow_List {list-style:none;margin:10px 0;padding:0;}
#wudiShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.wudiShow_time {color:#999;}
#wudiShow_More {text-align:right;margin:0 0 10px 0;}

如果你还想对无敌秀的JS下刀，可以下载这个地址的js文件进行修改：

http://www.wudishow.com/js/wudishow.source.js

目前可以在我的博客首页右侧栏看到效果。

本站测试结果截图如下：

由于加入了Google统计和Yahoo统计的JS代码，所以Http请求较多，并且，它们的JS代码是没有加上Expires的，所以，在1\3\9\10几个项目中拖下了不少分数~

1.Make fewer HTTP requests / 减少Http请求数

每个CSS，JS，以及各种图片内容，都是会向服务器请求数据的，越来越多的HTTP请求，只会让网页越来越慢~
所以，需要对这些内容进行整合优化，虽然把CSS和JS分门别类地分文件存放是较好维护的，但也要考虑性能问题，所以，尽可能地把相关的CSS文件，JS文件合并成一个文件，当然，并不是所有的CSS、JS全都合并在一起，在维护性和性能中要找一个平衡点~
对于CSS中使用到的背景图片，可以使用CSS Sprite技术，所谓的CSS Sprite就是把小图标合并成一个大的背景文件，通过background-position进行定位，一个网站使用的图标和背景图片可能是十几个或者几十个，通过合并后，可以减少大量的Http请求。
附：Yahoo!的一张背景图

更多CSS Sprite相关：CSS Sprites: Image Slicing’s Kiss of Death
在线CSS Sprite服务：CSS Sprite Generator

2.Use a CDN / 使用CDN

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络”边缘”，使用户可以就近取得所需的内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。
这个不属于前端考虑的问题~更多相关CDN的知识请访问百度百科的词条：CDN

3.Add an Expires header / 为文件头指定Expires

Expires即过期时间，对于长期不需要改动的文件来说，比如CSS，JS，图片，设置一个较长的Expires是再好不过了，这样，访问者不用重复地下载网站上的内容，达到速度优化的目的。
当然，就算你需要修改文件也是可以的，只不过网站上的文件路径可以相应地改改，比如：base.css?t=090827

4.Gzip components / 启用Gzip压缩组件

启用服务器的Gzip组件，使网页内容在压缩之后再传递到客户端，节省流量，当然，这取决于你是否能操作服务器。
关于设置Gzip，可以Google一下：IIS启用Gzip Apache启用Gzip

5.Put CSS at the top / 将Css文件放在最上面

将CSS文件链接放置在head区域，保证CSS在第一时间加载，优化用户体验。

6.Put JS at the bottom / 将Js文件放在最底部

大多数JS都是需要在页面加载完成后才能工作的，所以，将JS放置在页面的最后面，以保证页面能在第一时间加载完；同上，优化用户体验。

7.Avoid CSS expressions / 避免CSS expressions(表达式)

CSS表达式会引起较大的性能问题，避免使用它，就算某些情况在IE6里需要用到它，也应该为IE6单独设置，避免影响到IE7以上版本。

8.Make JS and CSS external / 使用外部引用的Js和Css文件

将JS和CSS做成外部文件链接，这样是可以缓存的，避免每次加载页面的同时都需要加载这些重复的JS和CSS。
当然，某些情况下JS、CSS内嵌也许会更快，还是权衡问题~

9.Reduce DNS lookups / 减少DNS查询

多域名会导致多次DNS解析，比如图片是存放在images.domain.com，当然，分开服务器存放又能减少服务器的压力，如何权衡，总之，这不是前端的范畴了~
见上面本站的测试图，因为有Google统计和Yahoo统计，导致多了5个域名，汗~只得了C。

10.Minify JS / 压缩Js文件

利用功能压缩JS文件，JS压缩工具有：YUI Compressor JSMin
其实CSS也可以被压缩，去掉空白，换行，以及注释，也可以让CSS小不少，YUI Compressor也可以压缩CSS。

11.Avoid redirects / 避免重定向

重定向影响用户体验，当然，也影响了速度~
一个最简单的例子就是，http://foxling.cn应该写成http://foxling.cn/

一种最浪费性能的重定向频繁发生而网络开发者们却往往没有意识到，那就是当地址中应当有一个左斜线（/）却没有的时候。比如，访问http://astrology.yahoo.com/astrology会导致一个301效应并重定向到http://astrology.yahoo.com/astrology/（注意这里加了一个左斜线）。

12.Remove duplicate scripts / 移除重复的脚本

同一页面中重复加载JS，增加了下载时间，脚本被执行了两次。
别做这种粗心的事~

13.Configure ETags / 配置ETags

这也是服务器配置的事
实体标签（ETags）是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制。

<div style="background-color:#ccc; height:100px; width:400px;">
<div style="margin-top:30px; background-color:#900; height:50px;">margin-top:30px; background-color:#900; height:50px;</div>
</div>

你以为会是这样：

结果确是这样：

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。
但是边界的重叠也有例外情况：

• 水平边界永远不会重叠。
• 浮动盒子、绝对定位盒子、内联块盒子、根盒子的边界永不重叠。
• overflow属性不等于visible的元素与它的非浮动子元素之间边界不发生重叠。

常规流中两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。

如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td{
padding: 0;
margin: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

fieldset,img {
border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}

ol,ul {
list-style: none;
}

caption,th {
text-align: left;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}

q:before,q:after {
content:'';
}

abbr,acronym {
border: 0;
}

猛击这个链接看详情：
Google Chrome Browser CSS Selector Support

HTML+CSS代码：

<!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>CSS实现星级评分</title>
<style type="text/css">
ul,li {margin:0; padding:0; list-style:none;}
#star {position:relative;width:95px;height:19px;overflow:hidden;}
#star li {display:inline;}

#star {background:url(images/star.png);}
#star_1,
#star_2,
#star_3,
#star_4,
#star_5,
#current {position:absolute; top:0; left:0; display:block; height:19px; text-indent:-9999px; outline:none;}
#current {background:url(images/star.png) 0 -19px;}
#star_1:hover,
#star_2:hover,
#star_3:hover,
#star_4:hover,
#star_5:hover {background:url(images/star.png) 0 -38px;}
#star_1 {width:20%; z-index:5;}
#star_2 {width:40%; z-index:4;}
#star_3 {width:60%; z-index:3;}
#star_4 {width:80%; z-index:2;}
#star_5 {width:100%; z-index:1;}
</style>
</head>

<body>
<h1>请评分(当前2.5分)：</h1>
<ul id="star">
	<li><a href="#" title="当前得分：2.5分" id="current" style="width:50%;">当前得分：2.5分</a></li>

	<li><a href="#" title="1分" id="star_1">1分</a></li>
	<li><a href="#" title="2分" id="star_2">2分</a></li>
	<li><a href="#" title="3分" id="star_3">3分</a></li>
	<li><a href="#" title="4分" id="star_4">4分</a></li>
	<li><a href="#" title="5分" id="star_5">5分</a></li>
</ul>
</body>

</html>

background-image: w1,…wM, w1,…wM, w1,… /* N values */
background-repeat: x1,…xR, x1,…xR, x1,… /* N values */
background-size: y1,…yS, y1,…yS, y1,… /* N values */
background-position: s1,…rP, s1,…rP,… /* N values */ 

你可以这么写：

background: url(images/multiple_bg.png) left top no-repeat,
url(images/multiple_bg.png) -400px bottom no-repeat,
url(images/multiple_bg.png) -800px top repeat-y;

也可以这么写：

background-image: url(images/multiple_bg.png), url(images/multiple_bg.png), url(images/multiple_bg.png);
background-position: left top, -400px bottom, -800px top;

.btn_default_1 {border:3px double #F90; height:25px;line-height:18px;padding:0 10px;font-size:12px; background-color:#FFF;cursor:pointer;-moz-background-clip:padding;}

在padding:0 10px的情况下，里面硬是多出了1px的白边，真是百思不得其解，Google,Baidu了一下也没找到什么结果….

有空再研究，有朋友知道的请指教啊

background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。

background-clip: [border | padding] [, [border | padding]]
background-origin: [border | padding | content] [, [border | padding | content]]

对于 background-clip：
如果是 padding 值，则 background 忽略 padding边缘，border 是透明的。如果是 border 值，则background 包括 border 区域。如果 background-image 图片有多个，对应的 background-clip 值之间用逗号分隔。

对于 background-origin：
如果是 padding 值，则 position 相对于 padding 边缘（"0 0" 为 padding 边缘的左上角，而 "100% 100%" 为右下角）。如果是 border 值，则意味着相对 border 边缘。而 border 值则相对于内容边缘。与 background-clip 相同，多个值也用逗号分隔。如果 background-clip 是 padding 值，background-origin 是 border 值，并且 background-position 是 "top left"（默认初始值），则背景图左上角将会被截取掉部分。

这两个属性仅从 CSS3 才出现，在未使用该属性 background module 中的默认表现又如何呢？

background-clip 默认类似于 background-clip:border。
background-origin 默认类似于 background-origin:padding。

但 IE 又是特例 （It sucks）。

在 IE6 、IE7 中，一般元素（button 等除外）的背景相当于：background-clip:border; ackground-origin:border;
而 hasLayout 的元素（加上 button 等）的背景则相当于：background-clip:padding; background-origin:padding;

这一对 CSS3 属性已在 Mozilla, Safari 3 和 Konqueror 等浏览器中实现，不过都是通过其私有属性的表达方式。

基本非 IE 的浏览器的私有属性一般都会以 -xxx- 这样开始，-o-就是以 Presto 为引擎的 Opera 私有的、-icab- 是 iCab 私有的，-khtml- 是以 KHTML 为引擎的浏览器（如 Konqueror Safari）、-moz- 就是以 Mozilla 的 Gecko 为引擎的浏览器（如Firefox，Mozilla）、-webkit- 就是以 Webkit 渲染引擎（是 KHTML 的衍生产品）的浏览器（如 Safari、Swift）。

即支持的私有属性分别为：

moz-background-clip
webkit-background-clip
khtml-background-clip
moz-background-origin
webkit-background-origin
khtml-background-origin

恭喜你，你终于碰到了所谓的haslayout问题

何为Haslayout：
　　“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等，这有点类似于一个窗体的概念。

　　微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 layout , 也就是 hasLayout。

　　hasLayout 其实既不是一个属性更不是一个行为，而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念，在这个概念下渲染的元素将具有一种特性。

　　实际上这种渲染特性在有些 HTML 元素中与身俱来，而在另外一些元素中也可以通过一些 CSS 属性将其触发为 true ，且一旦触发将不可逆转。

　　这真是一个伟大的属性，你经常遭遇到的一些浮动问题，滤镜未生效，背景、边框的渲染问题，都是拜他所赐，这个属性还会导致的问题：

Many common IE float bugs.
Boxes themselves treating basic properties differently.
Margin collapsing between a container and its descendants.
Various problems with the construction of lists.
Differences in the positioning of background images.
Differences between browsers when using scripting.

IE 很多常见的浮动 bug 。

• 元素本身对一些基本属性的异常处理问题。
• 容器和其子孙之间的边距重叠(margin collapsing)问题。
• 使用列表时遇到的诸多问题。
• 背景图像的定位偏差问题。
• 使用脚本时遇到的浏览器之间处理不一致的问题。

下列元素默认 hasLayout=true

<table>
<td>
<body>
<img>
<hr />
<input>, <select>, <textarea>, <button>
<iframe>, <embed>, <object>, <applet>
<marquee>

haslayout是不能设置的，只能触发，设置下列属性也会导致 hasLayout=true

position: absolute
Refers to its containing block, and that's where some problems begin.

float: left|right
The float model has a lot of quirks due to some aspects of a layout element.

display: inline-block
Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.

width: any value
This is often an implicit fix, more often the trigger when hasLayout does things wrong.

height: any value
height: 1% is used in the Holly Hack.

zoom: any value (MSDN)
MS proprietary, does not validate. zoom: 1 can be used for debugging.

writing-mode: tb-rl (MSDN)
MS proprietary, does not validate.

inline 元素的特殊情况

width and height trigger hasLayout in IE 5.x and IE 6 in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

ie5.x和 ie 6 quirk 模式中，设置了 width 或者 height 属性的元素 hasLayout=true。ie 6 standards-compliance mode（标准兼容模式）时，设置了 width 或者 height 属性的元素 hasLayout=false

zoom always triggers hasLayout, but it's not supported in IE5.0.

zoom 会导致 hasLayout=true，但 ie 5 不支持该属性。

更详细，更YD的请参阅：http://forest.blogbus.com/logs/2006/04/2340409.html