免费设计房屋的网站,公司企业文化内容,17zwd一起做业网站,做网站可能存在的问题邮件模版布局 flex - 布局简单方便 兼容性差 table - 优点 就是兼容性好#xff0c;其他没有优点 注#xff1a;使用图片需要png最好#xff0c;使用svg图google邮箱会出现不能使用的情况 效果图 flex布局
!DOCTYPE html
html langen xmlns:th其他没有优点 注使用图片需要png最好使用svg图google邮箱会出现不能使用的情况 效果图 flex布局
!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title邮箱验证码/titlestyle* {padding: 0;margin: 0;}body {background-color: #f5f5f5;}.wrap {width: 610px;margin: 0 auto;background-color: #fff;border-radius: 10px;}.head-top img {width: 100%;margin-bottom: 24px;}.head {display: flex;justify-content: space-between;padding: 0 30px;}.head-left-title h1 {color: #000;font-family: PingFang SC;font-size: 18px;font-weight: 600;padding: 50px 0 20px;}.head-left-title h3 {color: #000;font-family: PingFang SC;font-size: 14px;font-weight: 500;}.code {padding: 0 30px 75px;}.code h2 {color: #000;font-family: PingFang SC;font-size: 14px;font-weight: 500;margin-bottom: 10px;}.code .code-num {width: 100%;height: 64px;background-color: #E0FAFE;display: flex;justify-content: center;align-items: center;}.code-num span {color: #000;font-family: PingFang SC;font-size: 32px;font-weight: 600;letter-spacing: 12.8px;}.code h4 {color: #000;font-family: PingFang SC;font-size: 14px;font-weight: 400;margin-top: 10px;}.footer-wrap {display: flex;flex-direction: column;align-items: center;padding-bottom: 40px;}.footer-wrap h2 {color: #000;font-family: PingFang SC;font-size: 12px;font-weight: 400;padding-bottom: 5px;}.footer-wrap h3 {color: #6C6C6C;font-family: PingFang SC;font-size: 12px;font-weight: 400;padding-top: 5px;}.footer-wrap h3::before {display: inline-block;vertical-align: middle;content: ;width: 3px;height: 3px;border-radius: 50%;margin-right: 5px;background-color: #6C6C6C;}.footer-connect {display: flex;flex-direction: column;align-items: center;}.footer-connect h2 {color: #000;font-family: PingFang SC;font-size: 12px;font-weight: 400;padding-bottom: 10px;}.footer-connect h3 {color: #6C6C6C;font-family: PingFang SC;font-size: 12px;font-weight: 400;padding-bottom: 32px;}.footer-img {padding-bottom: 47px;}.footer-img img {width: 30px;height: 30px;margin: 0 22px;}/style
/head
body
div classwrapdiv classhead-topimg srchttps://d2t9byo8r5tyol.cloudfront.net/images/head-top.svg/divdiv classheaddiv classhead-leftimg srcimages/logo.svgdiv classhead-left-titleh1 th:text${$1}Subject/h1h3 th:if${not #strings.isEmpty($2)} th:text${$2}Describe/h3/div/divdiv classhead-rightimg srchttps://d2t9byo8r5tyol.cloudfront.net/images/sketch.svg/div/divdiv classcodeh2验证码:/h2div classcode-numspan th:text${$3}123456/span/divh4 th:text验证码 ${$4} 分钟内有效,请勿泄露本邮件验证码 {} 分钟内有效,请勿泄露本邮件/h4h4 th:if${not #strings.isEmpty($5)} th:text防钓鱼码: ${$5}防钓鱼码: {}/h4/divdiv classfooterimg srchttps://d2t9byo8r5tyol.cloudfront.net/images/bg.svgdiv classfooter-wraph2致力于保护您的账户和交易安全/h2h3如果您怀疑自己收到了诈骗信息请立即联系客服/h3h3如果您对邮件的真实性存有疑问请勿犹豫立即通过官方客服来核实信息/h3h3请勿与任何人分享您的验证码包括官方客服和工作人员/h3/divdiv classfooter-connecth2感谢您使用/h2h3如有疑问或需要帮助请联系客服/h3div classfooter-imgimg srchttps://d2t9byo8r5tyol.cloudfront.net/images/t.svgimg srchttps://d2t9byo8r5tyol.cloudfront.net/images/x.svg/div/div/div
/div
/body/htmltable布局-表格布局推荐-兼容性高
htmlheadtitle邮件模版/title
/headbody!-- border1 --table width610 cellspacing0 cellpadding0styleborder-spacing: 0; color: #333333; margin-left: auto; margin-right: auto;border-radius: 10px;trtd colspan2 width610 height10img srchttps://d2t9byo8r5tyol.cloudfront.net/images/head-top.svg width610px/td/trtrtd stylepadding: 30px 0 0 30px;img srcimages/logo.svg width154px/tdtd rowspan3 styletext-align: right;padding-top: 30px;img srchttps://d2t9byo8r5tyol.cloudfront.net/images/sketch.svg width188px/td/trtrtdh1 stylefont-size: 18px;font-weight: 600;color: #000;padding: 50px 0 20px;padding-left: 30px; th:text${$1}Subject/h1/td/trtrtdh3 stylefont-size: 14px;font-weight: 500;color: #000;padding-left: 30px;th:if${not #strings.isEmpty($2)} th:text${$2}Describe/h3/h3/td/trtrtdh2 stylefont-size: 14px;font-weight: 500;color: #000;padding-left: 30px;验证码:/h2/td/trtrtd colspan2 stylepadding: 0 30px;div stylewidth: 100%;height: 64px;background-color: #E0FAFE;text-align: center;line-height: 64px;span stylefont-size: 32px;font-weight: 600;letter-spacing: 12.8px; th:text${$3}123456/span/div/td/trtrtdh4 stylefont-size: 14px;font-weight: 400;color: #000;margin-top: 10px;padding-left: 30px;th:text验证码 ${$4} 分钟内有效,请勿泄露本邮件验证码 {}分钟内有效,请勿泄露本邮件/h4/td/trtrtdh4 stylefont-size: 14px;font-weight: 400;color: #000;margin-top: 10px;padding-left: 30px; th:if${not #strings.isEmpty($5)}th:text防钓鱼码: ${$5}防钓鱼码: {}/h4/td/trtrtd colspan2 width610 height110img srchttps://d2t9byo8r5tyol.cloudfront.net/images/bg.svg width610px/td/trtrtd colspan2 styletext-align: center;div stylepadding-bottom: 40px;h2 stylefont-size: 12px;font-weight: 400;color: #000;AnyView致力于保护您的账户和交易安全/h2h3 stylefont-size: 12px;font-weight: 400;color: #6C6C6C;• 如果您怀疑自己收到了诈骗信息请立即联系客服/h3h3 stylefont-size: 12px;font-weight: 400;color: #6C6C6C;• 如果您对邮件的真实性存有疑问请勿犹豫立即通过官方客服来核实信息/h3h3 stylefont-size: 12px;font-weight: 400;color: #6C6C6C;• 请勿与任何人分享您的验证码包括官方客服和工作人员/h3/div/td/trtrtd colspan2 styletext-align: center;divh2 stylefont-size: 12px;font-weight: 400;color: #000;padding-bottom: 10px;感谢您使用/h2h3 stylefont-size: 12px;font-weight: 400;color: #6C6C6C;padding-bottom: 32px;如有疑问或需要帮助请联系客服/h3div stylepadding-bottom: 47px;img srchttps://d2t9byo8r5tyol.cloudfront.net/images/t.svg width30pximg stylemargin-left: 22px; srchttps://d2t9byo8r5tyol.cloudfront.net/images/x.svgwidth30px/div/div/td/tr/table
/body/html
