先来看一张图片。

line

这是从我的博客上截取下来的图片，注意“已有1条评论”旁边的那条线，它很好的起到了划分文章标题和内容的作用，那么这条线是如何产生的呢？查看代码后我们会发现，它实际上只是评论部分的一个下边框而已，那么如何实现这样的效果呢？其实很简单。

首先我们需要使用php语句调用评论和评论链接，并且为了样式化评论，我们给它加上<p  class=”comments”>标签，那么php语句应该是这样的：

<p class=”comments”>
<a href=”<?php comments_link(); ?>”>
<?php comments_number(‘without comments’,'with one comment’,'with % comments’); ?>
</a>
</p>

<a href=”<?php comments_link(); ?>”></a>这行代码是用来调用评论的链接的，当你点击评论时，会打开一个页面显示当前文章下面的所有评论。

之后就可以对评论进行样式化了，我们所要做的就是给评论下方加上边框线并把它放在合适的位置。首先给评论加上下划线

.comments{
        border-bottom:#bbb 1px solid;
}

效果如图：

comments1

之后需要将边框线向右移动，为了实现这样的目标，我们对<a>标签进行样式化，加上这样的语句：

.comments a{
        padding:0 7px 5px 0;
}

padding属性设置了文字和边框之间产生7个像素的距离，这也就实现了我们想要的效果。是不是很简单？

分享到：