CSS3 页面中展示邮箱列表点击弹出发送邮件界面详解编程语言

CSS3 页面中展示邮箱列表点击弹出发送邮件界面

代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">  
<title>CSS教程</title>  
<style> 
ul { 
list-style-type: none; 
} 
ul li a { 
color: green; 
text-decoration: none; 
padding: 3px;  
display: block; 
} 
@media screen and (max-width: 699px) and (min-width: 520px) { 
ul li a { 
padding-left: 30px; 
background: url(email-icon.png) left center no-repeat; 
} 
} 
</style> 
</head> 
<body> 
<h1>重置浏览器窗口,查看效果!</h1> 
<ul> 
<li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li> 
<li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li> 
<li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li> 
</ul> 
</body> 
</html>

效果:

CSS3 页面中展示邮箱列表点击弹出发送邮件界面详解编程语言

 

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/16721.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论