Latest web development tutorials

CSS3 media Zapytania przykłady

W tym rozdziale pokażemy wam kilka przykładów dla multimediów.

Zanim zaczniemy tworzyć listę linków do poczty elektronicznej. HTML kod jest w następujący sposób:

Przykład 1

<! DOCTYPE html>
<Html>
<Head>
<Style>
ul {
list-style-type: none;
}

ul li a {
kolor: zielony;
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>

Spróbuj »

Należy pamiętać, że data-email właściwości. W HTML możemy korzystać z data- przedrostka atrybutu do przechowywania informacji.

520 do 699px szerokość - dodać ikonę poczty

Gdy szerokość przeglądarki w 520 do 699px, skrzynka przed dodaniem linku ikonę Mail:

Przykład 2

Ekran @media oraz (max-width: 699px) oraz (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url (e-icon.png) opuścił ośrodek no-repeat;
}
}

Spróbuj »

700 do 1000px - dodanie informacji prefiksu tekstu

Gdy szerokość przeglądarki 700 do 1000px, będzie link do skrzynki pocztowej przed dodaniem "E-mail:":

Przykład 3

Ekran @media oraz (max-width: 1000px) oraz (min-width: 700px) {
ul li a: przed {
treść: "E-mail";
font-style: italic;
color: # 666666;
}
}

Spróbuj »

Większy niż 1001px szerokości - Dodaj adres e-mail

Gdy przeglądarka jest szerszy niż 1001px, kontakt e-mail zostanie dodany po link.

Używamy data- atrybuty, aby dodać adresy e-mail po każdym z nazwami:

Przykład 4

@media ekranem oraz (min-width: 1001px) {
ul li a: po {
treść: "(" attr (dane -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}

Spróbuj »

Większy niż 1151px szerokości - dodaj ikonę

Gdy przeglądarka jest szerszy niż 1001px nazwy będą dodawane przed ikony.

Przykład, nie musimy pisać dodatkowych bloków zapytania, możemy skorzystać z istniejących zapytań mediów oddzielonych przecinkami dodanie dodatkowych zapytań o media (podobny operator OR):

Przykład 5

Ekran @media oraz (max-width: 699px) oraz (min-width: 520px) (min-width: 1151px) {
ul li a {
padding-left: 30px;
background: url (e-icon.png) opuścił ośrodek no-repeat;
}
}

Spróbuj »
Przykłady

Więcej przykładów

Użyj łącza listy mailingowej na stronie WWW bocznym
Przykłady w lewej kolumnie strony, aby dodać listę mailingową linków.