我正在嘗試使用 html 和我在 Photoshop 中設計的影像創建電子郵件簽名。我已經在 PS 中對影像進行了切片并將切片保存到我的 PC 上。我現在想添加指向某些切片的鏈接并已設法做到這一點，但代碼非常混亂和糟糕，所以我知道有更好的方法來做到這一點。我附上了下面的代碼。
這些鏈接不是實際的鏈接，現在只是占位符。我也知道我需要在外部保存影像并且會處理它，但現在只想嘗試對代碼進行排序。我也明白電子郵件簽名的影像大小很大，所以我可以在代碼中添加一個“最大寬度”和“最大高度”來縮小它的大小還是我必須單獨更改每個切片的所有大小?
最后，這個拼接的 html 影像是否可以很好地作為電子郵件簽名顯示，或者因為附加了很多影像，它會直接進入垃圾郵件嗎？
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
}
</style>
<head></head>
<body>
<a href="" />
<div style="background-image:url('img/img1.jpg'); left:0px; top:0px; width:2000px; height:122px"></div>
<a href="" />
<div style="background-image:url('img/img2.jpg'); left:0px; top:122px; width:124px; height:222px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img3.jpg'); left:124px; top:122px; width:866px; height:198px"></div>
<a href="" />
<div style="background-image:url('img/img4.jpg'); left:990px; top:122px; width:1010px; height:102px"></div>
<a href="" />
<div style="background-image:url('img/img5.jpg'); left:990px; top:224px; width:246px; height:576px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img6.jpg'); left:1236px; top:224px; width:630px; height:120px"></div>
<a href="" />
<div style="background-image:url('img/img7.jpg'); left:1866px; top:224px; width:134px; height:576px"></div>
<a href="" />
<div style="background-image:url('img/img8.jpg'); left:124px; top:320px; width:866px; height:24px"></div>
<a href="" />
<div style="background-image:url('img/img9.jpg'); left:0px; top:344px; width:122px; height:456px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img10.jpg'); left:122px; top:344px; width:540px; height:150px"></div>
<a href="" />
<div style="background-image:url('img/img11.jpg'); left:662px; top:344px; width:328px; height:456px"></div>
<a href="" />
<div style="background-image:url('img/img12.jpg'); left:1236px; top:344px; width:630px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img13.jpg'); left:1236px; top:386px; width:48px; height:414px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img14.jpg'); left:1284px; top:386px; width:482px; height:56px"></div>
<a href="" />
<div style="background-image:url('img/img15.jpg'); left:1766px; top:386px; width:100px; height:414px"></div>
<a href="" />
<div style="background-image:url('img/img16.jpg'); left:1284px; top:442px; width:482px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img17.jpg'); left:1284px; top:484px; width:62px; height:316px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img18.jpg'); left:1346px; top:484px; width:94px; height:90px"></div>
<a href="https://www.facebook.com" />
<div style="background-image:url('img/img19.jpg'); left:1440px; top:484px; width:60px; height:82px"></div>
<a href="https://www.twitter.com" />
<div style="background-image:url('img/img20.jpg'); left:1500px; top:484px; width:94px; height:90px"></div>
<a href="https://www.instagram.com" />
<div style="background-image:url('img/img21.jpg'); left:1594px; top:484px; width:92px; height:82px"></div>
<a href="" />
<div style="background-image:url('img/img22.jpg'); left:1686px; top:484px; width:80px; height:316px"></div>
<a href="" />
<div style="background-image:url('img/img23.jpg'); left:122px; top:494px; width:540px; height:30px"></div>
<a href="" />
<div style="background-image:url('img/img24.jpg'); left:122px; top:524px; width:2px; height:88px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img25.jpg'); left:124px; top:524px; width:418px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img26.jpg'); left:542px; top:524px; width:120px; height:276px"></div>
<a href="" />
<div style="background-image:url('img/img27.jpg'); left:1440px; top:566px; width:60px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img28.jpg'); left:1594px; top:566px; width:92px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img29.jpg'); left:1346px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img30.jpg'); left:1500px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img31.jpg'); left:124px; top:586px; width:418px; height:26px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img32.jpg'); left:122px; top:612px; width:406px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img33.jpg'); left:528px; top:612px; width:14px; height:188px"></div>
<a href="" />
<div style="background-image:url('img/img34.jpg'); left:122px; top:674px; width:406px; height:126px"></div>
</body>
</html>uj5u.com熱心網友回復：
電子郵件不是網路！絕對定位是一種高級技巧，需要大量技巧才能作業，甚至<div>s對于 Outlook 來說都是有問題的。背景影像也非常棘手（關于這些事情有很多關于 SO 的答案）。
沒有人知道所有垃圾郵件規則，否則人們會破壞它們，但是，在您的郵件底部有這么多鏈接很容易被認為是垃圾郵件。這也有風險，因為它不正常。所以我建議不要使用這種方法。
您將需要生成一個帶有<img>s（或只有一個影像）的 HTML 表格。但是，最佳做法是用 HTML 寫出文本，而不是將其放在影像中。我看不到影像，所以除了可縮放影像的通用代碼之外，我無法為您提供示例代碼：
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#">
<img src="https://via.placeholder.com/600x200" width="600" style="max-width:100%;height:auto;" />
</a>
</td>
</tr>
</table>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/359928.html
標籤：html css 电子邮件 html-email
上一篇：Outlook插件VSTO