x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<style>6
ul {7
list-style-type: none;8
}9
10
ul li a {11
color: green;12
text-decoration: none;13
padding: 3px;14
display: block;15
}16
17
@media screen and (max-width: 699px) and (min-width: 520px) {18
ul li a {19
padding-left: 30px;20
background: url(email-icon.png) left center no-repeat;21
}22
}23
</style>24
</head>25
<body>26
27
<h1>重置浏览器窗口，查看效果!</h1>28
29
<ul>30
<li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>31
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>32
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>33
</ul>34
35
</body>36
</html>