如何解决将样式和 html 转换为 Gmail 功能
我多次尝试将带有样式的 html 电子邮件发送到 gmail，但它总是破坏了它在普通 HTML 中所期望的样式。任何人都可以帮助我将其转换为具有 Gmail 功能且外观必须完全相同的文件？谢谢。
<div style="display: flex;justify-content: center;">
<div class="container" style="font-family: 'Manrope-Regular';max-width: 600px;border-style: solid;border-color: #7E7E7E;position: relative;height: fit-content;border-width: 1px;">
<img class="top-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 842 (1).png" style="max-width: 255px;position: absolute;right: 0;">
<img class="bottom-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 841.png" style="position: absolute;left: 0;bottom: 0;max-width: 270px;">
<div class="logo" style="font-family: 'Manrope-Regular';">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/08030440/mobile-menu-logo.png" style="margin: 41px auto;display: block;">
</div>
<div class="content" style="font-family: 'Manrope-Regular';margin: 0 100px;">
<p class="header" style="font-family: 'Manrope-Regular';">Hi [first_name] [last_name],</p>
<p class="para" style="font-family: 'Manrope-Regular';">Welcome to ChatSmart! Experience the powerful ChatSmart features to let you easily reach your customers. Not only increase customers loyalty through broadcast messages,but also lower abandon cart rate by supporting eCommerce platforms. Create your sales revenue by 24 / 7 answer customers' enquiries!
</p>
<p class="para" style="font-family: 'Manrope-Regular';">
<strong>Some popular resources which would be useful for you:</strong>
</p>
<ul>
<li style="font-weight: 400;"><a href="https://youtu.be/tWrIxgg1VlE"><span style="font-weight: 400;">How to login & connect WhatsApp? (Cantonese)</span></a></li>
<li style="font-weight: 400;"><a href="https://youtu.be/5-kRHNZJqKY"><span style="font-weight: 400;">How to start the chat with your customer? (Cantonese)</span></a></li>
</ul>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">
For more support,you may find below：
</p>
<ul>
<li style="font-weight: 400;"><a href="https://userguide.chatsmart.io/"><span style="font-weight: 400;">ChatSmart User Guide (Traditional Chinese)</span></a></li>
<li style="font-weight: 400;"><a href="https://wa.me/85267156250?text=%E6%88%91%E5%9C%A8ChatSmart%E9%9C%80%E8%A6%81%E5%8D%94%E5%8A%A9"><span style="font-weight: 400;">Technical Support</span></a></li>
</ul>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">Click below button to start your journey in ChatSmart!</p>
<a class="button button-text" href="[link]" style="justify-content: center;display: flex;">
<img style="max-width: 206px;" src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/21125343/login.png"/>
</a>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">More super practical content is on the way,stay tuned!</p>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">Thanks,</p>
<br>
<p class="signature" style="font-family: 'Manrope-Regular';font-weight: bold;">
ChatSmart Team<br>
Your Best WhatsApp Marketing Platform
</p>
<br>
<div class="soscial" style="font-family: 'Manrope-Regular';">
<a href="https://www.facebook.com/chatsmart.io"><img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06145810/Group-764.png" style="margin-right: 20px;"></a>
<a href="https://www.instagram.com/chatsmart.io/"><img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06150156/1-Group%20766.png" style="margin-right: 20px;"></a>
</div>
<br>
<div class="footer" style="font-family: 'Manrope-Regular';text-align: center;font-size: 8px;margin-bottom: 20px;">
©2021 ChatSmart,Inc. All rights reserved.
</div>
</div>
</div>
</div>更新：包括样式和头部块的版本。
<html>
<head>
<style>
@font-face {
font-family: 'Manrope-Regular';
src: url('https://saas-staging.chatsmart.io/font/Manrope-Regular.ttf') format("opentype");
}
p,div {
font-family: 'Manrope-Regular';
}
body{
display: flex;
justify-content: center;
}
.container {
max-width: 600px;
border-style: solid;
border-color: #7E7E7E;
position: relative;
height: fit-content;
border-width: 1px;
}
.top-bg {
max-width: 255px;
position: absolute;
right: 0;
}
.bottom-bg {
position: absolute;
left: 0;
bottom: 0;
max-width: 270px;
z-index: -1;
}
.logo img {
margin: 41px auto;
display: block;
}
.content {
margin: 0 100px;
}
a.button {
text-decoration: none;
}
.signature {
font-weight: bold;
}
.soscial img {
margin-right: 20px;
}
.footer {
text-align: center;
font-size: 8px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<img class="top-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 842 (1).png" />
<img class="bottom-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 841.png" />
<div class="logo">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/08030440/mobile-menu-logo.png" />
</div>
<div class="content">
<p class="header">Hi [first_name] [last_name],</p>
<p class="para">Welcome to ChatSmart! Experience the powerful ChatSmart features to let you easily reach your customers. Not only increase customers loyalty through broadcast messages,but also lower abandon cart rate by supporting eCommerce platforms. Create your sales revenue by 24 / 7 answer customers' enquiries!
</p>
<p class="para">
<strong>Some popular resources which would be useful for you:</strong>
</p>
<ul>
<li style="font-weight: 400;"><a href="https://youtu.be/tWrIxgg1VlE"><span style="font-weight: 400;">How to login & connect WhatsApp? (Cantonese)</span></a></li>
<li style="font-weight: 400;"><a href="https://youtu.be/5-kRHNZJqKY"><span style="font-weight: 400;">How to start the chat with your customer? (Cantonese)</span></a></li>
</ul>
<br/>
<p class="para">
For more support,you may find below：
</p>
<ul>
<li style="font-weight: 400;"><a href="https://userguide.chatsmart.io"><span style="font-weight: 400;">ChatSmart User Guide (Traditional Chinese)</span></a></li>
<li style="font-weight: 400;"><a href="https://wa.me/85267156250?text=%E6%88%91%E5%9C%A8ChatSmart%E9%9C%80%E8%A6%81%E5%8D%94%E5%8A%A9"><span style="font-weight: 400;">Technical Support</span></a></li>
</ul>
<br/>
<p class="para">Click below button to start your journey in ChatSmart!</p>
<a class="button button-text" href="[link]" style="justify-content: center;display: flex;">
<img style="max-width: 206px;" src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/21125343/login.png"/>
</a>
<br/>
<p class="para">More super practical content is on the way,stay tuned!</p>
<br/>
<p class="para">Thanks,</p>
<br/>
<p class="signature">
ChatSmart Team<br/>
Your Best WhatsApp Marketing Platform
</p>
<br/>
<div class="soscial">
<a href="https://www.facebook.com/chatsmart.io"><img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06145810/Group-764.png" /></a>
<a href="https://www.instagram.com/chatsmart.io/"><img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06150156/1-Group%20766.png" /></a>
</div>
<br/>
<div class="footer">
©2021 ChatSmart,Inc. All rights reserved.
</div>
</div>
</div>
</body>
</html>
解决方法
您需要彻底重新设计。你不能像网站一样开发电子邮件，因为有很多限制。例如，您需要编写内联代码，而不是依赖嵌入式 CSS（在 <style>...</style> 内）；诸如 div 和 flexbox 之类的东西是喜怒无常的 - 请参阅 caniemail.com。
查看任何 HTML 电子邮件模板或 HTML 电子邮件课程，然后确保您在各种设备上的各种电子邮件客户端中进行测试。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
