先上官方repo: https://github.com/cognitom/paper-css

paper.min.css

@page{margin:0}body{margin:0}.sheet{margin:0;overflow:hidden;position:relative;box-sizing:border-box;page-break-after:always}body.A3 .sheet{width:297mm;height:419mm}body.A3.landscape .sheet{width:420mm;height:296mm}body.A4 .sheet{width:210mm;height:296mm}body.A4.landscape .sheet{width:297mm;height:209mm}body.A5 .sheet{width:148mm;height:209mm}body.A5.landscape .sheet{width:210mm;height:147mm}body.letter .sheet{width:216mm;height:279mm}body.letter.landscape .sheet{width:280mm;height:215mm}body.legal .sheet{width:216mm;height:356mm}body.legal.landscape .sheet{width:357mm;height:215mm}.sheet.padding-10mm{padding:10mm}.sheet.padding-15mm{padding:15mm}.sheet.padding-20mm{padding:20mm}.sheet.padding-25mm{padding:25mm}@media screen{body{background:#e0e0e0}.sheet{background:#fff;box-shadow:0 .5mm 2mm rgba(0,0,0,.3);margin:5mm auto}}@media print{body.A3.landscape{width:420mm}body.A3,body.A4.landscape{width:297mm}body.A4,body.A5.landscape{width:210mm}body.A5{width:148mm}body.legal,body.letter{width:216mm}body.letter.landscape{width:280mm}body.legal.landscape{width:357mm}}

基本使用

<!-- Load paper.css for happy printing -->
<link rel="stylesheet" href="dist/paper.css"><!-- Set page size here: A5, A4 or A3 -->
<!-- Set also "landscape" if you need -->
<style>@page { size: A4 }</style><!-- Set "A5", "A4" or "A3" for class name -->
<!-- Set also "landscape" if you need -->
<body class="A5"><!-- Each sheet element should have the class "sheet" --><!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 --><section class="sheet padding-10mm"><!-- Write HTML just like a web page --><article>This is an A5 document.</article></section></body>

All available page sizes is listed below:

A5, A5 landscape
A4, A4 landscape
A3, A3 landscape
letter, letter landscape
legal, legal landscape

WEB前端设置A4页面布局的轮子: paper-css相关推荐

css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
前端大屏页面布局经验
前端大屏页面布局经验额··· 其实谈不上经验,只能说是开发过程中值得记录一下的东西,不一定是对的. 分辨率首先一点,大屏对分辨率和显示器是有要求的,因为他不像一般的页面,出个纵向的滚动条啥的无所谓 ...
web前端的登陆页面制作
web前端的登陆页面制作登陆页面中有要登陆系统(网站)的名称,输入账号密码的输入框,以及登陆按钮这几个重要部分,其余的可以随便添加,但是页面布局要合理标陆页面题在页面输入框之前的图像是特殊的字体 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端开发常用的10个高端CSS UI开源框架
随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源资源,更快更好地实现一些现代化的界面,是必备技能之一.下 ...
电影主题HTM5网页设计作业成品——爱影评在线电影(10页面)使用dreamweaver制作采web前端设计与开发期末作品用DIV CSS进行布局
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行 ...
web前端学习之——页面美妆师css3基础篇
页面美妆师css3基础结构(html)与样式(css)相分离 1.css基本语法规范 1.1 行内式(内联样式) 是通过标签的style属性来设置元素的样式 <标签名 style=" ...

WEB前端设置A4页面布局的轮子: paper-css

基本使用

WEB前端设置A4页面布局的轮子: paper-css相关推荐

最新文章

热门文章