【发布时间】：2022-01-01 15:35:07
【问题描述】：
首先我知道这已经被问了很多像这两个：Building HTML emails .... 和 Can I put a ... tag .... 但我没有找到一个明确的有效 回答 ！！不然我听不懂！！p>
我已经检查了The Ultimate Guide to CSS，它说在<head></head> 中使用<style></style> 标签是可以的，gmail 和yahoo 以及@media 都可以。但我的模板在 gmail 或 yahoo 中没有任何样式。我想发送响应式电子邮件，所以我需要@media 还有有什么方法可以在电子邮件中使用:nth()？
我把sn-p放在下面，如果有人帮助我，我真的很感激！ 我用putsmail在gmail和yahoo邮件上测试过。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
-ms-text-size-adjust: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove extra space added to tables and cells in Outlook.
*/
table,
td {
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
}
/**
* Better fluid images in Internet Explorer.
*/
img {
-ms-interpolation-mode: bicubic;
}
/**
* Remove blue links for iOS devices.
*/
a[x-apple-data-detectors] {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-decoration: none !important;
}
/**
* Fix centering issues in Android 4.4.
*/
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
body {
max-width: 1100px !important;
height: 100% !important;
margin: 0 auto !important;
font-family: Tahoma;
background-color: #f7f7f7;
padding: 20px;
}
.rtl{
direction: rtl;
}
.ltr{
direction: ltr;
}
/**
* Collapse table borders to avoid space between cells.
*/
/* table {
border-collapse: collapse !important;
} */
a {
color: #1a82e2;
}
img {
height: auto;
line-height: 100%;
text-decoration: none;
border: 0;
outline: none;
}
p{
margin: 0px;
}
.main-padding{
padding: 20px;
}
.main_table{
background-color: #fff;
border: 1px solid #dddddd;
}
.header_section{
width: 100%;
color: #1a1b41;
border-bottom: 3px solid #ffc107;
font-size: 12px;
}
.title_section{
width: 100%;
color: #1a1b41;
border: 3px solid #1a1b41;
font-size: 15px;
text-align: center;
padding: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.status_section{
width: 100%;
color: #fff;
border-radius: 4px;
padding: 10px;
}
.status_section--success{
background-color: #28a745;
}
.status_section--fail{
background-color: #dc3545;
}
.status_section .icon_wrapper{
width: 62px;
height: 62px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.16);
}
.status_section .icon{
width: 26px;
margin: 18px;
}
.items_section_wrapper{
width: 60%;
padding: 10px 20px;
vertical-align: top;
}
.items_section{
width: 100%;
margin-bottom: 20px;
}
.items_section .avatar{
width: 40px;
height: 40px;
border-radius: 50%;
}
.items_section .info{
padding: 0px 8px;
}
.items_section .info .title{
margin-bottom: 2px;
text-align: start;
font-size: 14px;
color: #1a1b41;
font-weight: 700;
}
.items_section .info .location{
text-align: start;
font-size: 12px;
color: #505050;
}
.items_section .card{
background-color: #e4e4e4;
padding: 4px;
border-radius: 4px;
}
.items_section .card .image{
vertical-align: top;
width: 20%;
}
.items_section .card img{
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 15px;
box-shadow: 0px 2px 5px #a5a5a5;
}
.items_section .card .info_wrapper{
vertical-align: top;
}
.items_section .card .title{
font-size: 14px;
color: #000;
padding: 8px;
}
.items_section .card .price{
padding: 8px;
font-size: 18px;
color: #000;
}
.items_section .card .price{
padding: 8px;
font-size: 18px;
color: #000;
}
.items_section .card .price-total{
padding: 8px 0;
font-size: 18px;
color: #000;
font-weight: 800;
text-align: end;
}
.items_section .card .sign{
padding: 0 4px;
font-size: 16px;
color: #505050;
font-weight: 800;
}
.items_section .card .number{
font-size: 18px;
color: #000;
font-weight: 800;
}
.items_section .card .attr{
padding: 0px 8px;
}
.items_section .card .dot{
color: #ff3366;
font-size: 16px;
}
.rtl .items_section .card .value{
color: #1a1b41;
font-size: 12px;
margin-bottom: 4px;
width: 50%;
font-weight: 800;
float: right;
}
.ltr .items_section .card .value{
color: #1a1b41;
font-size: 12px;
margin-bottom: 4px;
width: 50%;
font-weight: 800;
float: left;
}
.items_section .shipping_wrapper{
width: 100%;
font-size: 12px;
font-weight: 700;
}
.items_section .shipping_wrapper .icon{
width: 20px;
}
.details_wrapper{
width: 100%;
}
.total_recipient_table-side{
padding: 10px 20px;
vertical-align: top;
}
.total_recipient_table-bottom{
display: none;
}
.detail_table{
width: 100%;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
border-radius: 4px;
border-spacing: 0;
}
.detail_table .header{
font-size: 16px;
font-weight: 700;
text-align: start;
padding: 8px;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .rows:nth-child(even){
background-color: #eee;
}
.detail_table .rows .title{
font-size: 12px;
font-weight: 700;
padding: 8px;
text-align: start;
min-width: 100px;
}
.detail_table .rows .text{
font-size: 12px;
font-weight: 700;
padding: 8px;
text-align: end;
}
.btns_section{
width: 100%;
}
.btns_section .btn_wrapper{
display: flex;
flex-wrap: wrap;
}
.btns_section button{
font-size: 13px;
padding: 8px;
min-width: 100px;
color: #fff;
text-transform: uppercase;
border: none;
margin: 4px;
}
.btns_section button:hover{
cursor: pointer;
}
.btns_section button:focus{
outline: none;
}
.btn_s{
background-color: #28a745;
}
.btn_d{
background-color: #dc3545;
}
.btn_w{
background-color: #ffc107;
}
.btn_i{
background-color: #17a2b8;
}
.action_section button{
background-color: #ffc107;
font-size: 15px;
padding: 10px;
min-width: 150px;
color: #fff;
text-transform: uppercase;
border: none;
}
.action_section button:hover{
background-color: #ffc107ee;
cursor: pointer;
}
.action_section button:focus{
background-color: #ffc107ee;
outline: none;
}
.footer_section{
width: 100%;
border-top: 3px solid #757575;
}
.footer_section td{
font-size: 10px;
text-align: center;
color: #1a1b41;
}
.footer_section a{
text-decoration: none;
color: #1a1b41;
}
.footer_section a:hover{
color: #ffc107;
}
.mobile{
display: none;
}
@media (max-device-width: 767px),
(max-width: 767px) {
body{
padding: 5px;
}
.main-padding{
padding: 10px 5px;
}
.items_section_wrapper{
width: 100%;
padding: 10px 5px;
}
.items_section .card .image{
width: 25%;
}
.items_section .card img{
border-radius: 4px;
}
.items_section .card .attr{
padding: 8px 0 0;
}
.items_section .card .price{
padding: 8px 0 0;
font-size: 16px;
}
.ltr .items_section .card .price{
float: left;
}
.rtl .items_section .card .price{
float: right;
}
.items_section .card .price-total{
padding: 8px 0 0;
font-size: 16px;
}
.items_section .card .sign{
padding: 0 4px;
font-size: 14px;
}
.items_section .card .number{
font-size: 16px;
}
.total_recipient_table-side{
display: none;
}
.total_recipient_table-bottom{
display: table-row;
}
.desktop{
display: none;
}
.mobile{
display: table;
}
}
</style>
</head>
<!-- ltr / rlt -->
<body class="ltr">
<!-- start preheader -->
<div class="preheader" style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0;">
<!-- A preheader is the short summary text that follows the subject line when an email is viewed in the inbox. -->
Your Order submitted
</div>
<!-- end preheader -->
<!-- start body -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="main_table">
<tr>
<td align="center" class="main-padding">
<table class="header_section">
<tr>
<td>
Example.com
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<table class="title_section">
<tr>
<td>
Your <span style="color: #ffc107;">Order</span>
</td>
</tr>
<tr>
<td>
Thanks for choosing us!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<!-- for failed change status_section--success to status_section--fail ALSO img src to times-circle-solid.png -->
<table class="status_section status_section--success">
<tr>
<td style="width:70px;">
<div class="icon_wrapper">
<img class="icon" src="check-circle-solid.png">
</div>
</td>
<td style="font-weight: 700;font-size: 14px;">
payment was successful<span> - your invoice code: </span><span>1235789</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tr>
<td class="items_section_wrapper">
<table class="items_section">
<tr class="vendor">
<td style="width: 40px;">
<img src="1.jpg" class="avatar">
</td>
<td class="info">
<p class="title">Vendor Name</p>
<p class="location">location</p>
</td>
</tr>
<tr>
<td colspan="2" class="card">
<table style="width: 100%; border-spacing: 0;">
<tr>
<td class="image">
<img src="1.jpg">
</td>
<td class="info_wrapper">
<table style="width: 100%;">
<tr>
<td class="title" colspan="2">Lorem Ipsum</td>
</tr>
<tr class="desktop">
<td colspan="2" class="attr">
<p class="value"><span class="dot">• </span>color: red</p>
</td>
</tr>
<tr class="desktop">
<td class="price">12 $<span class="sign">×</span><span class="number">10</span></td>
<td class="price-total">120 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 100%;" class="mobile">
<tr>
<td class="attr" colspan="1">
<p class="value"><span class="dot">• </span>color: red</p>
</td>
</tr>
<tr>
<td>
<p class="price">12 $<span class="sign">×</span><span class="number">10</span></p>
<p class="price-total">120 $</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="shipping_wrapper">
<tr>
<td style="width: 24px;">
<img src="truck-solid.png" class="icon">
</td>
<td>shipping</td>
<td style="text-align: end;">20 $</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="total_recipient_table-side">
<table class="details_wrapper">
<tr>
<td style="padding-bottom:24px;">
<table class="detail_table">
<tr>
<td class="header" colspan="2">calc</td>
</tr>
<tr class="rows">
<td class="title">Items</td>
<td class="text">120 $</td>
</tr>
<tr class="rows">
<td class="title">Tax Fee</td>
<td class="text">10 $</td>
</tr>
<tr class="rows">
<td class="title">Shipping</td>
<td class="text">20 $</td>
</tr>
<tr class="rows">
<td class="title">Total</td>
<td class="text">150 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="detail_table">
<tr>
<td class="header" colspan="2">recipient</td>
</tr>
<tr class="rows">
<td class="title">full name</td>
<td class="text">John Doe</td>
</tr>
<tr class="rows">
<td class="title">email</td>
<td class="text">jdoe@example.com</td>
</tr>
<tr class="rows">
<td class="title">phone</td>
<td class="text">00000000000</td>
</tr>
<tr class="rows">
<td class="title">address</td>
<td class="text">.............</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="total_recipient_table-bottom">
<td class="main-padding">
<table class="details_wrapper">
<tr>
<td style="padding-bottom:24px;">
<table class="detail_table">
<tr>
<td class="header" colspan="2">calc</td>
</tr>
<tr class="rows">
<td class="title">Items</td>
<td class="text">120 $</td>
</tr>
<tr class="rows">
<td class="title">Tax Fee</td>
<td class="text">10 $</td>
</tr>
<tr class="rows">
<td class="title">Shipping</td>
<td class="text">20 $</td>
</tr>
<tr class="rows">
<td class="title">Total</td>
<td class="text">150 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="detail_table">
<tr>
<td class="header" colspan="2">recipient</td>
</tr>
<tr class="rows">
<td class="title">full name</td>
<td class="text">John Doe</td>
</tr>
<tr class="rows">
<td class="title">email</td>
<td class="text">jdoe@example.com</td>
</tr>
<tr class="rows">
<td class="title">phone</td>
<td class="text">00000000000</td>
</tr>
<tr class="rows">
<td class="title">address</td>
<td class="text">.............</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<table class="btns_section">
<tr>
<td class="btn_wrapper">
<a href="#"><button class="btn_s">Accept</button></a>
<a href="#"><button class="btn_d">Delete</button></a>
<a href="#"><button class="btn_w">Reject</button></a>
<a href="#"><button class="btn_i">Pend</button></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding" style="padding-top: 40px;padding-bottom: 40px;">
<table class="action_section">
<tr>
<td>
<a href="#"><button>Button</button></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<table class="footer_section">
<tr>
<td>
Copyright © 2020 example.com All rights reserved | <span><a href="#">Home</a></span> | <span><a href="#">Contact Us</a></span> |
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end body -->
</body>
</html>【问题讨论】：
标签： html css email html-email