div 设置a4大小_如何在A4纸张尺寸页面制作HTML页面?

在2005年11月,AlistApart.com发表了一篇关于他们如何使用HTML和CSS发表一本书的文章。请参阅:http://alistapart.com/article/boom

这是该文章的摘录: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的某些部分。在为Web显示创建CSS时,请记住浏览器可以具有任何大小(想想:“移动”到“大屏幕电视”)。含义:对于Web CSS,您的页面宽度和图像宽度最好使用可变宽度(%)设置,以支持尽可能多的显示设备和Web浏览客户端。

编辑(26-02-2015)

今天,我偶然发现了SmashingMagazine上的另一篇近期文章,该文章也潜入了使用HTML和CSS进行打印设计......以防万一你可以使用另一个教程。

编辑(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. */

} }

如果您认为您确实需要像素(实际上应该避免使用像素),则必须注意选择正确的DPI进行打印:72 dpi(网页)= 595 X 842像素

300 dpi(打印)= 2480 X 3508像素

600 dpi(高质量打印)= 4960 X 7016像素

然而,我会避免麻烦,只需使用cm(厘米)或mm(毫米)进行大小调整,因为这可以避免根据您使用的客户端出现可能出现的故障。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/520760.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jmeter5 语言中文

文章目录1. 临时调整2. 永久中文1. 临时调整 2. 永久中文 默认启动中文 进入安装目录:apache-jmeter-5.1.1\bin\ 找到 jmeter.properties,打开 搜索“ languageen ”,前面带有“#”号 去除“#”号,并修改为:language…

13岁小孩都跟我抢Python了,完了!

以下来自一位程序员母亲和工作人员的对话。程序员妈妈:您好,可以帮我推荐一本适合我家小孩看的编程书籍吗?兔子:可以的呀,《Scratch从入门到精通》,这本书适合小孩学习,您可以先看一下哦~程序员…

Nacos服务发现控制台预览

Nacos是阿里巴巴中间件部门最近开源的一款用于服务发现和配置管理的产品。在既0.1版本发布基本功能和0.2版本发布与Spring生态结合的功能后,0.3版本将释放全新的控制台界面。配置管理功能相关的控制台,将会由阿里云商业产品ACM控制台改造而来&#xff0c…

阿里巴巴高级技术专家至简:聊工程师思维

为什么想到写这篇文章?作者是想通过对工程师思维的分析和解读,让工程师能正确对待那些在现实工作中看上去与本职岗位无关,却对团队效能影响极大的一些点和一些事。 至简:阿里巴巴高级技术专家,是集团Service Mesh方向的…

linux 升级 git版本,CentOS使用Yum升级Git到2.1x新版本

使用yum最多只能安装到1.8,版本太旧了,下载源码手动编译安装?先不说国内下载官网包2kB/s的速度,就是下载下来了编译也麻烦啊,包管理是吃干饭的嘛?其实只要换个源,重新下载就好了先卸载旧版yum r…

SoapUI 5.4.0 中文乱码

测试案例&#xff1a; <soapenv:Envelope xmlns:soapenv"http://schemas.xmlsoap.org/soap/envelope/" xmlns:cus"CustomNamespaces"><soapenv:Header/><soapenv:Body><cus:getUser><cus:in0><![CDATA[测试中文乱222码]…

cuda加速的头文件_如何从C ++头文件调用CUDA文件?

I know the method of calling the .cu files from .c files. But now I want to call the .cu files from a C header file. Is it possible to do it ? If so how should I make the settings of my project ? please help.....解决方案Heres a worked example:file1.h:int…

阿里中间件开源组件:Sentinel 0.2.0正式发布

Sentinel 是阿里中间件团队开源的&#xff0c;面向分布式服务架构的轻量级流量控制组件&#xff0c;主要以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度来帮助用户保护服务的稳定性。 关联阅读&#xff1a;阿里巴巴宣布 Sentinel 开源&#xff0c;进…

IDEA的基本使用:让你的IDEA有飞一般的感觉 | CSDN 博文精选

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 琦彦责编 | 阿秃转自 &#xff5c; CSDN 博客1.设置maven在File->settings->搜索maven Mavan home directory--设置maven安装包的bin文件夹所在的位置 User settings file--设置setting文件所在的位置 Local repo…

c语言库函数手册pdf百度云,C语言库函数手册.pdf

C语言库函数手册C 语言库函数手册目录A. 分类函数 [函数库为 ctype.h] 1B. 数学函数 [函数库为 math.h、stdlib.h、string.h、float.h] 2C. 目录函数 [函数库为 dir.h、dos.h] 3D. 迕程函数 [函数库为 stdlib.h、process.h] 4E. 转换子程序 [函数库为 math.h、stdlib.h、ctype.…

Apache JMeter 测试webservice接口

文章目录Apache JMeter 测试webservice接口流程一、设置基础组件1. 添加一个线程组2. HTTP信息头管理器3. HTTP请求4. 添加一个察看结果树5. 添加一个聚合报告二、配置基础组件2.1. 找到SoapUI 请求头信息2.2. 设置http头管理器2.3. 接口信息同步三、发送测试3.1. 发送请求3.2.…

函数计算搭建 Serverless Web 应用(三)- 三分钟搭建 Web 应用

简介 阿里云 函数计算(Function Compute) 是事件驱动的全托管计算服务&#xff0c;是阿里云的 Serverless 计算平台。基于函数计算构建应用&#xff0c;您无需管理服务器等基础设施&#xff0c;而是专注于应用逻辑的开发&#xff0c;大幅提高开发效率。 函数计算搭建 Serverl…

什么叫做罗列式_极简罗列法怎么写作文

极简罗列法怎么写作文以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;1. 作文罗列式怎么开头列举式案例一&#xff1a;“争渡&#xff0c;争渡&#xff0c;惊起一滩鸥鹭。”李清照争的是一种…

备战双 11!蚂蚁金服万级规模 K8s 集群管理系统如何设计?

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 沧漠责编 | 阿秃导读&#xff1a;Kubernetes 的出现使得广大开发同学也能运维复杂的分布式系统&#xff0c;它大幅降低了容器化应用部署的门槛&#xff0c;但运维和管理一个生产级的高可用 Kubernetes 集群仍十分困难。本文…

移动互联网+智能运营体系搭建=你家有金矿啊!

每个企业都有许多的数据&#xff0c;但能否将数据转化成商业价值&#xff0c;是企业非常关心的问题。阿里巴巴曾自嘲是一家坐在数据的金矿上啃着馒头的企业&#xff0c;前几年集团积累了很多的数据&#xff0c;但这些数据并没有真正应用起来&#xff0c;受限于几个原因&#xf…

厦门理工C语言实验报告8,厦门理工c语言数据结构实验

《厦门理工c语言数据结构实验》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《厦门理工c语言数据结构实验(15页珍藏版)》请在人人文库网上搜索。1、数据结构实验报告 实验序号&#xff1a;6 实验项目名称&#xff1a;树和二叉树的操作 学 号 姓 名专业、班实验地点指…

Apache JMeter 测试webservice接口 中文乱码

文章目录1. http请求编码设置utf-82. jmeter.properties修改默认编码1. http请求编码设置utf-8 2. jmeter.properties修改默认编码 找到apache-jmeter-5.2.1\bin\jmeter.properties文件 在jmeter.properties文件中找到 #sampleresult.default.encodingISO-8859-1 替换为 samp…

elementui 按钮 表单_element UI实现表格中添加开关控制按钮

我使用的是element ui V1.4.3如下图是我要实现的效果&#xff1a;点击显示 Dialog:data"gridData"borderheight"300">on-text "是"off-text "否"on-color"#5B7BFA"off-color"#dadde5"v-model"scope.row.…

【实操手册】如何把一场直播录制下来?

许多用户使用直播服务时&#xff0c;需要把正在直播的视频录制下来进行存储或方便后续的回看。为了满足用户需求&#xff0c;阿里云视频直播服务提供了直播录制功能&#xff0c;本文将对这两种形式的录制方法进行简单介绍。 一、按场景录制 针对不同的场景进行录制配置 • 按…

搞不清边缘计算几款产品差异?动动小手点这里!

最近阿里云新上了一款产品&#xff0c;边缘节点服务&#xff08;简称ENS&#xff09;&#xff0c;随着产品运营推广不断深入&#xff0c;偶尔会遇到用户关于ENS产品与其他几款产品的疑惑&#xff0c;典型问题比如&#xff1a; ENS是部署在CDN位置&#xff0c;用户是不是可以直…