Wie kann ich mithilfe von CSS Seitenzahlen zur Druckausgabe meiner Website hinzufügen?

Seitenzahlen mit CSS/HTML drucken

Beim Drucken einer Website kann das Hinzufügen einer Kopf- und Fußzeile mit Seitenzahlen die Lesbarkeit des Dokuments verbessern und Organisation. Um dies zu erreichen, bietet CSS eine leistungsstarke Lösung, die die Anpassung der gedruckten Ausgabe ermöglicht.

Um eine Seitenkopf- und -fußzeile hinzuzufügen, können Sie die @page-Regel mit der @bottom-right-Eigenschaft verwenden. Die folgende CSS-Deklaration fügt beispielsweise Seitenzahlen in der unteren rechten Ecke jeder gedruckten Seite hinzu:

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

In dieser Deklaration:

• Zähler(Seite) stellt den aktuellen Wert dar Seitenzahl.
• Zähler(Seiten) stellt die Gesamtzahl der Seiten dar.

Durch Kombination der Content-Eigenschaft mit diesen Mit den Zählern können Sie dynamisch die aktuelle Seitenzahl aus der Gesamtseitenzahl anzeigen.

Browser-Unterstützung

Die @page-Regel bietet abhängig von ihren Eigenschaften unterschiedliche Browserunterstützung. Browser wie Chrome und Firefox unterstützen @unten-rechts für Seitenzahlen vollständig. Für den Internet Explorer ist ein Shim erforderlich, um diese Funktion zu implementieren. Es wird empfohlen, die neueste Browser-Unterstützungsdokumentation auf spezifische Informationen zu prüfen.

Weiterführende Literatur

Ausführlichere Informationen und Beispiele finden Sie in den folgenden Ressourcen:

• W3C CSS-Seitenmodul: http://www.w3.org/TR/css3-page/
• Hinzufügen Seitenzahlen mit CSS-Seiteneigenschaft: http://www.intelligrape.com/blog/2010/08/20/add-page-number-using-page-property-of-css/
• Seitenzahlen in Prince XML: http://www.princexml.com/doc/6.0/page-numbers/

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS Seitenzahlen zur Druckausgabe meiner Website hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!