HTML+CSSを使ったメールWebページの作成例まとめ

電子メール マーケティングを行う場合、ユーザーが電子メールを開いたときに完全な Web ページが表示されることを誰もが望んでいます。しかし、電子メールでの HTML ページのレンダリングはブラウザーでのレンダリングとは異なり、レンダリング能力ははるかに小さいです。ブラウザでは通常表示される効果が、電子メールでは正しく表示されないか、レンダリングできません。数え切れないほどのテストを経て、Web メールをデザインおよび作成する際、Technology Home は次の点に注意するよう警告します。

1. スタイルは HTML コードで記述する必要があります。 style="text-decoration:none; color:#666; font-size:12px;" に似ています。さらに、<'style><'/style> 内のスタイルを機能させる必要があります。転送時に一部のスタイルが失われるため、使用はお勧めしません

3. 各画像に alt とタイトルを追加します

4. 多くのユーザーはメールの幅と解像度を考慮します。ノートブックのサイズは 1280*708、です。 。 。したがって、一見して優れたユーザーエクスペリエンスを実現するには、適切な幅が必要です

5. すべての写真は絶対アドレスを使用する必要があります。そうしないと、クライアント端末には表示されませんが、foxmail では表示できます。レイアウトは、Table を使用します。div は使用しません。メールボックスでは margin:0 auto も機能しません。また、CSS 属性はすべてテストされているわけではありませんが、実際には制限されているため、Table を使用してください

7。各ブロックの幅を記述しないと、説明できないバグが発生します。

8. 場合によっては、ブラウザによってレンダリングされるページの効果は、メールボックスによってレンダリングされるものと異なります。メールボックス;

リスク警告:

ウィンドウをある程度まで縮小すると、一部の画像が縮小し、ページの境界が不均等になります。これはメールボックスのレンダリング ルールであり、このバグは回避できません。 , そのため、幅はより小さいサイズにのみ変更できます (NetEase メールボックス センターによって送信されたシステム メールをテストすると、この問題も存在します)。

以上がHTML+CSSを使ったメールWebページの作成例まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。