推荐阅读
  • CSS3 框大小

    CSS3 框大小 [mystyle] #div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; bord

  • CSS3 圆角

    #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;

  • CSS3 边框

    CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image CSS3 圆角 在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 CSS3 中,很容易创建圆角。 在 CSS3

  • CSS3 背景

    CSS3 背景 CSS3 背景 CSS3 中包含几个新的背景属性,提供更大背景元素控制。 在本章您将了解以下背景属性: background-image background-size background-origin background-clip 您还将学习如何使用多重背景图像。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -m

  • CSS3 用户界面

    CSS3 用户界面 CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

  • CSS3 多媒体查询实例

    CSS3 多媒体查询实例 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: 实例 1 <!DOCTYPE html><html><head><style>ul {  &nbs

  • CSS3 渐变

    CSS3 渐变(Gradients) 渐变效果 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。 CSS3 定义了两种类型的渐变(gra

  • CSS3 分页

    CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li

  • CSS3 图片

    CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 尝试一下 » 实例 椭圆形图片: img {    border-radius: 50%;} 尝试一下 » 缩

  • CSS3 动画

    [mystyle] #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:a

CSS3 多媒体查询实例

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

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


实例 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>

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

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

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


实例 2

	@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;    

	}}

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

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


实例 3

	@media screen and (max-width: 1000px) and (min-width: 700px) {    

	ul li a:before {        

	content: "Email: ";        

	font-style: italic;        color: #666666;    

	}}

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

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

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


实例 4

	@media screen and (min-width: 1001px) {    ul li 

	a:after {        content: " (" attr(data-email) 

	")";        font-size: 12px;        

	font-style: italic;        color: 

	#666666;    }}

大于 1151px 宽度 - 添加图标

当浏览器的宽度大于 1001px 时,会在人名前添加图标。

实例中,我们没有编写额外的查询块,我们可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):


实例 5

	@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;    

	}}
实例

更多实例

在一个网页的侧栏上使用邮件列表链接
该实例在网页的左侧栏添加了邮件链接列表。

关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图