最近很多用戶問我這多說留言樣式怎么弄的，看來大家很喜歡設(shè)計(jì)達(dá)人這個留言樣式啊，當(dāng)初在網(wǎng)站設(shè)計(jì)中，這個留言樣式就是為了讓更多用戶去留言。其實(shí)我覺得這個留言制作不難，懂CSS的人花點(diǎn)時間也知道怎樣制作出來，所以我覺得難點(diǎn)還是UI設(shè)計(jì)、交互以及創(chuàng)意方面，所以設(shè)計(jì)師們多點(diǎn)來設(shè)計(jì)達(dá)人網(wǎng)站上找靈感吧^^

查看Demo →

下面一起來看看這個漂亮的留言評論樣式是怎么制作的吧：

CSS代碼

這里重點(diǎn)注意的就是 .ds-avatar 的背景要和頁面背景一致，這樣就能展示出凹進(jìn)去的效果。

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代碼

這是多說留言評論的結(jié)構(gòu)，其實(shí)我們的wordpress也可以這樣的。

美化留言評論樣式

添加質(zhì)感：這里主要使用CSS3的圓角（border-radius）、陰影（box-shadow）來實(shí)現(xiàn)質(zhì)感，具體使用方法網(wǎng)上一大堆了，我就不啰嗦啦^^ 配色方面要盡量配合你的網(wǎng)站風(fēng)格哦。

交互設(shè)計(jì)：達(dá)人使用的交互只是一個簡單的CSS3旋轉(zhuǎn)動畫（transform:rotate），當(dāng)然你可以使用更多的動畫效果來，不過我不建議搞得過于花哨。

多說評論樣式完整版

這個代碼是根據(jù)設(shè)計(jì)達(dá)人網(wǎng)站的風(fēng)格而配色的，所以使用的時候記得改下配色哦。特別是記得改「#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:網(wǎng)站的背景顏色}」。

用戶氣泡提示框代碼：倒數(shù)8-11行。（隱藏用戶氣泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」，這是隱藏鼠標(biāo)移至用戶名稱時彈出來的氣泡提示框，個人覺得沒什么用啊，所以直接隱藏了。）

評論蓋樓樣式代碼：倒數(shù)1-7行。（不用蓋樓的評論方式用戶可以直接刪除這幾行，精簡一下代碼。）

添加方法：打開「Wordpress后臺」 > 「多說評論」 > 「個性化設(shè)置」 > 然后把樣式粘貼到「自定義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 →

轉(zhuǎn)載本文章請關(guān)注！網(wǎng)站建設(shè)選擇北京瑩晨設(shè)計(jì)  m.ww520ww.com