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(毫米)进行大小调整,因为这可以避免根据您使用的客户端出现可能出现的故障。
div 设置a4大小_如何在A4纸张尺寸页面制作HTML页面?相关推荐
- html语言让文字变大,html中div设置字体大小
html中div设置字体大小有两种方法,下面由学习啦小编为大家整理了html中的div设置字体大小的相关知识,希望对大家有帮助! html中div设置字体大小 设置对象DIV字体大小或span字体大小 ...
- div 设置a4大小_网页打印时设置A4大小
最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用 ...
- 在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 ...
- javafx label设置字体大小_如何把智能手机,设置成老年人模式?
hello大家好!我是方脸鸭! 如果你买了新的手机,那么旧的手机无非就是放闲鱼,或者拿给家里的长辈们使用.那么方脸鸭今天就跟大家分享,如何把智能手机设置得更符合家里的长辈使用. [详情请看视频讲解] ...
- Python设置画布大小_我用Python的Seaborn库绘制17个超好看图表
点击上方" Python爬虫与数据挖掘 ",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 风朝露夜阴晴里,万户千门开闭时 ...
- mysql管理应用_如何在PHP和MySQL中制作出色的库存管理应用程序
mysql管理应用 by Richard 理查德(Richard) 如何在PHP和MySQL中制作出色的库存管理应用程序 (How to Make an Awesome Inventory Manag ...
- java设置打印机默认纸张_更改打印机默认纸张尺寸 (Change printer default paper size)...
英文原文 You are in the right direction in changing the default printer settings. .NET doesn't provide d ...
- js过渡效果_干货 | Vue事件、过渡和制作index页面
" 最近在学习使用Vue作为前端的框架,本文简单介绍Vue的过渡效果,以及记录制作首页的过程. " Vue事件 1方法处理器 ● 可以用v-on指令监听DOM事件 ● 类似于内联表 ...
最新文章
- 分享一个mysql 复杂查询的例子
- databinding学习(1)
- php中函数的定义格式,在php中函数定义的格式
- QT 通过QNetworkReply *获取对应请求的URL地址
- Autowired注解
- 分析Linux 0.11中的kernel部分的makefile文件
- dsp调音一次多少钱_家庭保洁一次多少钱?
- ExecutorService的四种线程池
- 最新彩虹Ds发卡源码模板-Cool模板源码
- 大型网络中内部网关路由协议(IGP)的选择
- 多搜 - 多个网站一起搜 (舆情监控版)
- linux关闭ipv6dns,dns关闭ipv6
- python-import自己的写的文件
- 产品需求文档到底该怎么写?【转】
- 开车和做股票有什么相似之处?
- IP数据报的分片和重组
- Linux(CentOS)下安装NVIDIA GPU驱动
- 都说测试行业内卷严重,环境恶劣,那么未来测试行业会如何发展?
- 高脂肪饮食肥胖动物模型 人类肥胖症及其共病特征的动物模型
- WIN11打不开虚拟机? 一招教你解决