CSS3 Media Queries Beispiele
In diesem Kapitel werden wir Ihnen einige Beispiele für Multimedia demonstrieren.
Bevor wir beginnen, eine Liste von Links zu der elektronischen Mailbox aufbauen. HTML-Code ist wie folgt:
Beispiel 1
<Html>
<Head>
<Style>
ul {
list-style-type: none;
}
ul li a {
Farbe: grün;
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>
Versuchen »
Beachten Sie, dass data-email - data-email - Eigenschaften. In HTML können wir mit verwenden data- Attribut Präfix Informationen zu speichern.
auf 699px Breite 520 - fügen Sie das Mailbox-Symbol
Wenn die Breite des Browsers in der 520 bis 699px, das Postfach, bevor Sie das Symbol E-Mail Link hinzufügen:
Beispiel 2
ul li a {
padding-left: 30px;
background: url (E - Mail-icon.png) Mitte links no-repeat;
}
}
Versuchen »
700 bis 1000px - Textpräfix Informationen hinzufügen
Wenn die Breite des Browsers 700 bis 1000px, wird ein Postfach verknüpfen, bevor "E-Mail:" und fügte hinzu:
Beispiel 3
ul li a: vor {
Inhalt: "E - Mail:";
font-style: italic;
color: # 666666;
}
}
Versuchen »
Größer als 1001PX Breite - Hinzufügen E-Mail-Adresse
Wenn der Browser ist breiter als 1001PX, Kontakt-E-Mail-Adresse wird nach dem Link hinzugefügt werden.
Wir verwenden data- Attribute E-Mail - Adressen nach jedem der Namen hinzuzufügen:
Beispiel 4
ul li a: nach {
Inhalt: "(" attr (data -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}
Versuchen »
Größer als 1151px Breite - fügen Sie Symbol
Wenn der Browser breiter als 1001PX ist, werden die Namen vor dem Symbol hinzugefügt werden.
Beispiel, wir müssen keine zusätzliche Abfrageblöcke zu schreiben, die wir in den bestehenden Medien-Anfragen durch Komma getrennt zusätzliche Medienabfragen hinzufügen können (ähnlich OR-Operator):
Beispiel 5
ul li a {
padding-left: 30px;
background: url (E - Mail-icon.png) Mitte links no-repeat;
}
}
Versuchen »
Weitere Beispiele
Verwenden Sie die Mailing - Liste Link auf einer Webseite Sidebar
Die Beispiele in der linken Spalte der Seite eine Mailing-Liste von Links hinzuzufügen.