上海网站建设公司—派琪PAIKY网络传媒(www.paiky.net)

请记住你的ALT文本样式(网站建设)

时间: 2013-06-28 分类: 网站建设 浏览次数: 436
分享到:
上海网站建设微信品牌创意 企业官方网站建设新浪微博 专题活动网站建设QQ空间

上海网站建设 上海网站设计(www.paiky.net)   一个<img>标签的ALT属性,为无法下载图像或图像完全关闭用户,提供了替代的内容。我们一直使用这个属性,使我们的内容更容易访问,但你可曾想过它实际上...

上海网站建设 上海网站设计www.paiky.net

 

一个<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>

 

css2

 

就这么简单! 现在,我们可以相信,我们的电子邮件,即使关闭图像显示效果也很好。

 

 

 

未经允许不得转载:上海网站建设公司

技术支持:派琪 Copyright © 2015-2016 www.paiky.net 派琪 版权所有  上海网站建设 上海网站建设公司 沪ICP备09091511号