Contoh pertanyaan multimedia CSS3


Dalam bab ini kami akan menunjukkan beberapa contoh pertanyaan multimedia untuk anda.

Sebelum kita mula, mari buat senarai pautan alamat e-mel. Kod HTML adalah seperti berikut:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk lihat contoh dalam talian

Perhatikan atribut data-email. Dalam HTML kita boleh menggunakan atribut yang diawali dengan data- untuk menyimpan maklumat.

lebar 520 hingga 699px - tambah ikon peti mel

Apabila lebar penyemak imbas ialah 520 hingga 699px, tambah ikon mel sebelum pautan peti mel:

Contoh 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

700 hingga 1000px - Tambah maklumat awalan teks

Apabila lebar penyemak imbas antara 700 dan 1000px, "E-mel: " akan ditambahkan sebelum pautan e-mel:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Lebar lebih daripada 1001px - tambah alamat e-mel

Apabila lebar penyemak imbas melebihi 1001px, alamat e-mel akan ditambahkan selepas pautan.

Kami akan menggunakan atribut data- untuk menambah alamat e-mel selepas nama setiap orang:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

Jalankan Contoh»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Lebih daripada 1151px lebar - tambah ikon

Apabila lebar penyemak imbas lebih besar daripada 1001px, Ikon akan ditambah sebelum nama orang itu.

Dalam contoh, kami tidak menulis blok pertanyaan tambahan Kami boleh menggunakan pemisahan koma selepas media pertanyaan sedia ada untuk menambah pertanyaan media lain (serupa dengan operator OR):

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(../style/images/email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Lagi Instance

Menggunakan pautan senarai mel pada bar sisi halaman web
Contoh ini menambah pautan senarai mel ke lajur kiri halaman web.