Javascript 电子邮件模板的背景图像在outlook任何版本中都不起作用
我已经创建了一个包含一些Javascript 电子邮件模板的背景图像在outlook任何版本中都不起作用,javascript,html,css,email,outlook,Javascript,Html,Css,Email,Outlook,我已经创建了一个包含一些前景和背景图像的电子邮件模板。 我发现outlook不接受背景图像，除了在主体标记中。 我只想为页眉和页脚 有人有其他的解决办法吗。 我花了那么多时间，但没有得到任何运气 有人给了背景图像和td标签 这是 不幸的是，这对我不起作用，可能是我做错了什么，因为我对HTML和CSS 我已经采取了响应模板，并修改它作为我的要求 这是我的模板代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
前景背景背景主体页眉和页脚
有人有其他的解决办法吗。
我花了那么多时间，但没有得到任何运气
有人给了背景
图像和td标签
这是
不幸的是，这对我不起作用，可能是我做错了什么，因为我对HTML
和CSS
我已经采取了响应模板，并修改它作为我的要求
这是我的模板
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no" /> <!-- disable auto telephone linking in iOS -->
<title>Respmail is a response HTML email designed to work on all major email platforms and smartphones</title>
<style type="text/css">
/* RESET STYLES */
body, #bodyTable, #bodyCell, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;font-family:Helvetica, Arial, "Lucida Grande", sans-serif;}
table{border-collapse:collapse;}
table[id=bodyTable] {width:100%!important;margin:auto;max-width:500px!important;color:#7A7A7A;font-weight:normal;}
img, a img{border:0; outline:none; text-decoration:none;height:auto; line-height:100%;}
a {text-decoration:none !important;border-bottom: 1px solid;}
h1, h2, h3, h4, h5, h6{color:#5F5F5F; font-weight:normal; font-family:Helvetica; font-size:20px; line-height:125%; text-align:Left; letter-spacing:normal;margin-top:0;margin-right:0;margin-bottom:10px;margin-left:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;}
/* CLIENT-SPECIFIC STYLES */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;display:block;outline:none; text-decoration:none;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-weight:normal!important;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
.ExternalClass td[class="ecxflexibleContainerBox"] h3 {padding-top: 10px !important;} /* Force hotmail to push 2-grid sub headers down */
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
h1{display:block;font-size:26px;font-style:normal;font-weight:normal;line-height:100%;}
h2{display:block;font-size:20px;font-style:normal;font-weight:normal;line-height:120%;}
h3{display:block;font-size:17px;font-style:normal;font-weight:normal;line-height:110%;}
h4{display:block;font-size:18px;font-style:italic;font-weight:normal;line-height:100%;}
.flexibleImage{height:auto;}
.linkRemoveBorder{border-bottom:0 !important;}
table[class=flexibleContainerCellDivider] {padding-bottom:0 !important;padding-top:0 !important;}
body, #bodyTable{background-color:#E1E1E1;}
#emailHeader{background-color:#E1E1E1;}
#emailBody{background-color:#FFFFFF;}
#emailFooter{background-color:#E1E1E1;}
.textContent, .textContentLast{color:#8B8B8B; font-family:Helvetica; font-size:16px; line-height:125%; text-align:Left;}
.textContent a, .textContentLast a{color:#205478; text-decoration:underline;}
.nestedContainer{background-color:#F8F8F8; border:1px solid #CCCCCC;}
.emailButton{background-color:#205478; border-collapse:separate;}
.buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
.buttonContent a{color:#FFFFFF; display:block; text-decoration:none!important; border:0!important;}
.emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
.emailCalendarMonth{background-color:#205478; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
.emailCalendarDay{color:#205478; font-family:Helvetica, Arial, sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
.imageContentText {margin-top: 10px;line-height:0;}
.imageContentText a {line-height:0;}
#invisibleIntroduction {display:none !important;} /* Removing the introduction text from the view */
/*FRAMEWORK HACKS & OVERRIDES */
span[class=ios-color-hack] a {color:#275100!important;text-decoration:none!important;} /* Remove all link colors in IOS (below are duplicates based on the color preference) */
span[class=ios-color-hack2] a {color:#205478!important;text-decoration:none!important;}
span[class=ios-color-hack3] a {color:#8B8B8B!important;text-decoration:none!important;}
/* A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers. Use these two blocks of code to "unstyle" any numbers that may be linked. The second block gives you a class to apply with a span tag to the numbers you would like linked and styled.
Inspired by Campaign Monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/.
*/
.a[href^="tel"], a[href^="sms"] {text-decoration:none!important;color:#606060!important;pointer-events:none!important;cursor:default!important;}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration:none!important;color:#606060!important;pointer-events:auto!important;cursor:default!important;}
/* MOBILE STYLES */
@media only screen and (max-width: 480px){
/*////// CLIENT-SPECIFIC STYLES //////*/
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
/* FRAMEWORK STYLES */
/*
CSS selectors are written in attribute
selector format to prevent Yahoo Mail
from rendering media query styles on
desktop.
*/
table[id="emailHeader"], table[id="emailBody"], table[id="emailFooter"], table[class="flexibleContainer"] {width:100% !important;}
td[class="flexibleContainerBox"], td[class="flexibleContainerBox"] table {display: block;width: 100%;text-align: left;}
/*
The following style rule makes any
image classed with 'flexibleImage'
fluid when the query activates.
Make sure you add an inline max-width
to those images to prevent them
from blowing out.
*/
td[class="imageContent"] img {height:auto !important; width:100% !important; max-width:100% !important;}
img[class="flexibleImage"]{height:auto !important; width:100% !important;max-width:100% !important;}
img[class="flexibleImageSmall"]{height:auto !important; width:auto !important;}
/*
Create top space for every second element in a block
*/
table[class="flexibleContainerBoxNext"]{padding-top: 10px !important;}
/*
Make buttons in the email span the
full width of their container, allowing
for left- or right-handed ease of use.
*/
table[class="emailButton"]{width:100% !important;}
td[class="buttonContent"]{padding:0 !important;}
td[class="buttonContent"] a{padding:15px !important;}
}
/* CONDITIONS FOR ANDROID DEVICES ONLY
* http://developer.android.com/guide/webapps/targeting.html
* http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/ ;
=====================================================*/
@media only screen and (-webkit-device-pixel-ratio:.75){
/* Put CSS for low density (ldpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1){
/* Put CSS for medium density (mdpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
/* Put CSS for high density (hdpi) Android layouts in here */
}
/* end Android targeting */
/* CONDITIONS FOR IOS DEVICES ONLY
=====================================================*/
@media only screen and (min-device-width : 320px) and (max-device-width:568px) {
}
/* end IOS targeting */
</style>
<!--
Outlook Conditional CSS
These two style blocks target Outlook 2007 & 2010 specifically, forcing
columns into a single vertical stack as on mobile clients. This is
primarily done to avoid the 'page break bug' and is optional.
More information here:
http://templates.mailchimp.com/development/css/outlook-conditional-css
-->
<!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
<!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
</head>
<body bgcolor="#eef0f2" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center style="background-color:#eef0f2;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="table-layout: fixed;max-width:100% !important;width: 100% !important;min-width: 100% !important;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#eef0f2;" border="0" cellpadding="0" cellspacing="0" width="500" id="emailHeader">
<!-- HEADER ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" valign="middle" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
<tr>
<td align="right" valign="middle" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSN7rd-ot8ZAUnwwvNbeiEZiduAcGow2siJGdT-nGCbBWrv3EbN4tGdE1xk" width="800" class="flexibleImage" alt="Text" title="Logo" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // END -->
</table>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="800" id="emailBody">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="800" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="textContent">
<h2 style="line-height:100%;font-family:Helvetica,Arial,sans-serif;font-size:34px;font-weight:normal;margin-bottom:5px;text-align:center;">An Article has been shared with you!</h2>
<h3 style="text-align:center;font-family:Helvetica,Arial,sans-serif;font-size:24px;margin-bottom:0;line-height:135%;"><span style="color:#df5d5d;">User name</span> shared:</h3>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="40" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" style="margin-top:-33px" cellpadding="5" cellspacing="0" width="600" height="222" class="flexibleContainer">
<tr style="background:#eff0f2;">
<td valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="http://www.caribbeanbelleweddings.com/wp-content/uploads/2013/03/slide-circle-green.png" width="210" class="flexibleImage" style="max-width:100%;height:216px" alt="Text" title="Text" />
</td>
</tr>
</table>
</td>
<td align="left" valign="center" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<h3 style="color:#5F5F5F;line-height:125%;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:normal;margin-top:0;margin-bottom:3px;text-align:left;">Tales of travelling and working abroad</h3>
<div style="text-align:left;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;color:#5F5F5F;line-height:135%;">www.nytimes.com</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<tr bgcolor="#eef0f2">
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="40" cellspacing="0" width="100%">
<tr >
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="30" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td style="padding-bottom:0;" valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="90" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="http://www.caribbeanbelleweddings.com/wp-content/uploads/2013/03/slide-circle-green.png" width="73" class="flexibleImageSmall" style="max-width:100%;" alt="Text" title="Text" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr style="background:#eef0f2">
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="30" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td style="padding-top:0;" align="center" valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="flexibleContainer">
<tr>
<td align="left" valign="top" class="textContent">
<div style="text-align:left;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;margin-top:10px;color:#5F5F5F;line-height:135%;">Pellentesque habitant morbi tristique senectus netus malesuada et fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr style="background:#eef0f2">
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="800" class="flexibleContainer">
<tr>
<td valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
<tr>
<td align="right" valign="middle" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRIZb29YAMj68dNKayEUfR7KMIOJD8rmf1etLqqRDfI6f0XG_3H" width="800" class="flexibleImage" alt="Text" title="Logo" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Respmail是一种响应HTML电子邮件，设计用于所有主要电子邮件平台和智能手机
/*重置样式*/
正文，#bodyTable，#bodyCell，#bodyCell{高度：100%！重要；边距：0；填充：0；宽度：100%！重要；字体系列：Helvetica，Arial，“Lucida Grande”，无衬线；}
表{边框折叠：折叠；}
表格[id=bodyTable]{宽度：100%！重要；边距：自动；最大宽度：500px！重要；颜色：#7a7a；字体重量：正常；}
img，一个img{边框：0；轮廓：无；文本装饰：无；高度：自动；线条高度：100%；}
{文本装饰：无！重要；边框底部：1px实心；}
h1，h2，h3，h4，h5，h6{颜色：#5F5F；字体重量：正常；字体系列：Helvetica；字体大小：20px；行高：125%；文本对齐：左；字母间距：正常；页边距顶部：0；页边距右侧：0；页边距底部：10px；页边距左侧：0；填充顶部：0；填充底部：0；填充左侧：0；填充右侧：0；}
/*特定于客户端的样式*/
.ReadMsgBody{width:100%；}.ExternalClass{width:100%；}/*强制Hotmail/Outlook.com以全宽显示电子邮件*/
.ExternalClass、.ExternalClass p、.ExternalClass span、.ExternalClass font、.ExternalClass td、.ExternalClass div{行高：100%；}/*强制Hotmail/Outlook.com正常显示行高*/
表，td{mso table lspace:0pt；mso table rspace:0pt；}/*删除Outlook 2007及更高版本中表之间的间距*/
#outlook a{padding:0；}/*强制outlook 2007及更高版本提供“在浏览器中查看”消息*/
img{-ms插值模式：双三次；显示：块；轮廓：无；文本装饰：无；}/*强制IE平滑渲染调整大小的图像*/
正文、表格、td、p、a、li、blockquote{-ms文本大小调整：100%；-webkit文本大小调整：100%；字体重量：正常！重要；}/*防止基于Windows和webkit的移动平台更改声明的文本大小*/
.ExternalClass td[class=“ecxflexibleContainerBox”]h3{padding top:10px！important；}/*强制hotmail向下推送2网格子标题*/
/*/\/\/\/\/\/\/\/\/\/模板样式/\/\/\/\/\/\/\/\/\/*/
/*=============页面样式===================*/
h1{显示：块；字体大小：26px；字体样式：正常；字体重量：正常；行高：100%；}
h2{显示：块；字体大小：20px；字体样式：正常；字体重量：正常；行高：120%；}
h3{显示：块；字体大小：17px；字体样式：正常；字体重量：正常；行高：110%；}
h4{显示：块；字体大小：18px；字体样式：斜体；字体重量：正常；行高：100%；}
.flexibleImage{height:auto；}
.linkRemoveBorder{边框底部：0！重要；}
表[class=flexibleContainerCellDivider]{填充底部：0！重要；填充顶部：0！重要；}
正文，#正文表格{背景色：#E1E1E1；}
#emailHeader{背景色：#E1E1E1；}
#emailBody{背景色：#FFFFFF；}
#电子邮件页脚{背景色：#E1E1E1；}
.textContent.textContentLast{color:#8b；字体系列：Helvetica；字体大小：16px；行高：125%；文本对齐：左；}
.textContent a、.textContentLast a{color:#205478；文本装饰：下划线；}
.nestedContainer{背景色：#F8F8F8；边框：1px实心#CCCCCC；}
.emailButton{背景色：#205478；边框折叠：分离；}
.buttonContent{color:#ffffffff；字体系列：Helvetica；字体大小：18px；字体重量：粗体；线条高度：100%；填充：15px；文本对齐：居中；}
.button内容a{color:#ffffffff；显示：块；文本装饰：无！重要；边框：0！重要；}
.emailCalendar{背景色：#FFFFFF；边框：1px实心#CCCCCC；}
.emailCalendarMonth{背景色：#205478；颜色：#FFFFFF；字体系列：Helvetica，Arial，无衬线；字体大小：16px；字体重量：粗体；顶部填充：10px；底部填充：10px；文本对齐：中心；}
.emailCalendarDay{color:#205478；字体系列：Helvetica，Arial，无衬线；字体大小：60px；字体大小：粗体；线条高度：100%；顶部填充：20px；底部填充：20px；文本对齐：中心；}
.imageContentText{页边距顶部：10px；行高：0；}
.imageContentText a{行高：0；}
#invisibleIntroduction{display:none！important；}/*正在从视图中删除简介文本*/
/*框架黑客和覆盖*/
span[class=ios color hack]a{color:#275100！重要；文本装饰：无！重要；}/*删除ios中的所有链接颜色（以下是基于颜色首选项的副本）*/
span[class=ios-color-hack2]a{color:#205478！重要；文本装饰：无！重要；}
span[class=ios-color-hack3]a{color:#8b！重要；文本装饰：无！重要；}
/*这是一种简单明了的方法，可以定位您想要点击的电话号码，避免手机链接其他看起来像但不是电话号码的号码。使用这两段代码来“取消样式化”任何可能链接的数字。第二个块为您提供了一个类，该类使用span标记应用于您希望链接和设置样式的数字。
受M运动的启发