【发布时间】：2021-01-21 05:36:00
【问题描述】：
我多次尝试向 gmail 发送带有样式的 html 电子邮件，但它总是破坏它在普通 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>【问题讨论】：
-
你能分享你的整个 HTML 代码吗？ （带有
<head>和<style>标签）
标签： css email gmail html-email inline-styles