十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
你要知道你评论模板的css是哪个,然后看源代码里面是否已经调用此css,如果已经调用,看下路径是否正确,不正确就改路径就行了,如果是直接没有调用,那说明模板里面没调用此css!
创新互联建站是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,微信小程序,十年建站对广告设计等多个行业,拥有多年的网站推广经验。
#in_send div.tit{margin:10px 0 10px 0;color:#666666;font-size:14px;font-weight:bold} /*内部发表评论区域*/ #in_send{ } /*发表评论区域背景*/ #in_send input{ } /*内部发表评论及留言区域的输入区,包括单选框,文本框和按钮*/ #in_send div.tit{ } /*发表评论标题*/ #in_send table{color:#888888; font-size:12px; } /*发表评论内容*/ #in_send td.f14{color:#888888; font-size:12px; } /*提示语*/ input.#spBlogCmtor{color:#888888; font-size:12px;border:1px solid #888888;background:#FFFFFF; } /*姓名输入框*/ input.#spBlogCmtURL{color:#888888; font-size:12px;border:1px solid #888888;background:#FFFFFF; } /*网址输入框*/ #spBlogCmtText{ } /*评论输入框*/#spBlogCmtText {border: 1px solid #888888; background:#FFFFFF url(
" target="_blank"
) right bottom no-repeat ;background-position:100% 70%!important; border-style:solid;border-width:1px;border-color:#888888;padding:5px; margin:0px; filter:alpha(opacity=70);color:#000000;font-size:14px; background-attachment: fixed;} #spBlogCmtURL {border: 1px solid #888888;} #spBlogCmtor {border: 1px solid #888888;}/*留言板内部页面*/ #spBCmtAuthor{color:#888888; font-size:12px;border:1px solid #888888;background:#FFFFFF; } /*留言姓名输入框*/ #spBCmtURL{color:#888888; font-size:12px;border:1px solid #888888;background:#FFFFFF; } /*留言网址输入框*/ #spBCmtText{color:#888888; font-size:12px;border:1px solid #888888; } /*留言输入框*/ #vercode input{color:#888888; font-size:12px;border:1px solid #888888;background:#FFFFFF;color:#00B1DD;font-size:14px; } /*验证码输入框*/ #in_send td.f14 input{color:#888888; font-size:12px;border:1px solid #888888; } /*添加留言按钮*//*留言板内部页面*/ input.#spBCmtAuthor{color:#888888; font-size:12px;border:1px solid #888888;background:#FFFFFF; } /*留言姓名输入框*/ input.#spBCmtURL{color:#888888; font-size:12px;border:1px solid #888888;background:#FFFFFF; } /*留言网址输入框*/ #spBCmtText{color:#888888; font-size:12px;border:1px solid #888888; } /*留言输入框*/ #vercode input{display:none} /*验证码输入框*/ #in_send td.f14 input{color:#888888; font-size:12px;border:1px solid #888888; } /*留言按钮*/m_comment_post table,#in_send table{width: !important;} /* 首页添加留言区域 */.EditorContainer{/*留言板调用载体 此处加入背景图*/ color:#888888!important ;font-size:12px;border:solid 1px #888888!important; background:#FFFFFF url(
" target="_blank"
) right bottom no-repeat ; background-position:100% 70%!important; }.EditorContainer iframe{/* 留言板调用文字输入区 */ color:#888888!important;font-size:15px;-moz-opacity:0.5;filter:alpha(Opacity=40);background:#888888 left top no-repeat }
因为我用dede主要就是写文章,评论这块没有用到,所以不能直接回答你是在哪个文件夹下面。
你可以先测试的提交几条评论,然后再生成html后再看他默认的布局和样式。对应着修改样式就好了。
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),当然可以使用更多的动画效果来,不过不建议搞得过于花哨。