问题描述
我多次尝试将带有样式的 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 电子邮件课程，然后确保您在各种设备上的各种电子邮件客户端中进行测试。
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...