CSS3 consultas de mídia exemplos
Neste capítulo, vamos demonstrar-lhe alguns exemplos para multimídia.
Antes de começar a fazer uma lista de links para a caixa de correio eletrônico. código HTML é a seguinte:
exemplo 1
<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 = "[email protected]" href = "mailto: [email protected]"> John Doe </ a> </ li>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> Mary Moe </ a> </ li>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> Amanda Panda </ a> </ li>
</ Ul>
</ Body>
</ Html>
tente »
Note-se que data-email propriedades. Em HTML, podemos usar com data- prefixo de atributo para armazenar informações.
520 para 699px de largura - adicionar o ícone da caixa de correio
Quando a largura do navegador no 520 a 699px, a caixa de correio antes de adicionar o link ícone Mail:
exemplo 2
ul li a {
padding-left: 30px;
background: url (e-mail-icon.png) centro-esquerda no-repeat;
}
}
tente »
700 a 1000px - adicionar informações prefixo texto
Quando a largura do navegador 700 a 1000px, vai ligar uma caixa de correio antes de acrescentar "Email:":
exemplo 3
ul li a: antes de {
content: "Email:";
font-style: italic;
color: # 666666;
}
}
tente »
Maior que 1001PX largura - Adicionar endereço de e-mail
Quando o navegador é mais amplo do que 1001PX, contato endereço de e-mail será adicionado após o link.
Usamos data- atributos para adicionar endereços de e-mail depois de cada um dos nomes:
exemplo 4
ul li a: after {
content: "(" attr (dados -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}
tente »
Maior do que 1151px de largura - adicionar o ícone
Quando o navegador é mais amplo do que 1001PX, os nomes serão adicionados na frente do ícone.
Exemplo, não temos para escrever blocos de consulta adicionais, podemos usar nas consultas de mídia existentes separados por vírgulas para adicionar consultas de mídia adicionais (similar operador OR):
exemplo 5
ul li a {
padding-left: 30px;
background: url (e-mail-icon.png) centro-esquerda no-repeat;
}
}
tente »
mais exemplos
Use o link lista de discussão sobre uma barra lateral página da Web
Os exemplos na coluna esquerda da página para adicionar uma lista de discussão de links.