最近更换了评论系统为Twikoo(很好用,推荐大家使用)。完了之后感觉它的评论邮件通知样式有点不太好看,于是自己折腾了一个也不是很好看的自己弄的样式,分享出来接受批斗!
首先上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| <div class="nui-fClear sR0"> <br>
<table style="margin: auto; width: 340px; height: 500px;"> <tbody> <tr> <td style="background: #f5f7f6;padding: 10px;border-radius: 5px;"> <div style=" display: -webkit-box; -webkit-box-pack: center; "><img src="https://file.tabirstrees.top/blogfile/piano%20xun.jpg" alt="haokan" width="100%"></div> <div style="background-color:rgb(255, 233, 233);background-position: center;border-left: 3px solid #414040;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;width:500px;color:#030303;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin: auto;"> <h2 style="border-bottom:1px solid rgb(0, 0, 0);font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #f59200;font-weight: bold;">> </span>您在 <a style="text-decoration:none;color: #f59200;" href="${SITE_URL}">${SITE_NAME}</a> 博客上的留言有回复啦!</h2> <div style="background-color: rgb(208, 212, 247); padding:5px 12px 5px 12px;margin-top:18px;border-radius: 3px;"> <p>${PARENT_NICK} 同学,您曾在<strong>${SITE_NAME}</strong>上发表评论:</p> <div class="comment">${PARENT_COMMENT}</div> <p>${NICK} 给您的回复如下:</p> <div class="comment">${COMMENT}</div> <p>您可以点击 <a style="text-decoration:none; color:#f59200" href="${POST_URL}">查看回复的完整內容 </a>,欢迎再次光临 <a style="text-decoration:none; color:#f59200" href="${SITE_URL}">${SITE_NAME}</a>。</p> </div> </div> </td> </tr> </tbody> </table> <br> <br> </div>
<style> .comment { background-color: #ffffff; border: 0px solid #DDD; padding: 10px 15px; margin:18px 0; border-radius: 5px; } </style>
|
然后是效果图:
感觉还是太丑了,还是html和css的基础不太好,有时间得再好好学一学。大家有好看的模板也可以推荐给我啊😂!