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/tech/pnotes/16721.html

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

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

相关推荐

发表回复