CSS3 Consultas de medios ejemplos
En este capítulo vamos a demostrar que algunos ejemplos para multimedia.
Antes de comenzar a hacer una lista de enlaces a la casilla de correo electrónico. HTML es como sigue:
Ejemplo 1
<Html>
<Head>
<Style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
</ Style>
</ Head>
<Cuerpo>
<Ul>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> John Doe </ a> </ li>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> María Moe </ a> </ li>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> Amanda Panda </ a> </ li>
</ Ul>
</ Body>
</ Html>
Trate »
Tenga en cuenta que data-email propiedades. En HTML se puede utilizar con data- prefijo de atributo para almacenar información.
520 a 699px de ancho - añadir el icono de buzón
Cuando la anchura del navegador en el 520 a 699px, el buzón antes de añadir el enlace icono Correo:
Ejemplo 2
ul li a {
padding-left: 30px;
background: url (email-icon.png) centro izquierdo no-repeat;
}
}
Trate »
700 a 1000 píxeles - añadir información prefijo de texto
Cuando la anchura del navegador 700 a 1000 píxeles, se vinculará un buzón antes de añadir "Email:":
Ejemplo 3
ul li a: antes de {
contenido: "Correo electrónico:";
font-style: cursiva;
color: # 666666;
}
}
Trate »
Mayor que la anchura 1001PX - Añadir dirección de correo electrónico
Cuando el navegador es más ancha que 1001PX, se añadirá el contacto e-mail después del enlace.
Utilizamos data- de atributos para agregar direcciones de correo electrónico después de cada uno de los nombres:
Ejemplo 4
ul li a: tras {
contenido: "(" attr (datos -email) ")";
font-size: 12px;
font-style: cursiva;
color: # 666666;
}
}
Trate »
Mayor de 1151px de ancho - añadir icono
Cuando el navegador es más ancha que 1001PX, se añadirán los nombres delante del icono.
Ejemplo, que no tiene que escribir bloques de consulta adicionales, podemos utilizar en las consultas de los medios de comunicación existentes separadas por comas para agregar preguntas de los medios adicionales (similar operador OR):
Ejemplo 5
ul li a {
padding-left: 30px;
background: url (email-icon.png) centro izquierdo no-repeat;
}
}
Trate »
más ejemplos
Utilice el enlace lista de correo en una barra lateral página Web
Los ejemplos en la columna izquierda de la página para añadir una lista de correo de enlaces.