MENU

Typecho CommentToMail 非常漂亮的邮件样式分享

March 24, 2018 • Read: 962 • 技术,分享

话不多说,直接看效果!

Preview

评论邮件提醒样式预览图

Guest

预览图

Owner

预览图

HTML输出样式预览

Guest

您在 Linger 的博客 上的留言有新回复啦!

访客 同学,您曾在文章《 文章标题 》上发表评论:

真的很好很赞呢!

作者 给您的回复如下:

是的呢!

您可以点击 查看回复的完整內容 ,欢迎再次光临 Linger 的博客

Owner

您的 Linger 的博客 上有新的评论啦!

访客 在您文章《Typecho CommentToMail 非常漂亮的邮件样式分享》上发表评论:

哎哟,不错哦!

时间:2018-03-24 18:06:45 IP:114.114.114.114

邮箱:example@liuguogy.com 状态:通过

[查看评论] | [管理评论]

Share

源代码

Guest

<table style="width: 99.8%;height:99.8% "><tbody><tr><td style="background:#fafafa url(https://a.photo/images/2018/03/24/2017113018325846288465.png)">
    <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
        <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
            <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="https://www.liuguogy.com"> {siteTitle} </a>上的留言有新回复啦!
            </p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p>{author_p} 同学,您曾在文章《{title}》上发表评论:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text_p}</p>
            <p>{author} 给您的回复如下:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>
              <p>您可以点击 <a style="text-decoration:none; color:#12addb" href="{permalink}">查看回复的完整內容 </a>,欢迎再次光临 <a style="text-decoration:none; color:#12addb" href="https://www.liuguogy.com"> {siteTitle} </a>。</p>
            <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
        </div>
    </div>
</td></tr></tbody></table>

Owner

<style>
    .wrap span {
        display: inline-block;
    }
    .w260{ width: 260px;}
    .w20{ width: 20px;}
    .wauto{ width: auto;}
</style>
<table style="width: 99.8%;height:99.8% "><tbody><tr><td style="background:#fafafa url(https://a.photo/images/2018/03/24/2017113018325846288465.png)">
    <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);">
        <div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;">
            <p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="https://www.liuguogy.com"> {siteTitle} </a>上有新的评论啦!
            </p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p>{author} 在您文章《{title}》上发表评论:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>
        
            <p class="wrap" style="text-decoration:none"><span class="w260">时间:{time}</span><span class="w20"> </span><span class="wauto">IP:{ip}</span></p>
            <p class="wrap" style="text-decoration:none"><span class="w260">邮箱:{mail}</span><span class="w20"> </span><span class="wauto">状态:{status}</span></p>
            <p><a style="text-decoration:none; color:#12addb" href="{permalink}" target='_blank'>[查看评论]</a>&nbsp;|&nbsp;<a style="text-decoration:none; color:#12addb" href="{manage}" target='_blank'>[管理评论] </a></p>
            <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
        </div>
    </div>
</td></tr></tbody></table>

同时感谢 @三秋@枫叶

觉得好看记得留下评论哦

Leave a Comment

已有 22 条评论
  1. 颜色很搭配

  2. 有时间试试

    1. @Ivan@(捂嘴笑)

  3. 可以可以@(滑稽)@(滑稽)

    1. @枫叶见笑了@(捂嘴笑)

  4. 真心漂亮!@(太开心)

    1. @王小大@(笑眼)

  5. 很好看@(滑稽)

    1. @True@(哈哈)

  6. 那个 8K 的背景图直接 Base64 编码到 css 里更好些,不用从外面再加载一遍了。

    1. @Hranemmm@(小乖)

  7. 不错,支持个!@(哈哈)
    和好客 http://www.hehaoke.com

    1. @灵徒@(捂嘴笑)

    2. 姬长信 姬长信

      @灵徒大佬博客手机端留言怎么发出去,我的留言内容是:有点麻烦呐

    3. @姬长信留言发不出去?@(惊讶)

    4. 姬长信 姬长信

      @Linger是回复@灵徒 的@(笑尿)

  8. 姬长信 姬长信

    @(哈哈)

    1. @姬长信@(吐舌)

    2. 姬长信 姬长信

      @Linger回的好快@(小乖)

    3. @姬长信那必须@(你懂的)

    4. 姬长信 姬长信

      @Linger微博粉大佬了,回粉吗@(滑稽)

    5. @姬长信回@(勉强)