HTML, CSS pour le mailing

Question

Je travaille sur des newsletters pour mon entreprise et nous sommes confrontés à des problèmes avec différents clients de messagerie, par exemple. Gmail, Outlook en ligne, Outlook dans l'application, versions mobiles de ces clients.

Chaque texte qu'il contient est différent. Le problème est également que l'application Outlook ne prend pas correctement en charge

et

和

。所以我必须将其转换为 table 和 spans . Je dois donc le convertir en table et spans.

Des suggestions sur la façon de rendre le design identique dans la plupart des clients de messagerie avec du code ?

Le code actuel est le suivant

<div style="background-color: white; margin-right: 9px; margin-left: 9px; padding-bottom:1px; margin-bottom:10px;">
    <table style="background-color: white; border-color: black;padding-bottom:1px; margin-bottom:10px;">
    <tbody>
    <tr>
    <td>
    <h3 style="color: #000000; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 16px; font-style: normal; line-height: 24px; letter-spacing: normal; text-align: left; display: inline-block;"> Hello, </h3>
<br />
    <span style="font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 13px; line-height: 18px; font-style: normal; font-weight: normal; color: #787878;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla turpis magna<br />   cursus sit amet, suscipit a, interdum id, felis. Ut tempus purus at lorem. <br />  Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. <a href="https://blog.inpage.cz/obrazek/2/kitten-jpg/">here</a>.<br /> <br />  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</span>
    </td>
    </tr>
    <tr>
    <td><img style="text-align: left; width: 275px; height: 105px; margin: 10px; border-width: 0px; border-style: solid; float: left;" src="https://blog.inpage.cz/obrazek/2/kitten-jpg/" alt="CAD" /></td>
    </tr>
    <tr>
    <td>
    <h2 style="color: #f26503; font-family: 'Open Sans', Verdana, Arial, sans-serif; font-size: 24px; line-height: 36px; text-align: center;"><u>here, lorem</u></h2>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    <span style="line-height: 0.1; padding:1px; margin:10px;">
    
    </span>

1

0

0

P粉268284930

répondre

répondre à tous(1)

je répondrai Fermer

P粉4474950692023-09-09 14:47:56 1 plancher

Malheureusement, la plupart des éléments en HTML et CSS ne sont pas pris en charge par les fournisseurs de messagerie. Je sais qu'il existe une documentation fiable qui peut vous aider sur ce sujet. Vous pouvez parcourir pour trouver les éléments et CSS pris en charge et modifier votre modèle en conséquence.

https://elasticemail.com/supported-css

https://www.campaignmonitor.com/css/selectors/class/一个>

Comme +0

Ajouter une réponse 关闭回复

P粉268284930

répondre

Sujets populaires

Plus>

• Tutoriel CakePHP
• Tutoriel Laravel
• Tutoriel PHP
• Tutoriel Java

Articles populaires

• Le prix de Solana grimpera-t-il jusqu'à 300 $ ? Un analyste présente les principaux catalyseurs de la croissance
• Coinbase dévoile des agents IA capables de gérer les portefeuilles DeFi et de se connecter à X (anciennement Twitter)
• Code du coffre-fort bancaire de Black Ops 6 Zombies Liberty Falls
• Comment gérer les exceptions vérifiées lors de l'utilisation d'expressions Lambda avec des flux dans Java 8 ?
• WallitIQ (WLTQ) : la prochaine grande nouveauté en matière de portefeuilles cryptographiques avec un potentiel de retour sur investissement de 17 000 %

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1415949
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4255300
• 
  Tutoriel vidéo JAVA pour débutants

  2467465

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1415949
• 
  Tutoriel vidéo JAVA pour débutants

  2467465
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  502975
• 
  Introduction rapide au développement web front-end

  215210
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  874952

• 
  [Web front-end] Démarrage rapide de Node.js

  6223
• 
  Collection complète de cours full-stack de développement Web étranger

  4859
• 
  Aller au langage pratique GraphQL

  4101
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  620
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  20877

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle d'amorçage] Modèle Web de fournisseur de fruits et légumes biologiques Bootstrap5
• [modèle de back-end] Modèle de page Web réactive de gestion d'arrière-plan d'informations de données multifonctionnelles Bootstrap3-Novus
• [Modèle d'amorçage] Modèle de page Web de plate-forme de services de ressources immobilières Bootstrap5
• [Modèle d'amorçage] Modèle Web d'informations de CV simples Bootstrap4
• [Modèle d'amorçage] Modèle de site Web d'éducation de livre grand écran réactif bootstrap-DREAMLIFE
• [modèle de back-end] Modèle de système de gestion d'arrière-plan CMS d'entreprise bleu réactif de style MAC
• [modèle de back-end] Modèle de site Web de système de gestion d'arrière-plan d'atmosphère dégradé réactif-usinessbox
• [Modèle d'amorçage] Modèle de site Web réactif pour magasin de légumes et de fruits-Organio

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

Answer 1

Malheureusement, la plupart des éléments en HTML et CSS ne sont pas pris en charge par les fournisseurs de messagerie. Je sais qu'il existe une documentation fiable qui peut vous aider sur ce sujet. Vous pouvez parcourir pour trouver les éléments et CSS pris en charge et modifier votre modèle en conséquence.

https://elasticemail.com/supported-css

https://www.campaignmonitor.com/css/selectors/class/一个>