html+css制作的只是前台页面
CSS代码
这里重点注意的就是 .ds-avatar 的背景要和页面背景一致，这样就能展示出凹进去的效果。
body {background:#333}
.ds-post-main {position:relative width:500px}
.ds-avatar {position:absolute top:20px width:31px height:31px padding:5px background:#333border-radius:50%}
.ds-avatar a {display:block width:31px height:31px background:#01cc01 border-radius:50%}
.ds-comment-body {margin-left:20pxpadding:10px 10px 10px 30px height:80pxbackground:#01644f}
HTML代码
这是多说留言评论的结构，其实wordpress也可以这样的。
<div class="ds-post-main">
<div class="ds-avatar">
<a href="#nogo" > </a>
</div>
<div class="ds-comment-body"> </div>
</div>
美化留言评论样式
添加质感：这里主要使用CSS3的圆角（border-radius）、阴影（box-shadow）来实现质感
交互设计：达人使用的交互只是一个简单的CSS3旋转动画（transform:rotate），当然可以使用更多的动画效果来，不过不建议搞得过于花哨。
留言板的CSS#in_msg div{} /*留言区*/
#in_msg div.tit{} /*网友留言标题*/
#in_msg table.item{} /*网友留言标题*/
#in_msg td.index{} /*留言序号*/
#in_msg div.user a{} /*留言用户*/
#in_msg div.user a img{} /*用户头像*/
#in_msg td.cnt{} /*留言时间*/
#in_msg div.desc{} /*留言内容*/
主页和个人档案的留言板的CSS
#m_board div.item {} /*留言内容*/
#m_board span.date{} /*留言时间*/
#m_board div.user a{}/*留言用户名*/
#m_board div.user a img{}/*留言用户头像*/
#m_board div.line{}/*分隔线*/
#m_board td.index{} /*留言序号*/
