Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mencetak Halaman Web Semasa Menyembunyikan Elemen Tertentu?

Bagaimanakah Saya Boleh Mencetak Halaman Web Semasa Menyembunyikan Elemen Tertentu?

Mary-Kate Olsen
Lepaskan: 2024-12-22 13:16:10
asal
260 orang telah melayarinya

How Can I Print a Webpage While Hiding Specific Elements?

Cara Mencetak Halaman Web tanpa Memaparkan Elemen Tertentu

Apabila menyediakan halaman web untuk pencetakan, selalunya wajar untuk menyembunyikan elemen tertentu yang tidak bertujuan untuk dipaparkan pada halaman bercetak. Ini termasuk elemen seperti butang navigasi atau notis hak cipta.

Penyelesaian

Untuk mencapai matlamat ini, anda boleh menggunakan gabungan pertanyaan media CSS dan atribut kelas HTML. Berikut ialah panduan langkah demi langkah:

1. Pengubahsuaian Lembaran Gaya

Dalam lembaran gaya tapak web anda, tambahkan kod CSS berikut:

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}
Salin selepas log masuk

2. Atribut Kelas HTML

Dalam kod HTML anda, kenal pasti elemen yang ingin anda sembunyikan semasa mencetak dengan menambahkan atribut kelas 'tiada-cetak' padanya.

Contoh HTML :

<a href="#" class="no-print">Print This Page</a>
<p>Good Evening</p>
Salin selepas log masuk

3. Keputusan

Apabila halaman web dicetak, pertanyaan media CSS akan menyembunyikan semua elemen dengan kelas 'tiada cetak', termasuk pautan untuk mencetak halaman itu sendiri. Akibatnya, output bercetak hanya akan memaparkan teks "Selamat Petang" tanpa label "Cetak".

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetak Halaman Web Semasa Menyembunyikan Elemen Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan