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 机器学习
  • Movies 电影电视剧线上看
  • 跨境电商
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

Loading

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

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

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

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

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

九张 Gif 图回顾 Web 设计的 25 年历史

九张 Gif 图回顾 Web 设计的 25 年历史

About Author

Gideon

Add a Comment

Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

站内搜索

多语言转换

Recent Posts

  • 谷歌表格, 谷歌表格公式, 如何计算 Google 表格中两个日期之间的差异, How to Calculate the Difference Between Two Dates in Google Sheets
  • 干货│Amazon Post怎么用?免费的引流利器你还不会?Amazon Post是什么? 如何创建亚马逊POST呢?
  • Xorg模式切换, 解决Shutter失效问题, Ubuntu 22.04 Xorg模式, How to enable/disable wayland on Ubuntu 22.04 Desktop
  • 升级到Ubuntu22之后运行 php7.4 , php7.4 in my Apache in Ubuntu 22, Tutorial Install and Configure PHP on Ubuntu 22.04,tu 22.04 run php7.4
  • Ubuntu上安装微信(wechat), wechat for ubuntu, weixin for ubuntu, ubuntu版微信, ubuntu版wechat

站内搜索




Tags

2021完整版 2022完整版 Chrome插件 css FullCalendar git Google Cloud Platform HTML java javascript javase jquery json linux 自动化 List lunar machine learning magento magneto MySQL php python qq Shell: expect - 自动交互脚本 Shell脚本 shell自动化 Spring Boot Ubuntu WebDriverIO 入门 WebDriverIO 教程 wordpress 买车必读 二手车 人工智能学习 农历 吴京 技术 文咏珊 时间戳 易烊千玺 电影 线上看 网页爬虫 节日 节气




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
  • movies
  • 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
  • 二手车
  • 会计
  • 跨境电商




Recent Comments

  • Splinter基本用法, python splinter用法, python自动化, Splinter实例, python网络爬虫, python selenium, python selenium框架 - Just Code on Xpath cheatsheet, XPath用法详解
  • Selenium webdriver 读取认证码, 读取亚马逊Amazon认证码, helium webdriver读取验证码, python读取图形验证码, Solve text captcha, python_anticaptcha - Just Code on helium详细教程, 轻量级Selenium webdriver, Python 自动化, helium安装升级, Helium实现web的自动化, 氦气, Helium文档
  • 簡詩樂見蘇七提到這件事,她先俏皮的朝顧子承做了個鬼臉,而後才認真下來,開口回道。 – Neftetreid on 100 个免费翻墙工具
  • 夜景辰不是已經死了么?他二王兄也親自去認過屍,確定從塞靈河中尋到的屍體就是夜景辰。 – Starving Vendors on 100 个免费翻墙工具
  • WebDriverIO 教程六:在 Selenium 中处理下拉列表, Handling Dropdown In Selenium, WebDriverIO 教程, WebDriverIO 入门 - Just Code on WebDriverIO 教程五:Selenium 定位器实例, Uses Selenium Locators in a Unique Way, WebDriverIO 教程, WebDriverIO 入门







  • 首页
  • 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 机器学习
  • Movies 电影电视剧线上看
  • 跨境电商




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