Skip to content

Just Code

Share Codes I Am Using or Studying




Menu
  • 首页
  • PHP Mysql 网站开发
    • Php / Pear / Mysql / Node.js
    • WordPress / Magento / Shopify
  • Python 编程
  • Java 编程
    • Phone / IOS / Objective-C / Swift
    • JavaSE
    • Java / Jsp
  • Linux Shell 编程
    • Mac / Github / Shell / Linux
    • Tools
  • JS 前端
    • Javascript /Jquery / React / Bootstrap
    • HTML5 / CSS / SVG
    • Google / Facebook / Amazon
  • AI 机器学习
  • 跨境电商
  • 線上看電影電視綜藝
July 31, 2019
HomeDiv / Css / XML / HTML5 / SVG邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template

邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template

By Gideon Div / Css / XML / HTML5 / SVG  0 Comments

 

邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template

<div style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
    <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
            <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
                <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">This is preheader text. Some clients will show this text as a preview.</span>
                <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
                    <tr>
                        <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
                            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                                <tr>
                                    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
                                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Hi there,</p>
                                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
                                        <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
                                            <tbody>
                                            <tr>
                                                <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
                                                    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
                                                        <tbody>
                                                        <tr>
                                                            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;"> <a href="http://htmlemail.io" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Call To Action</a> </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
                                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Good luck! Hope it works.</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
                    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                        <tr>
                            <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
                                <span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
                                <br> Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif" style="text-decoration: underline; color: #999999; font-size: 12px; text-align: center;">Unsubscribe</a>.
                            </td>
                        </tr>
                        <tr>
                            <td class="content-block powered-by" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
                                Powered by <a href="http://htmlemail.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">HTMLemail</a>.
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
    </tr>
</table>
</div>

 

邮戳交易电子邮件模板

所有主要电子邮件客户端的内容准备,移动友好和美观。

 

项目地址: https://github.com/wildbit/postmark-templates

直接下载:postmark-templates-master

 

CSS和内联

这里有两套模板。第一个集合位于/templates文件夹中,并包含基本模板,其中CSS全部包含在样式块中。在这种状态下,它们更容易编辑,但它们与电子邮件客户端的兼容性有限。另一个集合/templates-inlined具有相同的模板,但CSS已经内联。更改它们会更加繁琐,但您不需要使用任何内容来内联CSS。

 

模板

每个模板有三种不同的通用布局变体:Basic,Basic full和Plain。这为您提供了一个起点,以便您可以自定义模板以匹配您的品牌。

邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template
邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template
邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template
邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template

 

欢迎 Welcome

注册后向用户发送欢迎电子邮件。

  • 使用布局预览:基本,基本完整,普通

 

重设密码 Reset Password

向用户发送重置密码的链接。

  • 使用布局预览:基本,基本完整,普通

 

重置密码帮助 Reset Password Help

如果用户无法记住他们的电子邮件,请帮助他们重置密码。

  • 使用布局预览:基本,基本完整,普通

 

收据 Receipt

购买后向用户发送收据。

  • 使用布局预览:基本,基本完整,普通

 

发票 Invoice

请求用户付款。

  • 使用布局预览:基本,基本完整,普通

 

评论通知 Comment notification

通知用户其他用户的新评论。

注意:评论通知不是最漂亮的预览,因为它只是Mustachio。由于此电子邮件中的几乎所有内容都是动态的,因此如果没有真实的内 不过不用担心,这应该是它看起来的样子。

  • 使用布局预览:基本,基本完整,普通

 

试用期满 Trial Expiring

让用户知道他们的审判即将到期。

  • 使用布局预览:基本,基本完整,普通

 

试用期满 Trial Expired

让用户知道他们的过期试用期。

  • 使用布局预览:基本,基本完整,普通

 

用户邀请 User Invitation

帮助用户邀请其他人使用您的软件。

  • 使用布局预览:基本,基本完整,普通

 

我们还确保在以下电子邮件客户端中对这些内容进行了一致性测试:

  • 桌面
    • Apple Mail 9,10,11
    • Outlook 2007,2010,2011,2013,2016
    • Windows 10 Mail
  • 移动
    • Gmail应用(Android)
    • iPhone 6,7,8,SE,X.
    • iPad(Retina)
    • 小型平板电脑
    • iPad专业版
  • 卷筒纸
    • AOL
    • Gmail的
    • Outlook.com
    • 雅虎

 

 

本文: 邮件html模板, 内联邮件模板, inlined email template, simple responsive HTML email template

Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to email this to a friend (Opens in new window)
  • Click to print (Opens in new window)
  • More
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pinterest (Opens in new window)

相关

Related Posts

  • Magento: 获取商店名称及邮件地址 Get Store Email Addresses

    General Contact /* Sender Name */ Mage::getStoreConfig('trans_email/ident_general/name'); /* Sender…

  • HTML 5缓存机制:Cache Manifest配置实例

    Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人的快。像Yslow显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍。 一、Cache Manifest基础知识 作为一个Web开发相关的人员,都不会少听到、看到Cache这个词。是的,上面也已经说了,它是一种缓存的机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest文件,这里进行了简单的整理: ◆MIME TYPE:text/cache-manifest ◆需要由你创建的:NAME.manifest…

  • Linux Shell:使用 SendGrid Email API 发送邮件, SendGrid App for google cloud platform, php, phython, shell script 发送邮件
    Linux Shell:使用 SendGrid Email API 发送邮件, SendGrid App for google cloud platform, php, phython, shell script 发送邮件

    什么是 SendGrid 电子邮件服务? SendGrid 是一项基于云的电子邮件服务,该服务提供了可靠的事务电子邮件传递、伸缩性、实时分析以及可用于简化自定义集成的灵活的 API。 常见 SendGrid 使用方案包括: 自动向客户发送收据…

Tags:inlined email template, simple responsive HTML email template, 内联邮件模板, 邮件html模板

Related Posts

推荐10款非常优秀的 HTML5 开发工具

html5游戏制作入门系列教程(六)

HTML5: 利用SVG动画动态绘制文字轮廓边框线条

HTML5: 利用SVG动画动态绘制文字轮廓边框线条

About Author

Gideon

Leave a Reply Cancel reply

站内搜索

多语言转换

Recent Posts

  • 亚马逊攻击竞争对手方式有哪些?这些黑科技一定要防范, 亚马逊攻击套路, 亚马逊攻击方法
  • 一文教会你分清亚马逊Seller Central, Vendor Express, Vendor Central的区别
  • 讲解:CPM、CPT、CPC、CPA、CPS,一次说清!
  • 深入理解Shadow DOM, 什么是 shadow DOM, shadow DOM入门, 影子 DOM(Shadow DOM)
  • 到底是什么DOM?, What, exactly, is the DOM?, 什么是 HTML DOM?

站内搜索




Recent Comments

  • 深入理解Shadow DOM, 什么是 shadow DOM, shadow DOM入门, 影子 DOM(Shadow DOM) - Just Code on 到底是什么DOM?, What, exactly, is the DOM?, 什么是 HTML DOM?
  • Shopify 英文(多国语言)国际网店 注册指南 on Shopify:管理一个顶级域名绑定shopify网店
  • 亚马逊 Amazon: 亚马逊 Amazon: 如何安全的管理我们的账号账户 on 亚马逊Amazon刷单那点事! 刷单工具
  • 亲测:IntelliJ IDEA 2020.3.2 破解新招 - 无限重置30天试用期 - Just Code on 2021-02-07 亲测有效:IntelliJ IDEA 2020.3.2 破解,IDEA 2020.3.2激活到2099 年
  • 2020-10-28 亲测有效:IntelliJ IDEA 2020.2.3 最新激活破解方法, 激活到 2089 年 - Just Code on 2021-02-07 亲测有效:IntelliJ IDEA 2020.3.2 破解,IDEA 2020.3.2激活到2099 年




Categories

  • AI 机器学习
  • Apache / VPN / Software
  • Codeigniter / CakePHP
  • Div / Css / XML / HTML5 / SVG
  • Google / Facebook / Amazon / Twitter / Network
  • Java / Jsp
  • Javascript /Jquery / React / Bootstrap / Web
  • JavaSE
  • Others
  • Perl / Koha / Ruby / Markdown
  • Phone / IOS / Objective-C / Swift
  • Php / Pear / Mysql / Node.js
  • Python / Wxpython
  • SEO
  • Tools
  • Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux
  • Videos
  • WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra
  • 二手车
  • 会计
  • 跨境电商




Just Code Copyright © 2021.
Theme by iKeepStudying. Back to Top ↑
Please support this website by adding us to your whitelist in your ad blocker. Ads are what helps us bring you premium content! Thank you!
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.