CSS3 médias Requêtes exemples
Ce chapitre, nous allons vous montrer quelques exemples pour le multimédia.
Avant de commencer à faire une liste de liens vers la boîte aux lettres électronique. Le code HTML est comme suit:
exemple 1
<Html>
<Head>
<Style>
ul {
list-style-type: none;
}
ul li a {
couleur: vert;
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>
Essayez »
Notez que les data-email propriétés. En HTML , nous pouvons utiliser avec de data- préfixe d'attribut pour stocker des informations.
520 à 699px de largeur - ajouter l'icône de boîte aux lettres
Lorsque la largeur du navigateur dans le 520 à 699px, la boîte aux lettres avant d'ajouter le lien icône Mail:
exemple 2
ul li a {
padding-left: 30px;
background: url (email-icon.png) centre gauche no-repeat;
}
}
Essayez »
700 à 1000px - ajouter des informations de préfixe de texte
Lorsque la largeur du navigateur 700 à 1000px, reliera une boîte aux lettres avant d'ajouter "Email:":
exemple 3
ul li a: avant {
contenu: "Email:";
font-style: italic;
color: # 666666;
}
}
Essayez »
Plus de 1001PX largeur - Ajouter une adresse e-mail
Lorsque le navigateur est plus large que 1001PX, contacter l'adresse e-mail sera ajouté après le lien.
Nous utilisons de data- attributs pour ajouter des adresses e-mail après chacun des noms:
exemple 4
ul li a: après {
contenu: "(" attr (données -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}
Essayez »
Plus de 1151px largeur - ajouter l'icône
Lorsque le navigateur est plus large que 1001PX, les noms seront ajoutés en face de l'icône.
Exemple, nous ne disposons pas d'écrire des blocs de requête supplémentaires, nous pouvons utiliser dans les requêtes des médias existants séparés par des virgules pour ajouter des requêtes de médias supplémentaires (semblable opérateur OR):
exemple 5
ul li a {
padding-left: 30px;
background: url (email-icon.png) centre gauche no-repeat;
}
}
Essayez »
D'autres exemples
Utilisez le lien de la liste de diffusion sur une page Web sidebar
Les exemples dans la colonne de gauche de la page pour ajouter une liste de diffusion de liens.