【整理】CSS3知识点5

原创 2016年05月31日 13:05:30
多媒体查询
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主要知识点复习总结+HTML5新增标签

分享2014-4-1 HTML5上课笔记 2、CSS3属性(内核前缀) Mozilla 内核   css前缀-moz;  WebKit  内核   css前缀-webkit ;(...

H5+CSS3简单动画 知识点 汇总

乱入几个:  1.h5的一个语义化标签   figure :用于规定独立的流内容(图像 图表 照片 代码等)   figcapition:与figure配套使用,用于标签定义figure元素标题...

CSS3 主要知识点总结+HTML5 新增标签

目录: 1、CSS 属性编写顺序 2、CSS3属性(内核前缀) 3、position相对/绝对定位 4、overflow:scroll等的区别 5、display属性应用 6、盒模型计算方...

复习和总结H5 CSS3常见的知识点

常用标签       块级元素         div form table ul li ol dl dt dd h1-6 p header footer    nav figure    ...

【整理】CSS3知识点4-分页

分页样式 http://www.runoob.com/css3/css3-pagination.html 1、========================================...
  • for_cxc
  • for_cxc
  • 2016年05月31日 13:04
  • 350

【整理】CSS3知识点1

========================================================================简介 CSS3 简介 对CSS3已完全向后兼容,所以...
  • for_cxc
  • for_cxc
  • 2016年05月31日 13:02
  • 233

CSS3知识点归纳

  • 2017年07月26日 10:21
  • 49KB
  • 下载

飞雀教育CSS3知识点:文本属性

  • 2016年08月15日 17:50
  • 11KB
  • 下载

CSS3 知识点总结

边框的知识点:1.border-radius:border-radius设置的值越大,弧度越大,可以用具体数值10px来设置,也可以用20% 百分比来设置;你也可以只设置一个或其中几个角的弧度,就像这...
  • AXinBYZ
  • AXinBYZ
  • 2016年10月27日 15:32
  • 176

CSS3知识点总结

CSS3知识点总结
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【整理】CSS3知识点5
举报原因:
原因补充:

(最多只允许输入30个字)