CSS 및 HTML을 사용하여 인쇄 가능한 문서에 페이지 번호를 어떻게 추가할 수 있습니까?

인쇄 가능한 문서에 대해 CSS 및 HTML을 사용하여 페이지 번호 매기기

웹 페이지를 인쇄하려면 머리글, 바닥글, 페이지 매김과 같은 추가 요소가 필요한 경우가 많습니다. 전문적인 프레젠테이션. 바닥글에 페이지 번호를 포함해야 하는 경우 CSS와 HTML을 사용하는 솔루션이 있습니다.

CSS 페이지 속성 활용:

CSS @page 규칙은 다음을 제공합니다. 페이지의 인쇄된 요소를 광범위하게 제어할 수 있습니다. 바닥글에 페이지 번호를 추가하려면 "@bottom-right" 여백을 사용하여 표시할 콘텐츠를 지정할 수 있습니다.

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

이 스니펫에서:

• counter( 페이지)는 현재 페이지 번호를 나타냅니다.
• 카운터(페이지)는 총 페이지 수를 나타냅니다. 페이지.

이러한 카운터를 결합하면 바닥글 내용에 현재 페이지 번호와 총 페이지 수가 표시됩니다.

브라우저 호환성 및 고려 사항:

@page 속성은 모든 주요 최신 브라우저에서 지원됩니다. 그러나 이전 버전에서는 이러한 기능을 완전히 구현하지 못할 수 있다는 점에 유의하는 것이 중요합니다. 답변에 제공된 링크는 CSS 페이지에 대한 추가 리소스와 통찰력을 제공합니다. 번호 매기기:

• http://www.w3.org/TR/css3-page/
• http://www.intelligrape.com/blog/2010/08/20 / add-page-number-using-page-property-of-css/
• http://www.princexml.com/doc/6.0/page-numbers/

위 내용은 CSS 및 HTML을 사용하여 인쇄 가능한 문서에 페이지 번호를 어떻게 추가할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!