新系统模板下评论模块（评论列表和评论表格）是与日志内容区域一起被封装起来的，这部分列表的标签结构是固定的，没法像旧模板系统下那样自由定义评论列表和评论表格了。前段时间，JC曾经问过我有没有办法在新系统模板下实现她博客那种评论列表样式（如下图），当时我因为手头上有不少事忙着呢，就没立即去帮她想办法实现。后来我听说apollo为了实现那个效果，竟然用上javascript。

上面这种效果其实不用js来实现也可以的。下面我们先来分析下新模板系统下评论列表的代码结构：

左边是代码结构示意，右边是一种简单的评论列表效果图。上面这种效果用css来处理不是太难，主要就是背景图片的贴合。

.cmtBody { background:#CCD2CB url(http://files.blogbus.com/commentlist2.blogbus.com/files/12086597421.jpg) no-repeat left top; padding-top:15px; }
.menubar { background:#fff url(http://files.blogbus.com/commentlist2.blogbus.com/files/12086597420.jpg) no-repeat left top; padding-top: 25px; }

具体效果可以参考这里：http://commentlist2.blogbus.com/logs/19391886.html

有些时候，我们会见到下面这种样式的评论列表（blogbus中好像还没见到过……）：

我们看到，发表评论人的名字在上面了，这时候，就得用到css中的绝对定位的方法了。我们先要设置li的定位方式为 relative ，然后再设置 .menubar 的定位方式为 absolute （top: 0 ; left: 0 ;）这样就能把 .menubar 提高到 li 的顶部了。当然我们还要设置 li 的padding-top，以便为 .menubar 留下相应的空间。下面是相应的定位代码：

ul#comments li { position: relative; padding-top: 35px; }
ul#comments li .menubar { position: absolute; top: 0;left: 0; }

而接下来就与之前的背景贴合方式一样了，我就不说了，大家自己体会下吧。相应的演示地址：http://commentlist3.blogbus.com/logs/19393266.html 在日志开关中提到的jc那种风格的评论样式，我也做了个大致的模型，有兴趣的可以参看这里：http://commentlist.blogbus.com/logs/17949801.html 与此类似的样式还有：http://commentlist4.blogbus.com/logs/19395357.html (这个效果其实没做好，还有些不理想的地方)