gpt4 book ai didi

html - 如何使用 HTML 将边框应用于电子邮件模板

转载 作者:行者123 更新时间:2023-11-27 22:55:37 27 4
gpt4 key购买 nike

我设计了一个电子邮件模板,其中包含横幅图像和表格行等。一切都完美对齐。但我想将所有内容都设置在一个边框中。

下面是我的代码片段和输出我收到的内容,任何人都可以帮助我如何实现。

<p><img src="medical.jpg" width="100%" height="144" /></p>
<p>&nbsp;</p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
</span>
</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by&nbsp;<strong>${u_project_manager}</strong>.</span></span>
</p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p>&nbsp;</p>

最佳答案

这是代码。希望对您有所帮助。如果有任何更改,请告诉我。

https://jsfiddle.net/rfx2jkc1/

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
.main-table {
width: 640px;
margin: 0 auto;
}

.logo-table {
width: 100%;
padding-bottom: 10px;
}

.content-table {
width: 100%;
}

.content-area {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}

.content {
background-color: #fff;
padding: 20px;
font-family: "Segoe UI", Arial;
font-size: 0.9em;
color: #111111;
}

.content table {
font-family: "Segoe UI", Arial;
font-size: 0.9em;
color: #111111;
border: 0
}

.receiverName {
font-family: "Segoe UI", Arial;
font-size: 1.1em;
color: #006699;
font-weight: lighter;
}

.senderName {
display: block;
}

.customer-password {
display: none;
}

.template-table {
border-collapse: collapse;
}

.template-table td {
border-top: 1px solid #ccc;
padding: 10px
}

.template-table td:last-child {
border-bottom: 1px solid #ccc;
}

.border-bottom {
border-bottom: 1px solid #ccc
}

.padding0 {
padding: 0;
}

</style>
</head>

<body>
<table class="main-table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td class="content-area">
<table class="logo-table" border="0" cellspacing="0" cellpadding="10">
<tr>
<td bgcolor="#0693ce" align="center">
<img src="#" width="200" />
</td>
</tr>
</table>
<table class="content-table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content">
<div>Hello [CustomerName],</div>
<br />
<p align="center"><strong>
<font color="#000000" size="3" face="Segoe UI, Arial">Congratulations! You have created user with below credentials on
<a href="[PortalUrlForEmail]" target="_blank">[ABCProviderName] CSP Portal.</a></font>
</strong>
</p>
<br />
<table width="100%" cellpadding="5" cellspacing="1" bgcolor="#cccccc" class="template-table">
<tr bgcolor="#fff">
<td align="left" width="30%">
<strong>
<font color="#000000" size="2" face="Segoe UI, Arial">UserName</font>
</strong>
</td>
<td align="right" width="70%">
<font color="#000000" size="2" face="Segoe UI, Arial">[EmailID]</font>
</td>
</tr>

<tr bgcolor="#fff">
<td align="left" width="30%">
<strong>
<font color="#000000" size="2" face="Segoe UI, Arial">Password</font>
</strong>
</td>
<td align="right" width="70%">
<font color="#000000" size="2" face="Segoe UI, Arial">[Password]</font>
</td>
</tr>

</table>
<br />
<br />
<br />
<span>Thank You,</span>
<br />
<span class="senderName">[ABCProviderName] CSP.</span>
</td>
</tr>
</table>

</td>
</tr>
</table>
</body>

</html>

关于html - 如何使用 HTML 将边框应用于电子邮件模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59264783/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com