Drucken Sie Seitenzahlen auf Seiten beim Drucken von HTML

Ich habe gelesen, eine Menge von web-sites über das drucken von Seitenzahlen, aber trotzdem konnte ich es nicht machen, Anzeige für meine html-Seite, wenn ich versuche, es zu drucken.
Damit der CSS-code neben:

@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

Habe ich versucht, diese Seite der Regel innerhalb

@media all {
    *CSS code*
}

Und außerhalb von ihm, versucht, es in @media printaber nichts hat mir geholfen, um die Seite anzuzeigen zahlen auf meiner Seite. Ich habe versucht, mit FireFox und Chrome(basierend auf WebKit, wie Sie wissen). Ich denke, das problem ist in meinem html-oder css-code.
Könnte jemand mir zeigen, ein Beispiel für die Umsetzung dieser @page Regel in der großen html-Seite mit mehreren Seiten? Ich brauche nur den code der html-Seite und den code der css-Datei, die funktioniert.
P. S. ich habe die neuesten unterstützten Versionen der Browser.

InformationsquelleAutor der Frage Donvino | 2013-11-18

  1. 37

    Als @Seite mit pagenumbers arbeiten nicht im Browser denn nun war ich auf der Suche nach alternativen.

    Habe ich ein Antwort geschrieben von Oliver Kohll.

    Ich werde umbuchen es hier, damit jeder es finden konnte leichter:

    Für diese Antwort sind wir nicht mit @page, das ist eine Reine CSS-Lösung, jedoch funktioniert im FireFox 20+ Versionen. Hier ist die link ein Beispiel.

    Die CSS ist:

    #content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

    Und der HTML-code ist:

    <div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

    Diese Weise können Sie Ihre Seitenzahl durch Bearbeiten der Parameter auf #pageFooter. Mein Beispiel:

    #pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20px;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }

    Diesem trick arbeitete für mich in Ordnung. Hoffe es wird Euch helfen.

    InformationsquelleAutor der Antwort Donvino

  2. 11

    Können Sie dies versuchen, können Sie verwenden content: counter(page); 

         @page {
       @bottom-left {
            content: counter(page) "/" counter(pages);
        }
     }

    Ref: http://www.w3.org/TR/CSS21/generate.html#counters

    http://www.princexml.com/doc/9.0/page-numbers/

    InformationsquelleAutor der Antwort Krish R

  3. 4

    Dies ist, was Sie wollen: 

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

    InformationsquelleAutor der Antwort SaturnsEye

  4. 1
       **@page {
            margin-top:21% !important; 
            @top-left{
            content: element(header);

            }

            @bottom-left {
            content: element(footer
 }
 div.header {

            position: running(header);

            }
            div.footer {

            position: running(footer);
            border-bottom: 2px solid black;


            }
           .pagenumber:before {
            content: counter(page);
            }
            .pagecount:before {
            content: counter(pages);
            }      
 <div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
                <span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
            </div >**

    InformationsquelleAutor der Antwort user9663245

Schreibe einen Kommentar