html-邮件模板,适合电商推送邮件

代码如下

<!DOCTYPE html>

<html>

<head>

<title>Push Email</title>

</script>

<meta content="width=device-width, initial-scale=1.0" name="viewport">

<style type="text/css">

/*** BMEMBF Start ***/

[name=bmeMainBody]{min-height:1000px;}

@media only screen and (max-width: 480px){table.blk, table.tblText, .bmeHolder, .bmeHolder1, table.bmeMainColumn{width:100% !important;} }

@media only screen and (max-width: 480px){.bmeImageCard table.bmeCaptionTable td.tblCell{padding:0px 20px 20px 20px !important;} }

@media only screen and (max-width: 480px){.bmeImageCard table.bmeCaptionTable.bmeCaptionTableMobileTop td.tblCell{padding:20px 20px 0 20px !important;} }

@media only screen and (max-width: 480px){table.bmeCaptionTable td.tblCell{padding:10px !important;} }

@media only screen and (max-width: 480px){table.tblGtr{ padding-bottom:20px !important;} }

@media only screen and (max-width: 480px){td.blk_container, .blk_parent, .bmeLeftColumn, .bmeRightColumn, .bmeColumn1, .bmeColumn2, .bmeColumn3, .bmeBody{display:table !important;max-width:600px !important;width:100% !important;} }

@media only screen and (max-width: 480px){table.container-table, .bmeheadertext, .container-table { width: 95% !important; } }

@media only screen and (max-width: 480px){.mobile-footer, .mobile-footer a{ font-size: 13px !important; line-height: 18px !important; } .mobile-footer{ text-align: center !important; } table.share-tbl { padding-bottom: 15px; width: 100% !important; } table.share-tbl td { display: block !important; text-align: center !important; width: 100% !important; } }

@media only screen and (max-width: 480px){td.bmeShareTD, td.bmeSocialTD{width: 100% !important; } }

@media only screen and (max-width: 480px){td.tdBoxedTextBorder{width: auto !important;}}

@media only screen and (max-width: 480px){table.blk, table[name=tblText], .bmeHolder, .bmeHolder1, table[name=bmeMainColumn]{width:100% !important;} }

@media only screen and (max-width: 480px){.bmeImageCard table.bmeCaptionTable td[name=tblCell]{padding:0px 20px 20px 20px !important;} }

@media only screen and (max-width: 480px){.bmeImageCard table.bmeCaptionTable.bmeCaptionTableMobileTop td[name=tblCell]{padding:20px 20px 0 20px !important;} }

@media only screen and (max-width: 480px){table.bmeCaptionTable td[name=tblCell]{padding:10px !important;} }

@media only screen and (max-width: 480px){table[name=tblGtr]{ padding-bottom:20px !important;} }

@media only screen and (max-width: 480px){td.blk_container, .blk_parent, [name=bmeLeftColumn], [name=bmeRightColumn], [name=bmeColumn1], [name=bmeColumn2], [name=bmeColumn3], [name=bmeBody]{display:table !important;max-width:600px !important;width:100% !important;} }

@media only screen and (max-width: 480px){table[class=container-table], .bmeheadertext, .container-table { width: 95% !important; } }

@media only screen and (max-width: 480px){.mobile-footer, .mobile-footer a{ font-size: 13px !important; line-height: 18px !important; } .mobile-footer{ text-align: center !important; } table[class="share-tbl"] { padding-bottom: 15px; width: 100% !important; } table[class="share-tbl"] td { display: block !important; text-align: center !important; width: 100% !important; } }

@media only screen and (max-width: 480px){td[name=bmeShareTD], td[name=bmeSocialTD]{width: 100% !important; } }

@media only screen and (max-width: 480px){td[name=tdBoxedTextBorder]{width: auto !important;}}

@media only screen and (max-width: 480px){.bmeImageCard table.bmeImageTable{height: auto !important; width:100% !important; padding:20px !important;clear:both; float:left !important; border-collapse: separate;} }

@media only screen and (max-width: 480px){.bmeMblInline table.bmeImageTable{height: auto !important; width:100% !important; padding:10px !important;clear:both;} }

@media only screen and (max-width: 480px){.bmeMblInline table.bmeCaptionTable{width:100% !important; clear:both;} }

@media only screen and (max-width: 480px){table.bmeImageTable{height: auto !important; width:100% !important; padding:10px !important;clear:both; } }

@media only screen and (max-width: 480px){table.bmeCaptionTable{width:100% !important; clear:both;} }

@media only screen and (max-width: 480px){table.bmeImageContainer{width:100% !important; clear:both; float:left !important;} }

@media only screen and (max-width: 480px){table.bmeImageTable td{padding:0px !important; height: auto; } }

@media only screen and (max-width: 480px){td.bmeImageContainerRow{padding:0px !important;}}

@media only screen and (max-width: 480px){img.mobile-img-large{width:100% !important; height:auto !important;} }

@media only screen and (max-width: 480px){img.bmeRSSImage{max-width:320px; height:auto !important;}}

@media only screen and (min-width: 640px){img.bmeRSSImage{max-width:600px !important; height:auto !important;} }

@media only screen and (max-width: 480px){.trMargin img{height:10px;} }

@media only screen and (max-width: 480px){div.bmefooter, div.bmeheader{ display:block !important;} }

@media only screen and (max-width: 480px){.tdPart{ width:100% !important; clear:both; float:left !important; } }

@media only screen and (max-width: 480px){table.blk_parent1, table.tblPart {width: 100% !important; } }

@media only screen and (max-width: 480px){.tblLine{min-width: 100% !important;}}

@media only screen and (max-width: 480px){.bmeMblCenter img { margin: 0 auto; } }

@media only screen and (max-width: 480px){.bmeMblCenter, .bmeMblCenter div, .bmeMblCenter span { text-align: center !important; text-align: -webkit-center !important; } }

@media only screen and (max-width: 480px){.bmeNoBr br, .bmeImageGutterRow, .bmeMblStackCenter .bmeShareItem .tdMblHide { display: none !important; } }

@media only screen and (max-width: 480px){.bmeMblInline table.bmeImageTable, .bmeMblInline table.bmeCaptionTable, td.bmeMblInline { clear: none !important; width:50% !important; } }

@media only screen and (max-width: 480px){.bmeMblInlineHide, .bmeShareItem .trMargin { display: none !important; } }

@media only screen and (max-width: 480px){.bmeMblInline table.bmeImageTable img, .bmeMblShareCenter.tblContainer.mblSocialContain, .bmeMblFollowCenter.tblContainer.mblSocialContain{width: 100% !important; } }

@media only screen and (max-width: 480px){.bmeMblStack> .bmeShareItem{width: 100% !important; clear: both !important;} }

@media only screen and (max-width: 480px){.bmeShareItem{padding-top: 10px !important;} }

@media only screen and (max-width: 480px){.tdPart.bmeMblStackCenter, .bmeMblStackCenter .bmeFollowItemIcon {padding:0px !important; text-align: center !important;} }

@media only screen and (max-width: 480px){.bmeMblStackCenter> .bmeShareItem{width: 100% !important;} }

@media only screen and (max-width: 480px){ td.bmeMblCenter {border: 0 none transparent !important;}}

@media only screen and (max-width: 480px){.bmeLinkTable.tdPart td{padding-left:0px !important; padding-right:0px !important; border:0px none transparent !important;padding-bottom:15px !important;height: auto !important;}}

@media only screen and (max-width: 480px){.tdMblHide{width:10px !important;} }

@media only screen and (max-width: 480px){.bmeShareItemBtn{display:table !important;}}

@media only screen and (max-width: 480px){.bmeMblStack td {text-align: left !important;}}

@media only screen and (max-width: 480px){.bmeMblStack .bmeFollowItem{clear:both !important; padding-top: 10px !important;}}

@media only screen and (max-width: 480px){.bmeMblStackCenter .bmeFollowItemText{padding-left: 5px !important;}}

@media only screen and (max-width: 480px){.bmeMblStackCenter .bmeFollowItem{clear:both !important;align-self:center; float:none !important; padding-top:10px;margin: 0 auto;}}

@media only screen and (max-width: 480px){

.tdPart> table{width:100% !important;}

}

@media only screen and (max-width: 480px){.tdPart>table.bmeLinkContainer{ width:auto !important; }}

@media only screen and (max-width: 480px){.tdPart.mblStackCenter>table.bmeLinkContainer{ width:100% !important;}}

.blk_parent:first-child, .blk_parent{float:left;}

.blk_parent:last-child{float:right;}

/*** BMEMBF END ***/

table[name="bmeMainBody"], body {background-color:#000000;}

td[name="bmePreHeader"] {background-color:transparent;}

td[name="bmeHeader"] {background:#ffffff;background-color:#000000;}

td[name="bmeBody"], table[name="bmeBody"] {background-color:#ffffff;}

td[name="bmePreFooter"] {background-color:#ffffff;}

td[name="bmeFooter"] {background-color:transparent;}

td[name="tblCell"], .blk {font-family:initial;font-weight:normal;font-size:initial;}

table[name="blk_blank"] td[name="tblCell"] {font-family:Arial, Helvetica, sans-serif;font-size:14px;}

[name=bmeMainContentParent] {border-color:#666666;border-width:0px;border-style:none;border-radius:0px;border-collapse:separate;border-spacing:0px;overflow:hidden;}

[name=bmeMainColumnParent] {border-color:transparent;border-width:0px;border-style:none;border-radius:0px;}

[name=bmeMainColumn] {border-color:transparent;border-width:0px;border-style:none;border-radius:0px;border-collapse:separate;border-spacing:0px;}

[name=bmeMainContent] {border-color:transparent;border-width:0px;border-style:none;border-radius:0px;border-collapse:separate;border-spacing:0px;}

</style>

</head>

<body marginheight=0 marginwidth=0 topmargin=0 leftmargin=0

>

<table width="100%" cellspacing="0" cellpadding="0"

name="bmeMainBody"

bgcolor="#000000">

<tbody>

<tr>

<td width="100%" valign="top" align="center">

<table cellspacing="0" cellpadding="0"

name="bmeMainColumnParentTable">

<tbody>

<tr>

<td name="bmeMainColumnParent"

>

<table name="bmeMainColumn" class="bmeHolder bmeMainColumn"

cellspacing="0" cellpadding="0" align="center">

<tbody>

<tr>

<td width="100%" class="blk_container bmeHolder"

name="bmePreHeader" valign="top" align="center"

bgcolor=""></td>

</tr>

<tr>

<td width="100%" class="bmeHolder" valign="top"

align="center" name="bmeMainContentParent"

>

<table name="bmeMainContent"

width="100%" cellspacing="0" cellpadding="0"

align="center">

<tbody>

<tr>

<td width="100%" class="blk_container bmeHolder"

name="bmeHeader" valign="top" align="center"

bgcolor="#000000"><div ></td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</body>

</html>

---------------------