div 设置a4大小_如何在A4纸张尺寸页面中制作HTML页面?
小编典典
早在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.
2020-05-10
div 设置a4大小_如何在A4纸张尺寸页面中制作HTML页面?相关推荐
- div 设置a4大小_如何在A4纸张尺寸页面制作HTML页面?
在2005年11月,AlistApart.com发表了一篇关于他们如何使用HTML和CSS发表一本书的文章.请参阅:http://alistapart.com/article/boom 这是该文章的摘 ...
- python获取图片大小_如何在pygame(python)中获取图片大小
If I'm using an image and I want to know the image's size in the file. There is a function to get th ...
- html语言让文字变大,html中div设置字体大小
html中div设置字体大小有两种方法,下面由学习啦小编为大家整理了html中的div设置字体大小的相关知识,希望对大家有帮助! html中div设置字体大小 设置对象DIV字体大小或span字体大小 ...
- div 设置a4大小_网页打印时设置A4大小
最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用 ...
- div 设置a4大小_设计适用于打印的CSS样式
大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...
- 阅读界面怎么用html做,如何在A4纸页面中制作HTML页面?
早在2005年11月,AlistApart.com就发表了一篇关于如何使用HTML和CSS来发表一本书的文章. 请参阅: http : //alistapart.com/article/boom 这篇 ...
- 在excel日期比对大小_如何在Excel中防止分组日期
在excel日期比对大小 As a teenager, group dates can be fun. If you have strict parents, that might be the on ...
- socketmq 设置队列大小_[译] TCP的SYN队列和Accept队列
关于两个队列 首先我们必须明白,处于"LISTENING"状态的TCP socket,有两个独立的队列: SYN队列(SYN Queue) Accept队列(Accept Queu ...
- go语言 echo框架_如何在Go Echo Web框架中设置嵌套HTML模板
go语言 echo框架 by Ying Kit Yuen 英杰苑 如何在Go Echo Web框架中设置嵌套HTML模板 (How to setup a nested HTML template in ...
- html中如何设置几张图片在一个div里来回切换_从 B 站的秋季主题中学习 “图层组合动画”...
众所周知,B 站 是个适合学习的好网站,我们团队的小伙伴也是经常上 B站 学习. 某一天在 B站 学习的时候,发现 B站 已经开启了秋季主题,并且在头图的这个交互上还内有乾坤.随着我们的鼠标变换位置, ...
最新文章
- 《深入浅出Ext JS》(第2版)即将上市
- 解剖SQLSERVER 第十一篇 对SQLSERVER的多个版本进行自动化测试(译)
- GitNote 基于 Git 的跨平台笔记软件正式发布
- 下列不属于计算机完成科学技术特点的是,青岛科技大学计算机组成原理计算机组成原理试卷1(计算机)2011A...
- C++ 复制构造函数
- List-存储原理(quicklist)
- [HNOI2015] 落忆枫音
- oracle之 Oracle归档日志管理
- Win7系统账户被禁用的解决方法
- 【软件质量】代码评审“亮红灯”的情况
- 移动开发—详解flex布局之携程网首页案例制作
- 小程序 Serverless: 解放生产力,驱动研发效能提升
- C#不登录电脑启动程序
- java8 jstack_java自带命令行工具(jcmd,jstack)
- 基于python+django框架+Mysql数据库的旅游景区景点售票系统设计与实现
- ckeditor5-vue自定义图片上传函数
- unity shader 热扭曲 (屏幕后处理)
- Spark DAG与RDD
- dockerfile 构建 redis 镜像
- 从0到1搭建一个简易的在线客服问答系统(附源码)
热门文章
- Hyperledge Fabric-身份与角色认证
- react-native之react-native-vector-icons
- 华为荣耀鸿蒙3.0安装谷歌Play商店,安装谷歌服务三件套GMS,Google
- 韩昊 20190919-4 单元测试,结对
- win 10计算机服务,win10 怎么打开服务_win10打开系统服务的3种方法
- Git 删除提交\commit的log记录、修改历史提交消息、删除历史提交、修改所有提交的邮箱地址、从所有提交中删除一个文件
- 在Markdown中插入图片及图注的方法
- python 广告联盟_利用京东联盟API获取自定义推广链接
- 结构化、半结构化、非结构化的理解
- AngularJS页面【uib-dropdown】控件在模态窗口(弹出窗)中无法使用问题