收发邮件时,发现别人的邮件样式排版都很不错,不只是单调的文字。

比如:

威锋网的

 
360监控

知乎


打开QQ邮箱的写信页面,点击格式
 
 
点击 转换为html编辑模式(之前为所见即所得编辑模式)


懂html代码的人就可以开写折腾自己的模板了,不过建议先读下这篇教程指导《从头开始构建一个HTML电子邮件模板》,毕竟邮件还是与网页不大相同。

不懂代码也没事,可以到网上搜素一下相关的模板,记得以html源代码的形式粘贴
 
 
如果看到其他邮件的格式样式很好看,想复制,怎么办呢?

我以威锋发来的验证码邮件为例

 
鼠标悬浮到邮件内容上,右键,点【检查】

 
出现一堆向下展开的代码,鼠标移到第一个


右键,copy(复制),copy outerHTML(获取整个标签里面的代码且包括该标签)
 
 

如下——


<div id="contentDiv" onmouseover="getTop().stopPropagation(event);" onclick="getTop().preSwapLink(event, 'html', 'ZC3602-FGEUh6nZYrAQQWUyGVgaP68');" style="position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;" class="body">    <div id="qm_con_body"><div id="mailContentContainer" class="qmbox qm_con_body_content qqmail_webmail_only"> 
 
 
     
     
	<div style="">
		<div style=" color:#666; font-size:14px; margin:0 auto; width:740px;">
			<div style=" float:left;  background:#fff url(http://edm.feng.com/static/templates/54055e705b432/images/top_bg.jpg) no-repeat left top; border:1px solid #e3e3e3; padding:85px 70px 54px 70px; height:auto; width:600px; position:relative;">
				<div style=" position:absolute; right:-52px; top:52px;"><img src="http://edm.feng.com/static/templates/54055e705b432/images/email_logo.png" height="90" width="197"></div>
				<h1 style=" color:#4882ce; font-size:22px;">Hi,笑忘书言:</h1>
				<div style=" margin-top:35px;">
					<h1 style="color:#333; font-size:16px;">邮箱验证码:</h1>
					<p><span style="border-bottom:1px dashed #ccc;z-index:1" t="7" onclick="return false;" data="148041">148041</span></p>
					<p style="margin-top:25px;">PS.  如果这不是你本人的操作,请忽略此封邮件。</p>
					<p>下载威锋网客户端,二维码扫描登录,为您的帐号安全保驾护航!</p>
					<p><a href="http://edm.feng.com/api/urljump.html?cid=5810726&amp;mid=19938&amp;url=http%3A%2F%2Fwe.tm%2F9di8emv" target="_blank" style="color:#4882ce; text-decoration:underline;">下载客户端 &gt;</a></p>
				</div>
				<div style=" border-top:1px solid #ebedf1; padding-top:45px; margin:30px 0 20px 0;">威锋网<a href="http://edm.feng.com/api/urljump.html?cid=5810726&amp;mid=19938&amp;url=http%3A%2F%2Fwww.feng.com" title="威锋网" target="_blank" style=" color:#4882ce; margin:0 10px; text-decoration:none;">Feng.com</a><span style="border-bottom:1px dashed #ccc;" t="5" times="">2016年08月02日</span></div>
			</div>		
			<div style=" clear:both; color:#757575; font-size:10px; padding:20px 0 80px; text-align:center;">
				<p style="margin:0; padding:0;">这是一封系统确认函,请不要回复此邮件!此邮件的地址无法接受您来信。</p>
				<p style="margin:0; padding:0;"> © 2016 <a href="http://edm.feng.com/api/urljump.html?cid=5810726&amp;mid=19938&amp;url=http%3A%2F%2Fwww.feng.com" target="_blank" style="color:#4882ce; text-decoration:none;">Feng.com</a>. All Rights Reserved.</p>
			</div>
		</div>
	</div>
<img src="http://edm.feng.com/api/urljump/index.html?cid=5810726&amp;mid=19938&amp;email=617754229@qq.com&amp;type=1&amp;url=http://edm.feng.com/static/img/icons/bg_src.png" style="display:none"><style type="text/css">.qmbox style, .qmbox script, .qmbox head, .qmbox link, .qmbox meta {display: none !important;}</style></div></div><!-- --><style>#mailContentContainer .txt {height:auto;}</style>  </div>



粘贴到html编辑模式的框框中

 
返回可视化编辑

 

注意:代码中可能包括外部的图片,如果原图链接失效了,也是无法显示的,所以最好把外链的文件保存到自己网站,或者使用一些图片外链空间
全文完