html源码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>任务提醒</title>
<style>
body {
font-family: "微软雅黑";
}
.textTable {
width: 95%;
padding: 0;
margin: auto;
}
.textColor {
font-size: 15px;
}
.KeyTasks {
width: 95%;
padding: 0;
margin: auto;
border-collapse: collapse;
border-top: 2px solid #e5e9ed;
border-left: 2px solid #e5e9ed;
border-right: 2px solid #e5e9ed;
border-bottom: 3px solid #e5e9ed;
}
.KeyTasks_Title {
color: #ffffff;
background: #3D4C54 no-repeat;
text-align: center;
height: 35px;
font-size: 12px;
}
.KeyTasks_Column_Content {
height: 35px;
}
.KeyTasks_Column_TaskName {
color: #c1bdbd;
background: #f2f6fa no-repeat;
text-align: left;
width: 55%;
text-indent: 1em;
font-size: 12px;
}
.KeyTasks_Column_TaskDate {
color: #c1bdbd;
background: #fafffc no-repeat;
text-align: left;
width: 20%;
text-indent: 1em;
font-size: 12px;
}
.KeyTasks_Column_TaskOwner {
color: #c1bdbd;
background: #fafffc no-repeat;
text-align: left;
width: 20%;
border-left: 2px solid #e5e9ed;
text-indent: 1em;
font-size: 12px;
}
.KeyTasks_TaskName {
color: #414649;
background: #f2f6fa no-repeat;
text-align: left;
text-indent: 1em;
border-bottom: 2px solid #e5e9ed;
font-weight: 600;
font-size: 10px;
}
.KeyTasks_TaskDate {
color: #414649;
background: #fafffc no-repeat;
text-align: left;
text-indent: 1em;
border-bottom: 2px solid #e5e9ed;
font-weight: 600;
font-size: 10px;
}
.KeyTasks_TaskOwner {
color: #414649;
background: #fafffc no-repeat;
text-align: left;
border-left: 2px solid #e5e9ed;
text-indent: 1em;
border-bottom: 2px solid #e5e9ed;
font-weight: 600;
font-size: 10px;
}
.KeyTasks_Content {
height: 50px;
font-size: 12px;
}
.WeekTask {
border: 2px solid #e5e9ed;
width: 95%;
padding: 0;
margin: auto;
border-collapse: collapse;
}
.WeekTask_KeyGates_Style {
width: 9%;
text-align: center;
background: #3D4C54 no-repeat;
color: #ffffff;
border-right: 2px solid #e5e9ed;
}
.WeekTask_KeyGates_null {
width: 5%;
text-align: center;
color: #ffffff;
border-right: 2px solid #e5e9ed;
background: #3D4C54;
font-size: 12px;
}
.table2_th_hide {
display: none;
}
.WeekTask_KeyGates_Name {
font-size: 12px;
}
.WeekTask_KeyGates_Date {
color: #ffffff;
font-size: 10px;
}
.WeekTask_KeyGates_Details_Blue {
color: #555252;
width: 2%;
border: 2px solid #e5e9ed;
text-align: center;
background: #F0F9FE;
font-size: 12px;
font-weight: 900;
}
.WeekTask_KeyGates_Details_Purple {
color: #555252;
width: 2%;
border: 2px solid #e5e9ed;
text-align: center;
background: #F6F6FE;
font-size: 12px;
font-weight: 900;
}
.WeekTask_KeyGates_Details_Orange {
color: #555252;
width: 2%;
border: 2px solid #e5e9ed;
text-align: center;
background: #FFF5EC;
font-size: 12px;
font-weight: 900;
}
.WeekTask_KeyGates_Details_LightBrown {
color: #555252;
width: 2%;
border: 2px solid #e5e9ed;
text-align: center;
background: #9a838e;
font-size: 12px;
font-weight: 900;
}
.WeekTask_KeyGates_Content {
height: 50px;
background: #ffffff;
border: 2px solid #e5e9ed;
}
.WeekTask_KeyGates_Task_Blue {
height: 100%;
background: #F0F9FE;
font-weight: 600;
}
.WeekTask_KeyGates_Task_Purple {
height: 100%;
background: #F6F6FE;
font-weight: 600;
}
.WeekTask_KeyGates_Task_Orange {
height: 100%;
background: #FFF5EC;
font-weight: 600;
}
.WeekTask_KeyGates_Task_LightBrown {
height: 100%;
background: #9a838e;
font-weight: 600;
}
.WeekTask_KeyGates_Task_Details {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
color: #555252;
}
.WeeksFour {
width: 95%;
padding: 0;
margin: auto;
border-collapse: collapse;
}
.WeeksFour_Column {
height: 50px;
}
.WeeksFour_Column_Season {
color: #ffffff;
background: #3D4C54 no-repeat;
text-align: center;
width: 7%;
border-right: 2px solid #e5e9ed;
border-bottom: 2px solid #e5e9ed;
border-top: 2px solid #e5e9ed;
border-left: 2px solid #e5e9ed;
font-size: 12px;
}
.WeeksFour_Column_WeekDetails {
color: #FFFFFF;
background: #3D4C54 no-repeat;
text-align: center;
width: 12%;
border-right: 2px solid #e5e9ed;
border-top: 2px solid #e5e9ed;
}
.WeeksFour_Column .WeeksFour_Column_WeekName {
color: #ffffff;
font-size: 12px;
}
.WeeksFour_Column_WeekDate {
font-size: 10px;
}
.WeeksFour tr td {
height: 71px;
border-right: 2px solid #e5e9ed;
border-bottom: 2px solid #e5e9ed;
border-top: 2px solid #e5e9ed;
border-left: 2px solid #e5e9ed;
}
.WeeksFour_Blue {
color: #555252;
font-weight: bolder;
text-align: center;
font-size: 12px;
background: #F0F9FE;
}
.WeeksFour_Purple {
color: #555252;
font-weight: 900;
text-align: center;
font-size: 12px;
background: #F6F6FE;
}
.WeeksFour_Orange {
color: #555252;
font-weight: 900;
text-align: center;
font-size: 12px;
background: #FFF5EC;
}
.WeeksFour_LightBrown {
color: #555252;
font-weight: 900;
text-align: center;
font-size: 12px;
background: #9a838e;
}
.WeeksFour_Content_Task {
width: 90%;
height: 40%;
font-size: 10px;
color: #414649;
margin: auto;
padding-top: 10px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
position: relative;
line-height: 1.4em;
font-weight: 600;
}
.WeeksFour_Content_Gate {
width: 90%;
height: 30%;
font-size: 8px;
color: #c1bdbd;
font-weight: 600;
margin: auto;
}
.WeeksFour_Content_DateFrom {
width: 90%;
height: 10%;
font-size: 8px;
color: #c1bdbd;
font-weight: 600;
margin: auto;
}
.WeeksFour_Content_Blue {
height: 100%;
width: 100%;
background: #F0F9FE;
margin: auto;
}
.WeeksFour_Content_Purple {
height: 100%;
width: 100%;
background: #F6F6FE;
margin: auto;
}
.WeeksFour_Content_Orange {
height: 100%;
width: 100%;
background: #FFF5EC;
margin: auto;
}
.WeeksFour_Content_LightBrown {
height: 100%;
width: 100%;
background: #9a838e;
margin: auto;
}
.spacing {
height: 17px;
}
</style>
</head>
<body>
<table width="80%" align="center">
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table class='textTable' style="border-collapse:collapse;float:left;margin:10px">
<tr>
<td>
<span class="textColor">Dear All</span><br />
<img src="cid:BiReport" width="100%" height="5%" /><br />
<span class="textColor">This is a weekly system notification from E2E Process System for <%text_date%></span><br />
<span class="textColor">You can check out <a href='Https://cvprodtool.nike.com' style='color: #4788BD; text-decoration: none;'>Here</a> for details as well.</span><br />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table style="border-collapse:collapse;float:left;margin:10px">
<tr>
<td>
<span class="textColor">Where the Task is in Game Plan this week。</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table class='WeekTask' style="border-collapse:collapse;float:left;margin:10px">
<%tabel2_th%>
<%tabel2_tr%>
</table>
</td>
</tr>
<tr class="spacing"></tr>
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table class='KeyTasks' style="border-collapse:collapse;float:left;margin:10px">
<tr class='KeyTasks_Title'>
<th colspan='3'>KEY GATE NOTIFICATION(<%AKeyTasksDate%>)</th>
</tr>
<tr class='KeyTasks_Column_Content'>
<th class='KeyTasks_Column_TaskName'>KEY GATE</th>
<th class='KeyTasks_Column_TaskDate'>DATE</th>
<th class='KeyTasks_Column_TaskOwner'>OWNER</th>
</tr>
<%tabel1_tr%>
</table>
</td>
</tr>
<tr class="spacing"></tr>
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table style="border-collapse:collapse;float:left;margin:10px">
<tr>
<td>
<span class="textColor">Happy to share the following 4 weeks Calendar for your information</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table class='WeeksFour' style="border-collapse:collapse;float:left;margin:10px;">
<%tabel3_1_th%>
<%tabel3_1_tr%>
</table>
<table>
<tr style="height:6px;"></tr>
</table>
<table class='WeeksFour' style="border-collapse:collapse;float:left;margin:10px;">
<%tabel3_2_th%>
<%tabel3_2_tr%>
</table>
<table>
<tr style="height:6px;"></tr>
</table>
<table class='WeeksFour' style="border-collapse:collapse;float:left;margin:10px;">
<%tabel3_3_th%>
<%tabel3_3_tr%>
</table>
<table>
<tr style="height:6px;"></tr>
</table>
<table class='WeeksFour' style="border-collapse:collapse;float:left;margin:10px;">
<%tabel3_4_th%>
<%tabel3_4_tr%>
</table>
</td>
</tr>
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table class='textTable' style="border-collapse:collapse;float:left;margin:10px;">
<tr>
<td>
<img src='cid:BiReport' width="100%" height="5%" /><br />
</td>
</tr>
</table>
</td>
</tr>
<tr class="spacing"></tr>
<tr>
<td>
<table style="border-collapse:collapse;float:left;margin:10px"></table>
</td>
<td>
<table style="border-collapse:collapse;float:left;margin:10px;">
<tr>
<td>
<img src='cid:companyIcon' /><br />
<span style="font-size: 12px; font-weight: bolder; ">Best Regards,</span><br />
<span style="font-size: 12px; font-weight: bolder; ">Asia E2E Process Tool</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
效果