Maison  >  Article  >  interface Web  >  Comment puis-je ajouter des numéros de page à des documents imprimables à l'aide de CSS et HTML ?

Comment puis-je ajouter des numéros de page à des documents imprimables à l'aide de CSS et HTML ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-26 13:42:09528parcourir

How Can I Add Page Numbers to Printable Documents Using CSS and HTML?

Réaliser la numérotation des pages avec CSS et HTML pour les documents imprimables

L'impression de pages Web nécessite souvent des éléments supplémentaires comme un en-tête, un pied de page et une pagination pour présentation professionnelle. Si vous rencontrez le besoin d'inclure des numéros de page dans le pied de page, voici une solution utilisant CSS et HTML.

Utilisation de la propriété de page CSS :

La règle CSS @page fournit contrôle étendu sur les éléments imprimés sur une page. Pour ajouter des numéros de page au pied de page, vous pouvez préciser le contenu à afficher à l'aide de la marge "@bottom-right" :

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

Dans cet extrait :

  • counter( page) représente le numéro de page actuel.
  • compteur(pages) représente le nombre total de pages.

En combinant ces compteurs, le contenu du pied de page affichera le numéro de page actuel et le nombre total de pages.

Compatibilité et considérations du navigateur :

La propriété @page est prise en charge par tous les principaux navigateurs modernes. Cependant, il est important de noter que les anciennes versions peuvent ne pas implémenter entièrement ces fonctionnalités. Les liens fournis dans la réponse offrent des ressources supplémentaires et des informations sur la page CSS numérotation :

  • http://www.w3.org/TR/css3-page/
  • http://www.intelligrape.com/blog/2010/08/20 / ajouter un numéro de page à l'aide de la propriété de page de css/
  • http://www.princexml.com/doc/6.0/page-numbers/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn