如何用html+css制作一个留言板

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:#333;border-radius:50%;}

.ds-avatar?a?{display:block;?width:31px;?height:31px;?background:#01cc01;?border-radius:50%;}

.ds-comment-body?{margin-left:20px;padding:10px?10px?10px?30px?;height:80px;background:#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），当然可以使用更多的动画效果来，不过不建议搞得过于花哨。