上海网站建设 上海网站设计(www.paiky.net) 一个<img>标签的ALT属性,为无法下载图像或图像完全关闭用户,提供...
一个<img>标签的ALT属性,为无法下载图像或图像完全关闭用户,提供了替代的内容。我们一直使用这个属性,使我们的内容更容易访问,但你可曾想过它实际上看起来像吗?
我们将要使用的电子邮件作为讲解案例。
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
如果我们来看看在我们的文件里的图像,可能是下面这个样子:
显然ALT文本是没有吸引力的 - 特别是链接。 我们可以做几件事情来改变也一下。
主标题,我们打算使文字更大,将其更改为深蓝色,而不是黑色。我们将通过添加一些样式来实现它。
这是我们的原始代码:
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>
我们将添加一些文本样式,所以它看起来像这样:
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>
为了整体风格统一,社会媒体的连接,使它们成为白色:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a href="http://www.twitter.com/" style="color: #ffffff;">
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a href="http://www.twitter.com/" style="color: #ffffff;">
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
就这么简单! 现在,我们可以相信,我们的电子邮件,即使关闭图像显示效果也很好。