Résumé des exemples de création de pages Web de courrier électronique à l'aide de HTML+CSS

Lorsque nous faisons du marketing par e-mail, nous espérons tous que les utilisateurs verront une page Web complète lorsqu'ils ouvriront la boîte aux lettres. Cependant, le rendu des pages HTML par les boîtes aux lettres est différent du rendu dans les navigateurs et la capacité de rendu est faible. De nombreux effets qui s'affichent normalement dans le navigateur provoqueront des erreurs ou ne s'afficheront pas dans les e-mails. Après d'innombrables tests, lors de la conception et de la production d'e-mails Web, Technology Home vous rappelle de faire attention aux points suivants :

1 Vous ne pouvez utiliser aucune forme d'image de fond

2. doit être Écrivez-le dans le code HTML, similaire à style="text-decoration:none; color:#666; font-size:12px;". De plus, les styles dans <'style><'/style> être placé dans le corps peut fonctionner, mais certains styles seront perdus pendant le processus de transfert, il n'est donc pas recommandé de l'utiliser

3. Ajoutez alt et titre à chaque image

4. Considérez la largeur du courrier électronique, de nombreux utilisateurs utilisent des ordinateurs portables et la résolution des ordinateurs portables est de 1280*708. . . Par conséquent, afin d'avoir une bonne expérience utilisateur au premier coup d'œil, elle doit avoir une largeur adaptée

5. Toutes les images doivent utiliser des adresses absolues, sinon elles ne seront pas affichées sur le terminal client, mais pourront être affichées dans foxmail ;

6. Pour la mise en page, utilisez table au lieu de div, car même margin:0 auto ne fonctionne pas dans la boîte aux lettres, et les propriétés CSS ne sont pas toutes testées, mais elles sont vraiment limitées, alors utilisez table;

7. Essayez d'ajouter la largeur à chaque bloc. Si vous n'écrivez pas la largeur, il y aura des bugs inexplicables

8. Dans certains cas, l'effet de page rendu par le navigateur et l'adresse e-mail Le rendu est différent

Avertissement de risque :

Lorsque la fenêtre est réduite dans une certaine mesure, certaines images apparaîtront ; rétrécir et les limites de la page seront inégales. C'est la règle de rendu de la boîte aux lettres. Pour l'instant, ce bug ne peut pas être évité, donc la largeur ne peut être modifiée que plus petite (ce problème existe également lors du test des e-mails système envoyés par NetEase Mailbox. Centre).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!