我的默认Gmail签名
Published at over 1 year ago
先看下效果： 
接下来是Gmail中被去掉图片后的效果：（不知Gmail为什么会有默认去掉邮件中的图片这个功能？） 
之所以用图片来展示是因为博客的CSS会影响展示效果，这在邮件是不会发生的。下面是代码：
<div style="border:1px dashed #aaaaaa; padding:1em; margin:1em; width:390px; font-family:Arial, Helvetica, sans-serif; font-size:14px;"> <img src="http://i257.photobucket.com/albums/hh229/benz303/q737919551_3550.jpg" style="float:left; margin-right:10px;" /> <strong>Ben</strong><br /> Site: <a href="http://bensh.cn" title="http://bensh.cn" style="text-decoration:none;color:#000;">http://bensh.cn</a><br /> Email: <a href="mailto:benz303bb@gmail.com" title="benz303bb@gmail.com" style="text-decoration:none;color:#000;">benz303bb@gmail.com</a><br /><br /> Chat: <a title="Click here to chat me with Google Talk" href="http://www.google.com/talk/service/badge/Start?tk=z01q6amlqsb0998ovqqdvv57rfnvjppcnv97psog7vmgal88ct06eus4nne98u049sekb60so6utnubqdu71ij4d6u509itbi006ljkjgcc2e62qrs5r9e797t80jr78gomp0sftob32sdddpvu67818l7caf8tfigm8la32r" style="text-decoration:none;color:#000;"><img src="http://i257.photobucket.com/albums/hh229/benz303/gtalk.png" border="0" title="Google Talk" />GTalk</a> <a title="Click here to chat me with Windows Live Messager" href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=d01e4077364645ca@apps.messenger.live.com&mkt=zh-cn" style="text-decoration:none;color:#000;"><img src="http://i257.photobucket.com/albums/hh229/benz303/msn.png" border="0" title="Windows Live Messager" />MSN</a> <a title="Click here to chat me with QQ" href="http://wpa.qq.com/msgrd?V=1&Uin=278502263" style="text-decoration:none;color:#000;"><img src="http://i257.photobucket.com/albums/hh229/benz303/qq.png" border="0" title="QQ" />QQ</a><br /> Contact Me: <a href="http://friendfeed.com/bensh" title="Contact me with FriendFeed" style="text-decoration:none;color:#000;"><img title="FriendFeed" src="http://i257.photobucket.com/albums/hh229/benz303/friendfeed.png" border="0" />FriendFeed</a> <a href="http://www.facebook.com/profile.php?id=737919551" title="Contact me with Facebook" style="text-decoration:none;color:#000;"><img src="http://i257.photobucket.com/albums/hh229/benz303/facebook.png" title="Facebook" border="0" />Facebook</a> <a href="http://twitter.com/benz303" title="Follow me with Twitter" style="text-decoration:none;color:#000;"><img src="http://i257.photobucket.com/albums/hh229/benz303/twitter.png" title="Twitter" border="0" />Twitter</a> <a href="http://www.douban.com/people/benz303/" title="Contact me with Douban" style="text-decoration:none;color:#000;"><img src="http://i257.photobucket.com/albums/hh229/benz303/douban.png" title="Douban" border="0" />Douban</a> </div>
我这个邮件签名是一个带有图像的签名，所以在制作的时候要特别注意不显示图像的情况。一般有两种不显示图像的情况：一种是图像无法显示（如网络原因等），另一种就是将图像标签<img>直接删除（如Gmail）。前一种情况的解决办法是在图像标签中添加title标记，这样在图像无法显示的情况下就会显示title标记中的文字。后一种情况的解决办法是除图像外再添加文字说明。 此外我还在签名中使用了一个美化链接的小技巧，就是不让超链接出现下划线，并将超链接的颜色改为黑色，代码如下：
style="text-decoration:none;color:#000;"
这样可以使整个签名的色调变得统一，但记得在去除链接下划线的同时，要给链接添加title标记，以便鼠标移到超链接上时显示提示内容，不至于使人误以为不可点击。 更多关于邮件签名的内容请阅读：如何设计自己的邮件签名