【整理】CSS3知识点5

最新推荐文章于 2024-05-26 20:46:36 发布

Rand Tsui

最新推荐文章于 2024-05-26 20:46:36 发布

阅读量313

点赞数

分类专栏： web前端文章标签： css3

本博客所有公开的原创博文皆允许转载，无须再征求作者本人（也就是我）同意

本文链接：https://blog.csdn.net/for_cxc/article/details/51544841

版权

web前端专栏收录该内容

85 篇文章 1 订阅

订阅专栏

多媒体查询
520 到 699px 宽度 - 添加邮箱图标
当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：
<!DOCTYPE html>
<html>
<head>
<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="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>
</body>
</html>