页眉页脚工具
设置页眉页脚内容，生成可用的代码
📖 使用指南 点击查看详细使用说明和功能介绍
收起 展开
📖 使用指南
点击查看详细使用说明和功能介绍
页眉页脚工具
免费在线页眉页脚生成工具，支持设置页眉和页脚的左侧、居中、右侧内容，生成HTML、CSS、JavaScript代码，一键复制。
主要功能
1. 灵活的页眉设置
- 左侧内容：可放置章节名、文档标题等
- 居中内容：可放置Logo、公司名等
- 右侧内容：可放置日期、页码等
2. 灵活的页脚设置
- 左侧内容：可放置文件路径、作者等
- 居中内容：可放置版权信息等
- 右侧内容：可放置页码等
3. 分隔线控制
- 可选择是否显示页眉页脚分隔线
- 默认显示1px灰色分隔线
4. 多种输出格式
- HTML表格布局
- CSS @page规则
- JavaScript配置对象
使用方法
- 设置页眉内容（左侧、居中、右侧）
- 设置页脚内容（左侧、居中、右侧）
- 选择是否显示分隔线
- 选择输出格式
- 点击"复制结果"
适用场景
- 文档排版：为Word/Excel文档设置页眉页脚
- 网页打印：设置打印样式的页眉页脚
- 报告制作：为报告添加专业页眉页脚
- 合同文档：为合同添加签章信息
常见问题
支持自动页码吗？
生成的HTML代码中需要手动添加页码，CSS代码可使用 counters 实现自动页码。
可以自定义分隔线样式吗？
当前版本提供默认分隔线样式，如需自定义可修改生成的CSS代码。
如何在Word中应用？
复制生成的HTML代码，在Word中使用"插入HTML"功能或手动设置页眉页脚。
页眉设置
页脚设置
生成结果
html<style>
.document { padding: 20mm; }
.header, .footer {
width: 100%;
font-family: Arial, sans-serif;
font-size: 12pt;
color: #333;
border-bottom: 1px solid #ccc;
padding-bottom: 5mm;
}
.footer { border-top: 1px solid #ccc; border-bottom: none; padding-top: 5mm; }
.header td, .footer td { width: 33.33%; vertical-align: middle; }
.header td:first-child, .footer td:first-child { text-align: left; }
.header td:nth-child(2), .footer td:nth-child(2) { text-align: center; }
.header td:last-child, .footer td:last-child { text-align: right; }
</style>
<table class="header">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div class="document">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<table class="footer">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>