也可以设置每个模块的图片
.modbox{padding:10px 10px 0 10pxbackground-color:#F5FEECborder-left:1px solid #6AB30Fborder-right:1px solid #6AB30F}——模块内容区主背景颜色：关于我，最新评论，文章列表，好友列表区域背景颜色或图片。
这个是显示在主页的代码
主页留言板代码：
#mod_board div.item {color:#0909F7font-size:12px}——留言内容
#mod_board span.date{color:#FF88FF}——留言时间
#mod_board div.user a{color:#00FFFF}——留言用户名
#mod_board div.user a img{}——留言用户头像
#mod_board td.index{color:#00FFFF}——留言序号
#mod_board div.line{margin-top:10pxbackground-color:#000000line-height:1px}——分界线
这个是点击查看全部留言的代码
留言板区域 #in_msg留言区部分
#in_msg{width:710px}——整体部分
#in_msg div.tit{margin-bottom:12pxcolor:#666666font-size:14pxfont-weight:bold}——留言板的标题
#in_msg .item td.index{width:40pxfont-weight:bold}——留言序号
#in_msg .item div.user{width:150pxcolor:#666666}——留言人名
#in_msg .item div.user a{color:#5AB600font-size:12px}——留言人名称（带链接的）
#in_msg .item div.user a:visited{color:#5AB600}——留言人名称（点击之后）
#in_msg .item div.user img{margin-bottom:5px}——留言人头像
#in_msg .item td.cnt a{color:#5AB600font-size:12px}——"删除"(未点击时的式样)
#in_msg .item td.cnt a:visited{color:#5AB600}——"删除"(点击之后的式样)
#in_msg span.date{color:#666666font-size:12px}——留言日期
#in_msg div.desc{margin-top:5pxcolor:#666666font-size:12px}——留言内容(文字部分)
#in_msg div.line{background:url(图片地址) repeat-x center center}——分割线 （也是留言条数）
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），当然可以使用更多的动画效果来，不过不建议搞得过于花哨。
比如做一个导航条首先搭建基本机构：
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">年表</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">画廊</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">地图</a></li>
</ul>
</div>
这时候看到的一个纵列文字前带圆点的列表
然后用css进行美化：
#menu {
background-color: #6282ac
height: 35px
width: 570px
position: relative
}
定义菜单的宽，高，颜色及定位方式。
#menu ul {
list-style-type: none
}
去掉文字下划线。
#menu li {
float: left
display: block
width: 60px
height: 31px
margin-top: 2px
margin-right: 6px
margin-bottom: 2px
margin-left: 6px
line-height: 31px
text-align: center
background-repeat: repeat-x
border: 1px solid #FFFFFF
}
定义“float: left”使列表项横向排列，设置高与行高使链接文字垂直居中。
menu a {
font-family: Arial, Helvetica, sans-serif
font-size: 10px
background-image: url(../images/b.gif)
display: block
background-repeat: repeat-x
}
定义链接的字体及背景
#menu a:hover{
background-image: url(../images/a.gif)
display: block
background-repeat: repeat-x
}
定义a的伪类实现鼠标点击时的背景变化
