使用html表为我的文档创建一个标题，我想知道如何在打印网页时放置页码，我知道使用css的@page选择器我可以配置边距的内容和其他人，但我不知道它是如何实现我想要的。
这是html代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DocManual.aspx.cs" Inherits="Presentacion.GestionDocumental.DocManual" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../css/print.css" rel="stylesheet" />
<link href="css/confAPA.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title></title>
</head>
<body style="font-family: 'Times New Roman'">
<form id="form1" runat="server">
<div class="hoja" style="text-align:center">
<h1 style="margin-top: 150px;">Centro médico crecer.</h1>
<h1 style="margin-top: 120px;">Manual de xxxxxx</h1>
<h3 style="margin-top: 120px">Versión 1</h3>
<h1 style="margin-top: 120px">01-01-1990</h1>
</div>
<div class="hoja" id="tbContenido">
<h3 style="text-align: center">Tabla de contenido</h3>
<div>
<div><span>Introdución</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Objetivos</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Alcance</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Marco Legal</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Desarrollo</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Contenido</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Gosario de terminos</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Anexos</span></div>
<div></div>
<div><span>1</span></div>
</div>
</div>
<table>
<thead>
<tr id="header">
<td>
<table>
<tr>
<td colspan="5" rowspan="4">
<img src="../Images/logocrecer.png" width="100" />
</td>
<td colspan="10" rowspan="3"><strong><span id="lbProceso" runat="server"></span></strong></td>
<td colspan="5"><strong>Código:</strong><span id="lbCodigo1" runat="server"></span></td>
</tr>
<tr>
<td colspan="5"><strong>Fecha:</strong><span id="lbFecha1" runat="server"></span></td>
</tr>
<tr>
<td colspan="5"><strong>Version:</strong><span id="lbVersion1" runat="server"></span></td>
</tr>
<tr>
<td colspan="10"><strong><span id="lbProcedimiento" runat="server"></span></strong></td>
<td colspan="5"><strong>Páginas:</strong><span id="lbPAginas1" runat="server"></span></td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3>Introducción</h3>
<div id="txtIntroducion" runat="server"></div>
<h3>Objetivos</h3>
<div id="txtOjetivos" runat="server"></div>
<h3>Alcance</h3>
<div id="txtAlcance" runat="server"></div>
<h3>Marco Legal</h3>
<div id="txtMarcoLegal" runat="server"></div>
<h3>Desarrollo</h3>
<div id="txtDesarrollo" runat="server"></div>
<h3>Contenido</h3>
<div id="txtContenido" runat="server"></div>
<h3>Gosario de terminos</h3>
<div></div>
<h3>Anexos</h3>
<div id="anexos" runat="server"></div>
<br />
<table id="control-cambios">
<thead>
<tr>
<td colspan="5" class="text-center" style="font-weight:900">CONTROL DE CAMBIOS</td>
</tr>
<tr>
<td><strong>Vesion:</strong></td>
<td><strong>Fecha:</strong></td>
<td><strong>Justificación</strong></td>
<td><strong>Descripción</strong></td>
<td><strong>Responsable</strong></td>
</tr>
</thead>
<tbody id="tbControlCambios" runat="server">
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr id="footer">
<td>
<table>
<thead>
<tr>
<td>Eleborado por</td>
<td>Revisado por</td>
<td>Aprobado por</td>
</tr>
</thead>
<tbody runat="server" id="Participantes" style="text-align:Center">
</tbody>
</table>
</td>
</tr>
</tfoot>
</table>
</form>
<script>
print();
</script>
</body>
</html>
print.css 存档
@media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
header, nav, footer {
overflow: visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after
{
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after
{
content: attr();
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img, table {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 2.54cm;
margin-top: 0;
margin-bottom:0;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: "Pagina " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
}