您的位置：首页 > Web前端 > CSS

【整理】CSS3知识点5

2016-05-31 13:05 323 查看

多媒体查询

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航