五、评论框

流言城市这个主题的很多地方都用到了星形的图案,除了页头部分,评论框的设计也用到了这样的图案,作者在这部分对图案的巧妙使用使得评论列表成为这个主题最有特色的部分之一。那么今天我们就来看一下评论框,看看作者是如何使用这些图片得到如此的效果的。

先来看一下评论列表部分的html代码:

<ol>
<li class="ComListLi">
<div class="ComListLiTop">
<big>admin</big>
<small>January 10th, 2009 at 11:07 pm
</ol>

然后给相应的容器应用上背景图片,如下图:

comments

这样就完成评论部分的样式设计,是不是看上去很玄妙,实际上很简单?这其中的关键点在于前期的设计的图片的裁切。所以当你的html和CSS都很熟悉了以后,难点就不在于如何写代码了,而是前期的在photoshop等软件中的创意和设计。

分享到: