使用多说构建网页弹出式评论墙
本文最后更新于 481 天前,其中的信息可能已经有所发展或是发生改变。

前一阵子,小编的一个朋友过生日,小编应一些同学要求,花了几个小时,写了一个很简单的页面,其中难度(对于我自己来说)比较大的感觉就是想要实现一个简单的评论墙功能,可是又不想写大量复杂的PHP一类的,所以我这个时候想起了它,没错 ———— 多说
有了这个思路,下面就剩HTML了,写这个页面就容易多了呢·······

  • 先在多说上申请一个服务,这个小编就不多介绍了,相信大家也都会
  • 然后写一个div承载多说的JS以及HTML,设置成默认 display:none;
  • 然后写一个右下角的漂亮小按钮,JS控制点击时显示div(承载多说的),可以使用jquery库让这里看起来更装逼
  • 针对多说评论框以及框内部CSS的美化,定位一类的
  • 一个关闭图标小按钮,点击关闭时关闭即可(可以使其与前面jquery效果匹配)

下面贴一下CSS

.ds-powered-by {display: none;}
.ds-post-button {background-color: blue;opacity: 1;}
#ds-thread #ds-reset .ds-comment-body p {color: #FFFFFF !important;} .ds-sync label {color: #00CACA;}
#ds-thread {border-radius: 5px;background-color: black;opacity: 0.95;box-shadow: 7px 7px 7px #888888;padding: 24px;padding-top: 17px;}
.ds-avatar .ds-avatar img{border-radius: 27px;-webkit-border-radius: 27px;-moz-border-radius:27px;box-shadow: inset 0 -1px 0 #3333sf;}
#ds-reset .ds-avatar img{width:54px;height:54px;border-radius: 27px;-webkit-border-radius: 27px;-moz-border-radius:27px;
box-shadow: inset 0 -1px 0 #3333sf;-webkit-box-shadow: inset 0 -1px 0 #3333sf;-webkit-transition: 0.4s;
-webkit-transition:-webkit-transform 0.4s ease-out;transition: transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out;}
#ds-reset .ds-avatar img:hover{box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);}.ds-sort {display: none;}
.ds-login-buttons {display: none;}

注意上面的 .ds-powered-by {display:none},小编是为了美化才去掉的,希望大家能够在无大碍时加上

留言板

这个是留言板的大概样子~~

控制的JS不用多说了吧(估摸着大家都会写,写的还都比我好·······),需要的底下评论下我在加~

暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇