Мне нужно создать шаблон для электронной почты microsoft Outlook, который требует, чтобы я размещал динамическое изображение и текст с сервера на существующем статическом фоновом изображении. Я попытался создать его с помощью div, а также таблицы, а также дал встроенный css и (! Important) для html. Я не мог найти поддержку тегов, таких как поля, поплавки, позиции, и мой макет всегда ломается. Я обнаружил, что адрес электронной почты Outlook не поддерживает эти атрибуты css. Пожалуйста, предложите мне способ разработки шаблона без разрывов макета.Как создать шаблон без использования полей, отступов, позиции для внешнего вида электронной почты
this is how my template should look.
http://templates.mailchimp.com/resources/email-client-css-support/ Выше ссылка
Я попробовал это двумя различными способами для приведения их в соответствие:
using div:
<div align="left"><img style="padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="staticimage.png " alt=" ">
<h4 style=" font-family: serif; color: rgb(255, 252, 252);">#Some Text#</h4></div>
<h3 style="font-family: -webkit-body !important;font-style: italic;color: #147C6C; margin-top:-55px">Text</h3>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;
width: 731px;height: 500px; margin-top:-150px;margin-left:25px" src="dynamicimage.png">
using table:
<tr>
<td>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;width: 731px;height: 500px;" src="staticimage.jpg">
</td>
<td align="center">
<span style="margin-left: -1458px;">
<img style=" padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="dynamicimage.png " alt=" ">
<span><h4 style=" font-family: serif; color: rgb(255, 252, 252);margin:0px 0px 0px 0px; ">#some text#</h4></span>
</span>
</td>
<td align="center">
<span style="margin-left: -1253px;">
<img style="width: 350px;height: 225px;margin-top: 44px; " src="dynamictext.png " alt=" ">
</span>
</td>
<td>
<h2 style="margin: -5px 0px -55px -877px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">
<strong>Some text</strong>
</h2>
<h3 style="margin:54px 0px -5px -864px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">Employee name</h3>
</td>
</tr>
Пожалуйста, разместите код, чтобы показать нам, что вы пробовали до сих пор. SO не является кодирующей услугой. – beerwin
привет, пожалуйста, используйте для этого структуру таблицы html. он совместим для всех почтовых ящиков. –
@Kiran Khatri -table background url: (image) также не работал. Есть ли другой способ добавить изображение в качестве фона таблицы? Ссылка выше показывает поддерживаемые перспективы css-свойства. –