HTML & CSS » 用CSS3制作漂亮的设计达人留言评论样式

用CSS3制作漂亮的设计达人留言评论样式

发表于: HTML & CSS, 优秀设计资源, 前端开发, 设计作品. 评论 (284)
Sponsor

最近很多用户问我这多说留言样式怎么弄的,看来大家很喜欢设计达人这个留言样式啊,当初设计这个留言样式就是为了让更多用户去留言。其实我觉得这个留言制作不难,懂CSS的人花点时间也知道怎样制作出来,所以我觉得难点还是UI设计、交互以及创意方面,所以设计师们多点来设计达人网站上找灵感吧^^

查看Demo →

下面一起来看看这个漂亮的留言评论样式是怎么制作的吧:

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

设计达人多说评论样式完整版 (2013-4-6更新)

这个代码是根据设计达人网站的风格而配色的,所以使用的时候记得改下配色哦。特别是记得改「#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}」。

用户气泡提示框代码:倒数8-11行。(隐藏用户气泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」,这是隐藏鼠标移至用户名称时弹出来的气泡提示框,个人觉得没什么用啊,所以直接隐藏了。)

评论盖楼样式代码:倒数1-7行。(不用盖楼的评论方式用户可以直接删除这几行,精简一下代码。)

添加方法:打开「Wordpress后台」 > 「多说评论」 > 「个性化设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」

#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2}
#ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#848568 !important;}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba}
#ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;}

#ds-thread {padding-left:30px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible}
#ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;}
#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;}
#ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;}
#ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important}
#ds-thread .ds-avatar a:hover {border-color:#de5a4e}
#ds-thread .ds-avatar > img {margin:2px 0 0 2px}
#ds-thread #ds-reset .ds-replybox {box-shadow:none;}
#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; } 
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;} 
#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img { padding:0;width:50px !important;height:50px !important; border-radius:5px; }
#ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);
							-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;
							}
.ds-post-self:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}

#ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;}

#ds-thread #ds-reset .ds-comment-body p{color:#787968}
#ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;}

#ds-thread #ds-reset #ds-hot-posts {border:0}
#ds-reset #ds-hot-posts .ds-gradient-bg {background:none;}



#ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;}
#ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;}
#ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;}
#ds-reset #ds-bubble .ds-user-name{padding-left:13px;}


#ds-reset .ds-comment-body #ds-ctx {border-left:1px solid #b9baa6;background-color:#e8e8dc !important}
#ds-reset #ds-ctx {margin-right:-15px}
#ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;box-shadow:none;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;font-weight:bold}

查看Demo →

最后

如果使用遇到什么问题,可以在这里留言提问,当然也可以发表你的独特意见,一起交流。

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论284 Responses to “用CSS3制作漂亮的设计达人留言评论样式”

  1. 张佩金 - 回复

    恢复以后图片半边怎么修复bug

    • 张佩金 -

      就是用静态网页的时候 回复的时候可能没及时刷新 就是头像只有一半

    • 张佩金 -

      嗯呢 就是感觉的话有点别扭,兄弟这个的话能不能强制改的?

    • 张佩金 -

      刷新一下才会出现

    • 张佩金 -

      我把图片传给你看一下

    • 张佩金 -
    • 张佩金 -
    • 张佩金 -

      看看就是那个半边

    • 张佩金 -

      要刷新一下才能出来

  2. 劉世永_ - 回复

    很好

  3. EthanLu - 回复

    哈哈哈哈哈

    • 11111 -

      111

    • 11111 -

      111

  4. Sun94 - 回复
    • 樂猪先生 -

      5555

    • 樂猪先生 -

      666666

  5. 王帅波 - 回复

    999

  6. ZezeIU_79013 - 回复

    zee

  7. ihongqiqu - 回复

    评论多行显示会怎样,测试一下

  8. masy - 回复

    为什么你的就卡一下就恢复了

    • 张佩金 -

      这个bug怎么改

  9. masy - 回复

    试了下有不完美的地方,刚评论完,头像被截掉了一部分,刷新才恢复

    • 张佩金 -

      怎么解决

    • 张佩金 -

      怎么改bug

    • 张佩金 -

      嗯嗯

    • 张佩金 -

      你可以看一下你回复一下 会卡一下 然后就图片就被遮住一半

    • masy -

      大半年过去了,我放弃多说了

  10. 爱游赚金 - 回复

    用户评论名字后面如何出现他的浏览器链接推荐自己文章这种多说评论功能,在一网站看到过

  11. Xun' - 回复

    非常好哦,可以直接用吗?

  12. 椋芄隗 - 回复

    厉害了我的哥!

  13. 32...9@qq.com - 回复

    <img src="%5B%E7%BB%87%5D" alt=" ” />

    • 椋芄隗 -

      jjjjjj

  14. 余楚放 - 回复

    请问一下,为什么评论框的头像会和评论框重叠呢

    • CRYZE -

      这个回复

  15. 森云 - 回复

    来看看

  16. 夜殇 - 回复

    test

  17. heixiu - 回复

    嘎嘎嘎

    • Accompany -

      回复测试

  18. 爱首尔 - 回复

    请问一下,你现在多说不会影响到后台登陆吗?我网站现在多说会使后台登不上去

    • CRYZE -

      huhuihui

  19. sherlockz - 回复

    博主你好,我用的是hexo, 为什么在多说后台添加自定义css之后,不起效呢?

  20. sherlockz - 回复

    博主你好,我用的是hexo, 为什么在多说后台添加自定义css之后,不起效呢?

  21. 小朱 - 回复

    去去去去

    • -

  22. 云核分享 - 回复

    赞!

    • Gu -

      慕名而来。测试一下!

    • 又又 -

      123

  23. bgd1 - 回复
  24. 小众博客 - 回复

    优化的很漂亮

  25. TMac - 回复

    试试效果

  26. 滑羊凌兰_ - 回复

    [酷] 不错,我喜欢这文章

  27. Johnny.R - 回复

    [给力]

    • 沐风 -
  28. 欢腾 - 回复

    不错,支持一下!

  29. 啦啦啦 - 回复

    666666

  30. 跨境电商 - 回复

    [给力] 不错,支持一下!

  31. 小坏孩 - 回复

    卧槽,这个厉害

  32. 小台 - 回复

    测试一下[呵呵]

    • samith -

      不错啊

    • 轻狂志 -

      我来测试一下评论

  33. 编程小梦 - 回复

    测试

  34. Chaney_Zorn - 回复

    很赞~我觉得凹进去的效果背景色不一样也很好看

  35. Z - 回复

    看看

    • 叫我怪物先生 -

      测试

  36. 毛毛星 - 回复

    asdafsf

  37. 百赖小生 - 回复

    感谢,非常好用。

  38. 天涯不是尽头 - 回复
    • 史安平 -

      看看二级

    • 天涯不是尽头 -

      看看3级

    • 叫我怪物先生 -

      看看4级

    • mdqh -

      看效果

  39. 随心乄放逐 - 回复

    321312312

    • 一言九鼎 -

      请问请问

  40. 寻觅失去的快乐 - 回复

    666

  41. 朱润根 - 回复

    1312

  42. IOS开发 - 回复

    太厉害了

  43. 7pure - 回复

    哟哟哟 切克闹

  44. 宋茂祥 - 回复
  45. Lee - 回复

    花擦,这评论效果真酷!

  46. 7eddy - 回复
  47. - 回复

    太牛惹 233333 流下了感动的鼻水

  48. nicevoice - 回复

    因为留言的地方图像太大,修改成32了,导致写字也有点困难,所以把留言空白留宽了点,调成了55,手机也刚好了。此处要修改下代码如下#ds-thread #ds-reset .ds-replybox {padding: 0 0 0 55px;}#ds-reset .ds-replybox .ds-avatar img{padding: 0; width: 32x !important; height: 32x !important; border-radius: 5px;}参考http://hao.92wd.cn/link/

  49. Eric - 回复

    太牛了

  50. 邢伟伟 - 回复

    zan

  51. EcMadao - 回复

    简直酷炫、、太感谢了!

    • 网主 -

      也同样今天

  52. 龙轩 - 回复

    漂亮

  53. 哆美动图 - 回复

    真漂亮!

    • Blahor -

      确实好漂亮

  54. 匿名 - 回复

    不错!

  55. 草根站长! - 回复

    牛!!!!!!!!我已经用上了~谢谢博主

  56. A* 520小柯网络 - 回复

    看看

  57. Wanan - 回复

    hahah

    • sugar6281608 -

      23333333

  58. Almas - 回复

    Discuz能用不?

  59. 菩提树下 - 回复
  60. hzwer - 回复
  61. 左岸岛 - 回复

    非常漂亮,果断用了!!

  62. 伯羊羊 - 回复

    怎么让多说悬浮在文章旁边?????

  63. 芦苇丛中的小蜗牛 - 回复

    真棒

  64. 清风解语 - 回复

    真的很不错,3q

  65. so733 - 回复

    还可以哟

  66. @Life - 回复

    看起来不错

  67. 小小虫 - 回复

    看看

  68. 带着书_去旅行_ - 回复

    真好看

    • zhang -

      这个怎么解决呢?

    • zhang -

      到最后没地方了

  69. qzuser - 回复

    非常喜欢,楼主辛苦了!!!!

  70. Love - 回复

    0000

  71. 七七栖戚 - 回复

    jjj

  72. 曾博 - 回复

    不错不错

  73. 屠小天 - 回复

    更丰富

  74. 远方的回忆 - 回复

    非常棒!

  75. 爽lorna - 回复

    赞一个!!!

  76. 安之语 - 回复

    我更改了图像的像素大小,但是错位了不知道怎么改,麻烦帮忙看下啦!我不会网页,做这个博客也是百度,找人帮忙弄了好久才得以成型的。拜托了!

    • 硕浦 -
    • sugar -
    • sugar -

      我要盖楼

  77. 花儿笑忘了腰 - 回复

    效果不错额

  78. 安之语 - 回复

    为何这么屌?只是我想再问个问题就是多说文本输入框的颜色可以调吗?

    • leuang -

      可以啊

    • 隐形阿冰 -

    • 范德萨 -

      可以啊!

  79. 杨雨-IT博客 - 回复

    这个做的确实漂亮

  80. 蓝色理想 - 回复

    nice

  81. shell-von - 回复
  82. Mr.童 - 回复

    你好,谢谢分享,我想问下怎么修改颜色

  83. INDAYU - 回复

    试试

  84. - 回复

    不错,效果还好

  85. 骁-miniseo.net - 回复

    你好,请问下怎么设置评论框的倒圆角多少啊?

  86. 风色番茄 - 回复

    请问怎么设置,发布框中,文字被选中时的颜色和背景颜色。谢谢。

  87. 夕文艺园 - 回复

    不错,效果还好

  88. 资源来了啊 - 回复

    能不能让那个头像大一点呢?调整到60px

  89. 24King - 回复

    很不错咧

  90. ccq - 回复
  91. duoshuop - 回复

    梵蒂冈和士大夫

  92. Robin - 回复

    #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#FFFFFF;}

  93. Robin - 回复

    更改不了底色哦?

  94. 织梦爱好者 - 回复

    很牛叉学习了!!

  95. cmxz - 回复

    参考了博主的代码,我也贡献点儿吧:博主有没有感觉鼠标离去后头像还要旋转一周看起来有些多余了(因为鼠标移上去时为了把注意力吸引到头像处,加上旋转动画,可是鼠标离去时应该只让下一个头像旋转即可,离去的这个头像应该不旋转。自己没有任何css3的知识,昨晚查了一些属性,没有弄出来,今天早晨找到了方法: @keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} @-webkit-keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} @-moz-keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} @-o-keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} .commont-item:hover .commont-avatar img {-webkit-animation:cmxz .4s ease-in-out;} 用keyframes只有鼠标移上去时有动画,鼠标移开时是没有动画的。是根据http://www.w3cfuns.com/forum.php?mod=redirect&goto=findpost&ptid=5592366&pid=38961 才弄出来的

  96. ShunYea - 回复

    有没有比较全的代码呢?这个是结合多说来写的,但是好些样式多说本来就有了,我意思是从0开始写所有的代码,表现出你这个样式,谢谢。我准备移植到博客上用。

    • 月狼殇 -

      是呀想要比较全的代码!

  97. Quasinova - 回复

    最底部的线,怎么去掉?

  98. 陈卓琦 - 回复

    好看!

  99. 小二苘 - 回复

    非常帮的教程,已经采用!

  100. 小二苘 - 回复

    很赞的效果!

  101. 木子 - 回复

    这个效果很不错。

  102. w3c百淘通 - 回复

    这个效果不错呀

  103. 找尾巴的小鱼儿 - 回复
  104. 华通IT - 回复

    好看啊

    • bai_sanke -

      通天塔

  105. 豆浆油条 - 回复

    IE下不兼容。

  106. 那些依然经典的话 - 回复

    • 笔趣阁5200 -

      看看回复效果

  107. Domon_Lee - 回复

    楼主…我套用了之后,发现留言replybox那里,我的头像太靠右了,一部分和留言框重合了,应该怎么改一改呢?求楼主指点.

  108. 小辛 - 回复

    哇唔好赞

  109. 邪恶色系漫画 - 回复

    有创意!

  110. 凡客_WZ - 回复

    看起来好屌的样子

  111. 淘她喜欢 - 回复

    用了效果很好,只是我的输入框左侧头像怎么错位了?

    • 7eddy -

      我也是,请问你解决没有?

    • 小五 -

      到底怎么会

    • netcookies -

      到这看看吧,错位是权重问题 http://b.nznd.org/post/4share/2015-07-18

    • Btlmd -

      可以自己整一个自适应,css判断就行

    • 小白菜和小油菜 -

    • 史安平 -

      这么吊

  112. 小刀 - 回复

    改良了一下,有空的可以去看看

  113. 点点滴滴 - 回复

    效果看着很炫啊

    • 樂葉 -

      同意

  114. 藏马 - 回复

    很不错啊。。。

  115. 零度博客 - 回复

    试试效果。哈哈

  116. 9527 - 回复

    很牛叉

  117. 亿推 - 回复

    不错,支持!

    • Lison -

      测试多说评论

  118. JasonXiang - 回复

    CSS3够炫,只是不支持CSS3的浏览器就悲剧,做好退化兼容很重要啊!

  119. 两天 - 回复

    博主啊 小工具里控制最新评论的是哪个字段啊?

  120. 陈鸣 - 回复

    请问博主,我把评论框左侧的头像设置display:none隐藏后怎么才能将评论框拉宽左侧和下面的评论对齐?

    • 陈鸣 -

      好像还是不行,左面那个60px好像不给删除不过还是谢谢你的答复!

    • 破小懿 -

      请问你现在解决了吗?

  121. 安卓芯ApkCore - 回复

    这个好啊

  122. V生活 - 回复

    首页前台如何把名字、评语颜色修改??

    • V生活 -

      谢谢,不过这个只是针对用社交合作登入的,如果匿名的好像不行~~~

  123. - 回复

    太棒了

  124. 阳光seo网络营销中心 - 回复

    ??

  125. 上玄月 - 回复

    试试

    • A5mp3 -

      很不错

  126. 老莫不老 - 回复

    真的是挺好看滴

  127. Jerichan - 回复

    牛逼

  128. 草根成春 - 回复

    旋转的评论样式,不错哟,支持一下、。

  129. 李雅莫寒 - 回复

    已用上了,谢了

  130. 智享互联软件站 - 回复

    你这个评论我就喜欢 好看了

  131. 石狮养德素食 - 回复

    如何做到手机自适应屏幕呢?请问楼主有什么办法

  132. Youth.霖 - 回复

    好吧路过留名以后再学

  133. GeekMario - 回复

    相当的不错哦!学习了!

  134. dddd - 回复

    为什么我用了后在fx跟360浏览器里看是正常,但在IE9里看不正常?

  135. 任漂零 - 回复

    请问达人怎么把头像弄大一点,位置刚好与后面的圆圈重合?

    • 2357 -

      ghh

  136. 轮回BAI世 - 回复

    为什么图标不转呢?

  137. gq - 回复

    悄悄拿走。。哈哈学习一下

  138. zaumreit - 回复

    腻害

  139. 冻猫 - 回复

    转圈圈好有爱

  140. 我就是刘磊啊 - 回复

    恩~~~那个正在使用多说 怎么去掉啊

  141. testcpa - 回复

    很漂亮的网站,很好的内容,大爱

  142. 妹子控 - 回复

    请问怎么可以把 评论页数字1,2,3, 提到评论框上面

  143. 轩逸凌志 - 回复

    额来瞧瞧

  144. 白胖包包 - 回复

    为什么我的多说一focus留言板会有一和要蓝色的线条。我也找不到哪里有控制这个样式。

  145. maicoo - 回复

    不错

  146. yu二当家 - 回复

    为什么,添加了css代码之后,评论没变,网页背景变黑了,请指教

    • yu二当家 -

      我 搞错了,搞定了,谢谢

  147. 第四个李智 - 回复

    可不可以不要这么牛

    • eli-lien -

      这个好赞

    • 于海娟 -

      不可以 嘿嘿

  148. jay - 回复

    我也参照博主设置了下!博主真聪明~~嘻嘻,谢谢啦转头

  149. 大大的小蜗牛 - 回复

    不错,谢谢分享。

    • Mp16 -

      我竟然看到了你的留言,

  150. 蚕豆豆儿 - 回复

    很喜欢你这套模板,准备仿一个!

  151. 熊幽默 - 回复

    做的很好看,谢谢。

    • 罗卡 -

      不错

  152. 蚂蚁 - 回复

    牛叉

  153. 萧布凡 - 回复

    请问下友言的样式也是一样的吗。如果不一样请教怎么修改

  154. 斜阳晚暮 - 回复

    谢谢了 [心]

  155. 点击收听赚钱播报 - 回复

    找了好久才找到,非常喜欢!!就是图片小了一点点,如何放大呀

  156. 呐呐 - 回复

    不错,挺好看的

  157. kk_钦 - 回复

    看来是应该把背景代码都删了,效果还不错67359c80tw1e3ajh2bptgj.jpg

  158. kk_钦 - 回复

    我把字体颜色设置成#ffffff,头像直接变成正方形!!!有什么办法可以使得背景框为主题默认啊,我那主题背景使用图片的。半透明效果,直接删了修改背景颜色代码行不

  159. 晴小天 - 回复

    好好用

  160. 《XXL·1Q89》 - 回复

    已经用了您的方法,有点小问题:能不能把图标放大?感觉图标有点小

  161. 猴子 - 回复

    wordpress授权后需要注册网站账号才能评论?为什么

  162. 极品人干的极品事 - 回复

    实在太感谢了,正在测试

  163. 两天 - 回复

    博客主题也很棒的说~~~

  164. 无聊的徐 - 回复

    感谢分享!
    本人已大致修改为适合自己的风格,其中有一个问题请教:在实现评论框背景半透明的前提下,如何让文字不透明?我仅仅试过添加span{position:relative;},结果把整个评论框样式都破坏了~

    • 无聊的徐 -

      OK已解决,非常感谢

  165. Steve Wang - 回复

    octopress中的多说,要怎么改?

    • Steve Wang -

      奇怪,刚发了一条评论居然不见了?opress的多说是挂了一条.js的代码纸,不知道从何入手……

  166. 便捷摄影工作室 - 回复

    我用的是通用代码,弄了个嵌套回复,看起来不错

    • 蒼茫去遠航 -

      通用代码怎么使用嵌套功能 [可怜]

  167. 蒼茫去遠航 - 回复

    使用的效果跟你的不一样 啊。

    • 蒼茫去遠航 -

      头像只有一半显示

  168. deep - 回复

    学习了。

  169. 雨林亭 - 回复

    按楼主的方法做好了,最后还发现一点.
    如果使用了去版权的代码头像框就会显示不正常,代码如下
    #ds-thread .ds-powered-by{display:none!important;}/*去多说版权*/

    • i比特 -

      可以这样设置去除多说版权
      #ds-thread .ds-powered-by{font-size: 0px !important; padding: 0; }

  170. 赞相玉 - 回复

    您好,我想问一下我用了您的评论,为什么回复的样式没有嵌套的效果呢?

    • 赞相玉 -

      哦,说错了,是我的回复之后显示的样式,跟你的不一样。你的回复是下一层都靠右一点的,而我的都是竖着一排,回复的div都没有靠右。不知道这是为什么呢

    • 晓鸟Design -

      我也遇到了同样的问题,导致回复的头像压住了回复内容。

    • epool -

      系统默认只有:盖楼、平铺,嵌套,怎样设置层级样式展现呢?

  171. 水军 - 回复

    会出现吗

  172. 嗜风 - 回复

    为什么会有两段CSS代码,上面那个短的是什么?要把这个HTML代码替换掉原来网页里多说的代码吗?

    • 嗜风 -

      是把网页里那个多说的DIV替换成上面的HTML代码吗

  173. 嗜风 - 回复

    是直接把这上面的CSS代码复制到多说上的“自定义CSS”,还是放到网站的CSS文件里?

    • 西瓜皮皮 -

      多说里面的自定义css

  174. 许智勋 - 回复

    不知道为什么在我的网站上,头像转完之后会往左靠

  175. 小V - 回复

    仔细看,,会发现旋转的时候头像会向左偏移几像素,,怎么解决呢?

    • i比特 -

      这个问题可以使用-webkit-backface-visibility: hidden;解决.
      #ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);-webkit-backface-visibility: hidden;-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;}

  176. 酷克 - 回复

    旋转的头像边框颜色是哪个代码?

    • luger -

      试试回复后二级评论~~

    • 阿宇 -

      呵呵

    • 阿飞 -

      s

    • SKY -

      很好看

    • aa -

      不错

    • 则然 -

      awesome

    • mmm -

      好酷

    • mmm -

      丰富

    • 姜浩 -

      真不错

  177. 雨林亭 - 回复

    谢谢大侠! 这个代码非常好用,一放上去就OK了.

  178. 酷克 - 回复

    为什么我的不转了 而且现实不完整了

  179. 雨林亭 - 回复

    博主,能否给一下你评论框的最新代码啊?我照你上面的代码复制到我的多说,显示的效果和你这个不一样.
    1,头像不会转
    2.头像感觉被切刀切了一样.(与"雨印 雨音"一样的效果.)

    • 雨印 雨音 -

      使用新的样式后,功能恢复了,谢谢你~

    • 雨印 雨音 -

      更新之后嵌套回复需要再修改一下……

  180. 雨印 雨音 - 回复

    我使用了您的样式后,一开始是很漂亮的,有旋转有嵌套……之后评论框头像变成了圆形,评论出来后,头像被切了一个一刀一样……也没有旋转了……而您的页面也是了……<img src="http://ww2.sinaimg.cn/mw690/b40f2e09jw1e1atotlf06j.jpg&quot; />

    • 雨印 雨音 -

      你那都没问题是吧,那就好了……不知道为什么我的电脑里所有的浏览器都不行……chrome、ff、ie10、还试了opera,都是这样,总之没事就行了,大概是我电脑出什么问题了……

    • 雨林亭 -

      其实不是你电脑出问题,我这边也是这样,同求解决方法

    • 酷克 -

      我的也是这个问题.不知道怎么弄的,电脑所有浏览器都是这样了

  181. JJ_Lins - 回复

    厚脸皮的直接拿走了!

  182. 人性的弱点 - 回复

    怎么弄回复评论嵌套效果呢 让回复凹下去

  183. aladd设计量贩 - 回复

    [吃惊] 膜拜一下!

  184. 米修 - 回复

    看到过很多多说应用的网站,发现都一样的显示效果,不显个性,原来可以修改样式的,尝试一下

  185. 淘宝符风 - 回复

    [brd谨] [brd贺] [brd新] [brd年] 评论框做得很赞,我拿去给我自己网站啦。

  186. 美容工坊 - 回复

    怎么取消分散的那个动画效果呢?

  187. 海_纳 - 回复

    [给力]

  188. Toomiy - 回复

    哇!!果然很好看啊!!!

  189. 廖嘉穎 - 回复

    :sad: 不会CSS,留言板真的很漂亮!大赞

  190. 熠熠 - 回复

    [害羞]

  191. 鱼雁可 - 回复

    [威武]


{ 发表评论 }