Wie kann ich eine Webseite drucken und gleichzeitig bestimmte Elemente ausblenden?

So drucken Sie eine Webseite, ohne bestimmte Elemente anzuzeigen

Beim Vorbereiten einer Webseite zum Drucken ist es oft wünschenswert, bestimmte Elemente auszublenden, die nicht angezeigt werden soll auf der gedruckten Seite erscheinen. Dazu gehören Elemente wie Navigationsschaltflächen oder Urheberrechtshinweise.

Lösung

Um dies zu erreichen, können Sie eine Kombination aus CSS-Medienabfragen und HTML-Klassenattributen verwenden. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Stylesheet-Änderung

Fügen Sie im Stylesheet Ihrer Website den folgenden CSS-Code hinzu:

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

2. HTML-Klassenattribut

Identifizieren Sie in Ihrem HTML-Code die Elemente, die Sie beim Drucken ausblenden möchten, indem Sie ihnen das Klassenattribut „no-print“ hinzufügen.

Beispiel-HTML :

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

3. Ergebnis

Wenn die Webseite gedruckt wird, blendet die CSS-Medienabfrage alle Elemente mit der Klasse „no-print“ aus, einschließlich des Links zum Drucken der Seite selbst. Daher wird in der gedruckten Ausgabe nur der Text „Guten Abend“ ohne die Beschriftung „Drucken“ angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Webseite drucken und gleichzeitig bestimmte Elemente ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!