在看别人的blog的时，你可能见过有人的模板上评论框做成了气泡形的，就好象这样，并且可以根据留言的多少自动改变大小：
这种样子使整个页面变得活泼，喜欢吗？其实它完全是用CSS+html实现的，做法除了稍有一点点麻烦之外，并不是很难的。下面我来一步步地介绍一下。
首先，这个气泡形是由五个图片搭成的
c_gradient.gif: 这个图形成的是渐变背景，使用时要用上repeat-x,即横向重复，这样才能在留言多的时候整个背景画面一致。
下面这四个图构成四边:
c_topleft.gif
c_topright.gif
c_bottomleft.gif
c_bottomright.gif
先用CSS把这几个图形进行定义：
div.bubblecomments { #这是最下面一层，定义整个bubble的大小，包括留言者的名字宽度也算进去
padding: 10px;
width: 700px;
color:#979797;
}
div.cHolder { #定义留言框的最大宽度，这应该与图片bottomright.gif和toprigh.gif的宽度是一样的。
width: 610px;
}
div.grad {#定义渐变背景的位置
width: auto;
float: left;
background: #FFFFFF url(http://…/c_gradient.gif) bottom left repeat-x;
}
div.cTopLeft {#定义左上边
background: url(http://…/c_topleft.gif) top left no-repeat;
}
div.cTopRight {#定义右上边
width: auto;
background: url(http://…/c_topright.gif) top right no-repeat;
}
div.cBottomRight {#定义右下边
width: auto;
background: url(http://…/c_bottomright.gif) bottom right no-repeat;
}
div.cBottomLeft {#定义左下边
width: auto;
padding: 20px 30px 20px 40px;
background: url(http://…/c_bottomleft.gif) bottom left no-repeat;
overflow: hidden;
}
div.cName {#这里定义留言者的姓名和留言时间，如果他有头像的话就用他的，如果没有，就自己找个小图放上去当背景，好象例子里的小人。
float:left;
text-align: left;
font-size: 11px;
width:70px;
background:url(http://…/user_comment.png) top left no-repeat;
}
div.cName a, a:hover {
font-size: 12px;
}
之后，要到网页里，修改comment部分，把上面定义好的这些层摞一块。在blogbus上就是要重写comment，把下面的代码拷进去就成了。
因为层太多了，我写的时候自己都晕，所以用数字给标标清楚，不至于少掉哪个</div>
专题系列
哈哈。都是牛人，我是没那股劲去搞了。
by 松涛
15 Jun 2006 at 20:27
这个功能好。构成图的制作挺有意思，先做出四个角，再一整和。和我原先想的不太一样。我以为做一个固定的bubble就行了呢，但是那样好像不能自动变化大小。。。
by alice
15 Jun 2006 at 20:47
嗯，如果不能变大小，就显得死板一点。这个做法bubble的最大宽度就是原始图片的宽度，如果嫌不够宽或不够窄，就用PS或什么其它工具接接剪剪就好了。
by 7
16 Jun 2006 at 12:09
不行，得留着智商玩儿..基本上只看得懂序号..
by alice
16 Jun 2006 at 15:43
刚考完试的人不宜看这些，影响食欲。
by Sleepr
21 Jun 2006 at 03:32
“做法除了稍有一点点麻烦之外，并不是很难的”
您真幽默
by puNk!d
21 Jun 2006 at 10:20
@Sleepr: 我觉得确实只是代码复杂了点而已。难度问题…我和Alice hack it的时候那才叫复杂。面对10来个层和CSS代码，自己做层次分析和代码简化。目前这个已经是相对比较容易的了，层次也比较分明了。而且本身就是针对blogbus写的，而不是wordpress，所以移植倒其他博客也并不是件难事。