CSS留言板加上背景代码操作方法 具体的方法 和代码

html-css024

CSS留言板加上背景代码操作方法 具体的方法 和代码,第1张

留言板不能单独加上背景,留言板模块属于主体区域,你可以设置.stage{}区域的图片,模板主体区域

也可以设置每个模块的图片

.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),当然可以使用更多的动画效果来,不过不建议搞得过于花哨。