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 / Bootstrap
    • HTML5 / CSS / SVG
    • Google / Facebook / Amazon
  • 線上看電影電視綜藝
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 Email */ Mage::getStoreConfig('trans_email/ident_general/email'); Sales Representative…

  • 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 ◆作用:主要是配置需要缓存的文件 二、如何实现 实现起来倒是非常简单(当然,这也是有问题的,这个我们后面讲解决方案),实现步骤如下: 1.在服务器上添加MIME TYPE支…

  • 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

CSS3: Media Query实现响应式Web设计

CSS3: Media Query实现响应式Web设计

进一步理解CSS浮动与清除浮动

进一步理解CSS浮动与清除浮动

CSS3实现的响应式字体:自适应视图窗口大小的新单位

CSS3实现的响应式字体:自适应视图窗口大小的新单位

About Author

Gideon

Leave a Reply Cancel reply

站内搜索

多语言转换

Recent Posts

  • MAMP Pro for Mac 永久破解, PHP/MySQL开发环境 for Mac, MAMP Pro 5.5 for Mac破解
  • Python: 日志记录方案 loguru, 日志模块, loguru模块, logger日志
  • tkinter教程:Python GUI 之 tkinter窗口视窗教程大集合(看这篇就够了)
  • 网站免费启用 HTTPS, 免费安装SSL证书, Free SSL Certificate Setup for WordPress on Google Cloud (Click-to-Deploy), 免费certbot说明
  • Ubuntu 18.04:多域名绑定同一IP, 配置Apache虚拟主机, 同一ip绑定多域名, 一台服务器支持多个域名和站点, Configure Apache Virtual Hosts

站内搜索




Recent Comments

  • 网站免费启用 HTTPS, 免费安装SSL证书, Free SSL Certificate Setup for WordPress on Google Cloud (Click-to-Deploy), 免费certbot说明 - Just Code on Ubuntu 18.04:多域名绑定同一IP, 配置Apache虚拟主机, 同一ip绑定多域名, 一台服务器支持多个域名和站点, Configure Apache Virtual Hosts
  • 2019年最好的视频编辑软件推荐, MAC/Windows 视频编辑软件 - Just Code on Adobe CC 2019 Win/Mac 破解版, Adobe CC 2019 一键激活, Adobe CC 2019 Windows 破解版, Adobe CC 2019 Mac 破解版
  • Python爬虫入门, Python采集实例 - Just Code on [2019-08-06 更新 – 亲测 ] Jetbrains IntelliJ IDEA 2019.2 永久破解, Jetbrains系列产品2019.2最新激活方法
  • Mac/Ubuntu: ssh密钥转ppk, ssh private key to ppk, Convert rsa to ppk file in MAC, How to Convert OpenSSH keys to Putty (.ppk) on Linux - Just Code on Linux:SSH 无密码连接到 Google Cloud 实例, FileZilla连接 Google Cloud, IntelliJ IDEA连接 Google Cloud, google cloud compute instance, google cloud platform
  • Mac/Ubuntu: ssh密钥转ppk, ssh private key to ppk, Convert rsa to ppk file in MAC, How to Convert OpenSSH keys to Putty (.ppk) on Linux - Just Code on Windows下手动生产 SSH Key, PuTTY集成ssh key, windows下生产RSA密钥, 生成ppk密钥, Manually generating your SSH key in Windows




Categories

  • Codeigniter / CakePHP
  • Div / Css / XML / HTML5 / SVG
  • Google / Facebook / Amazon / Twitter / Network
  • Java / Jsp
  • Javascript /Jquery / 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
  • WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra




Just Code Copyright © 2019.
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.