当前位置: 首页 > 面试题库 >

如何在A4纸张尺寸页面中制作HTML页面?

惠文彬
2023-03-14
问题内容

是否可以使HTML页面的行为类似于MS Word中的A4大小的页面?

本质上,我希望能够在浏览器中显示HTML页面,并在A4尺寸页面的尺寸中概述内容。

为了简单起见,我假设HTML页面仅包含文本(没有图像等),并且没有<br>标签。

同样,当打印HTML页面时,它将以A4尺寸的纸页形式出现。


问题答案:

早在2005年11月,AlistApart.com就发表了一篇文章,介绍了他们如何只使用HTML和CSS来出版一本书。

这是该文章的摘录:

CSS2具有分页媒体(想像纸)的概念,而不是连续媒体(想像滚动条)的概念。样式表可以设置页面的大小及其页边距。可以为页面模板指定名称,元素可以声明要在其上打印的命名页面。同样,源文档中的元素可能会强制分页符。这是我们使用的样式表的摘录:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

拥有一家美国发行商,我们得到的页面大小以英寸为单位。作为欧洲人,我们继续进行公制测量。CSS都接受。

设置页面大小和边距后,我们需要确保在正确的位置存在分页符。以下摘录显示了如何在各章和附录之后生成分页符:

div.chapter, div.appendix {
    page-break-after: always;
}

另外,我们使用CSS2来声明命名页面:

div.titlepage {
  page: blank;
}

即,标题页将被打印在名称为“空白”的页面上。CSS2描述了命名页面的概念,但是仅当页眉和页脚可用时,它们的价值才变得显而易见。

无论如何…

由于要打印A4,因此当然需要不同的尺寸:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

本文深入探讨了设置分页符等内容,因此您可能需要完整阅读。

就您而言,诀窍是首先创建打印CSS。大多数现代浏览器(> 2005)都支持缩放,并且已经能够基于打印CSS显示网站

现在,您将要使Web外观看起来有些不同,并使整个设计也适应大多数浏览器(包括2005年之前的旧浏览器)。为此,您必须创建一个Web
CSS文件或覆盖打印CSS的某些部分。在创建用于网络显示的CSS时,请记住浏览器可以具有任意大小(例如:“移动”到“大屏幕电视”)。含义:对于Web
CSS,最好使用可变宽度(%)来设置页面宽度和图像宽度,以支持尽可能多的显示设备和Web浏览客户端。

编辑(30-10-2018)

它引起了我的注意,因为size它不是有效的CSS3,这确实是正确的-
我只重复了文章中引用的代码(如前所述),它是旧的CSS2(当您查看本文的年份和此答案首次发布)。无论如何,以下是有效的CSS3代码,以方便您进行复制和粘贴:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

如果您认为确实需要像素( 实际上应该避免使用pixel ),则必须选择正确的DPI进行打印:

  • 72 dpi(网络)= 595 X 842像素
  • 300 dpi(打印)= 2480 X 3508像素
  • 600 dpi(高质量打印)= 4960 X 7016像素

Yet, I would avoid the hassle and simply use cm (centimeters) or mm
(millimeters) for sizing as that avoids rendering glitches that can arise
depending on which client you use.



 类似资料:
  • 我成功地使用Apache Batik将SVG文件转换为PDF。 以下代码用于生成 PDF: 现在我想影响生成的PDF的页面大小,所以我得到了A4的页面大小。我怎么能这么做呢? 我已经尝试了一些关键提示,但没有效果。

  • 我正在用Confluence为我的代码库编写文档,我想添加动态生成的gitgraphs(https://gitgraphjs.com/)。

  • 问题内容: 如何使用PDFBox查找(以毫米为单位)pdf页面的宽度和高度?目前,我正在使用此: 但结果是(不是毫米): 问题答案: PDF内的度量单位是磅,这是传统的图形行业度量单位。Adobe使用以下定义: 并且由于将一英寸定义为正好是25.4毫米(真的!),因此您可以使用以下公式将点数转换为毫米 顺便说一下,您的值将(宽松地)转换为A4纸张尺寸210 x 297毫米。(“松散”的原因有两个:

  • 问题内容: 我需要在网络中模拟A4纸,并允许打印此页,因为它在浏览器(特别是Chrome)上显示。我将元素大小设置为21cm x 29.7cm,但是当我发送打印(或打印预览)时,它会裁剪页面。 我想我忘记了什么。但是会是什么呢? Chrome :剪贴页,双页( 这正是我需要的工作 ) Firefox :完美运行。 IE10 :信不信由你,这很完美! Opera :打印预览时非常容易出错 问题答案:

  • 问题内容: 如何使用HTML5和CSS3画圆? 也可以在其中放入文字吗? 问题答案: 本身不能画一个圆。但是您可以制作与圆相同的东西。 您必须创建一个带有圆角(通过border-radius)的矩形,该圆角是要制作的圆的宽度/高度的一半。

  • 注意: Adobe Muse 不再添加新增功能,并将于 2020 年 3 月 26 日停止支持。有关详细信息和帮助,请参阅 Adobe Muse 服务结束页面。 使用参考线设置页眉、页脚和内容区域 主页包含五根可移动的水平参考线。顶部和底部的参考线确定整体页面大小。中间的两根参考线定义页面内容的主要部分:页眉下边缘与页脚区域上边缘之间的区域。在“设计”视图中将鼠标悬停在每根参考线上方以查看说明性工