CSS3 Media Query contoh
bab ini kita akan menunjukkan beberapa contoh untuk multimedia.
Sebelum kita mulai membuat daftar link ke kotak surat elektronik. Kode HTML adalah sebagai berikut:
contoh 1
<Html>
<Head>
<Gaya>
ul {
list-style-type: none;
}
ul li a {
Warna: hijau;
text-decoration: none;
padding: 3px;
display: block;
}
</ Style>
</ Kepala>
<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>
Coba »
Perhatikan bahwa data-email properti. Dalam HTML kita dapat menggunakan dengan data- atribut awalan untuk menyimpan informasi.
520 untuk 699px lebar - menambahkan ikon kotak
Ketika lebar browser di 520 untuk 699px, kotak surat sebelum menambahkan ikon Mail link:
contoh 2
ul li a {
padding-left: 30px;
background: url (email-icon.png) meninggalkan pusat no-repeat;
}
}
Coba »
700 untuk 1000px - menambahkan informasi teks awalan
Ketika lebar browser 700 untuk 1000px, akan menghubungkan kotak pesan sebelum menambahkan "Email:":
contoh 3
ul li a: sebelum {
konten: "Email:";
font-style: italic;
color: # 666666;
}
}
Coba »
Lebih besar dari 1001px lebar - Tambahkan alamat e-mail
Ketika browser lebih lebar dari 1001px, kontak alamat e-mail akan ditambahkan setelah link.
Kami menggunakan data- atribut untuk menambahkan alamat e-mail setelah masing-masing nama:
contoh 4
ul li a: setelah {
konten: "(" attr (data -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}
Coba »
Lebih besar dari 1151px lebar - menambahkan ikon
Ketika browser lebih lebar dari 1001px, nama akan ditambahkan di depan ikon.
Misalnya, kita tidak harus menulis blok permintaan tambahan, kita bisa menggunakan dalam permintaan media yang ada dipisahkan dengan koma untuk menambahkan query media tambahan (setara operator OR):
contoh 5
ul li a {
padding-left: 30px;
background: url (email-icon.png) meninggalkan pusat no-repeat;
}
}
Coba »
contoh yang lebih
Gunakan link mailing list pada halaman Web sidebar
Contoh-contoh di kolom kiri halaman untuk menambahkan daftar mailing link.