购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS3 多媒体查询实例

CSS3 多媒体查询实例
CSS3 多媒体查询实例的讲解
编辑:前端控 前端控 更新时间:2019-02-01 10:44:52

CSS3 多媒体查询实例

本节将为大家演示一些多媒体查询实例

开始之前我们先制作一个电子邮箱的链接列表,HTML 代码如下:

实例

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul { 
    list-style-type: none; 
} 

ul li a { 
    color: green; 
    text-decoration: none; 
    padding: 3px; 
    display: block; 
} 
</style> 
</head> 
<body> 

<ul> 
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John</a></li > 
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary</a></li > 
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda </a></li> 
</ul> 

</body> 
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

注意: data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息

520 到 699px 宽度 - 添加邮箱图标

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标

实例

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url("images/youxiang.png");
    }
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

700 到 1000px:添加文本前缀信息

当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: "

实例

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

大于 1001px 宽度: 添加邮件地址

当浏览器的宽度大于 1001px 时,会在链接后添加邮件地址接。

我们会使用 data- 属性来为每个人名后添加邮件地址

实例

@media screen and (min-width: 1001px) { 
    ul li a:after { 
        content: " (" attr(data-email) ")"; 
        font-size: 12px; 
        font-style: italic; 
        color: #666666; 
    } 
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 35.jpg

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号