小白教程
所有教程
关于
Search
172.70.127.161
172.70.127.161
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS3 多媒体查询实例”的源代码
本页内容
上一节:
CSS3_多媒体查询
下一节:
CSS_动画
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 多媒体查询实例}}[[Category:CSS 教程|61]] = CSS3 多媒体查询实例 = 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: === 实例 1 === <sample title="" desc="" lang="html" hererun="1"> <!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 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> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <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 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> </run> 注意 <code>data-email</code> 属性。在 HTML 中我们可以使用带 <code>data-</code> 前缀的属性来存储信息。 == 520 到 699px 宽度 - 添加邮箱图标 == 当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标: === 实例 2 === <sample title="" desc="" lang="html" hererun="1"> @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; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <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> </run> == 700 到 1000px - 添加文本前缀信息 == 当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: ": === 实例 3 === <sample title="" desc="" lang="html" hererun="1"> @media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <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; } } @media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } </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> </run> == 大于 1001px 宽度 - 添加邮件地址 == 当浏览器的宽度大于 1001px 时,会在链接后添加邮件地址接。 我们会使用 <code>data-</code> 属性来为每个人名后添加邮件地址: === 实例 4 === <sample title="" desc="" lang="html" hererun="1"> @media screen and (min-width: 1001px) { ul li a:after { content: " (" attr(data-email) ")"; font-size: 12px; font-style: italic; color: #666666; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <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; } } @media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } @media screen and (min-width: 1001px) { ul li a:after { content: " (" attr(data-email) ")"; font-size: 12px; font-style: italic; color: #666666; } } </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> </run> == 大于 1151px 宽度 - 添加图标 == 当浏览器的宽度大于 1001px 时,会在人名前添加图标。 实例中,我们没有编写额外的查询块,我们可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符): === 实例 5 === <sample title="" desc="" lang="html" hererun="1"> @media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <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), (min-width: 1151px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } } @media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } @media screen and (min-width: 1001px) { ul li a:after { content: " (" attr(data-email) ")"; font-size: 12px; font-style: italic; color: #666666; } } </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> </run> == 更多实例 == [[try.php?filename=trycss3_mediaqueries_ex6|在一个网页的侧栏上使用邮件列表链接]]该实例在网页的左侧栏添加了邮件链接列表。
返回至“
CSS3 多媒体查询实例
”。
上一节:
CSS3_多媒体查询
下一节:
CSS_动画