Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;。

<p>第 1 页</p>
<div style="page-break-after:always;"></div>
<p>第 2 页</p>
<div style="page-break-after:always;"></div>
<p>第 3 页</p>

任何浏览器都支持 page-break-after:always;,但 page-break-after 的其他属性值 left、right、inherit、avoid 则总有一些浏览器不支持。page-break-after 应用于 position 值为 relative 或 static 的非浮动块级元素。元素或父元素的 display 为 none 时,page-break-after 不起作用。

上面把 page-break-after 应用在一个空白的 div,使看起来更像一个分页符,其实 page-break-after 应用在当前页的最后一个标签,比如下面的代码:

<p>第 1 页</p>
<p style="page-break-after:always;">第 1 页</p>
<p>第 2 页</p>
<p style="page-break-after:always;">第 2 页</p>
<p>第 3 页</p>
<p>第 3 页</p>

page-break-after 的元素在打印时,必须是可显示的,否则不起作用。

网页中如何用 CSS 设置打印分页符的更多相关文章

  1. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  2. 如何用css写打印样式

    打印样式 打印样式就是针对网页被打印时设置给文档的样式,由于打印时是显示在纸上,跟屏幕还是有区别的,对于有打印需求的网页往往需要设置专门的打印样式来适配页面. @media print 声明自己是打印 ...

  3. 网页中三角型的CSS实现

    我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角.很多网上用到三角形,如图所示,这个三角形是如何实现的呢? 1.使用CSS可以实现,先来复习一CSS盒子模型相关知识.给出如下 ...

  4. 一、HTML和CSS基础--网页布局--如何用css进行网页布局

    什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...

  5. 如何用css设置鼠标属性的小手

    在元素中添加onmouseover="this.style.cursor='hand'"或者 cursor:pointer;

  6. C# 网络编程之webBrowser获取网页url和下载网页中图片

    该文章主要是通过C#网络编程的webBrowser获取网页中的url并简单的尝试瞎子啊网页中的图片,主要是为以后网络开发的基础学习.其中主要的通过应用程序结合网页知识.正则表达式实现浏览.获取url. ...

  7. LODOP设置打印份数及是否逐份输出

    LODOP中通过SET_PRINT_COPIES可以设置打印份数,例如:LODOP.SET_PRINT_COPIES(2);//指定份数为2份 如果一个任务里有多页,打印份数的时候,有两种输出方式,一 ...

  8. word 的使用 —— 分页符与分节符

    节的概念:节定义了一些格式, 如页边距.页面的方向.页眉和页脚,以及页码的顺序. 分节符是指为表示节的结尾插入的标记. 分节符的作用: 分节符起着分隔其前后文本格式的作用,如果删除了某个分节符,它前面 ...

  9. php部分:网页中报表的打印,并用CSS样式控制打印的部分;

    网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...

随机推荐

  1. 在线协作沟通工具DesignBoard帮助设计团队更有效地进行沟通与版本管理

    设计稿呈现缺乏整体性.远程沟通效率低.多版本管理混乱,这可能是很多创业团队都面临的问题,并且这些问题都将直接影响到产品开发进度.国内创业团队彩程设计也曾面临同样的问题,后来他们在做某个新项目时尝试把设 ...

  2. hdu_5769_Substring(后缀数组)

    题目链接:hdu_5769_Substring 题意: 给你一个字符a和一个串b,问你有多少个包括a的字串 题解: #include<bits/stdc++.h> #define F(i, ...

  3. LeetCode OJ 99. Recover Binary Search Tree

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  4. JS原型和原型链

        1 var decimalDigits = 2, 2 tax = 5; 3 4 function add(x, y) { 5 return x + y; 6 } 7 8 function su ...

  5. Android Studio一直build、一直refreshing、一直buiding gradle project into的终极解决办法

    打开我的电脑,打开C:\Users\用户名, 把红圈的文件夹都删了 如果AndroidStudioProjects文件夹里那些project都不重要,也可以跟红圈文件夹删了, 然后再打开android ...

  6. Linux网卡配置与绑定

    一定要在服务管理中关闭NetworkManager服务并禁用自动启动. 第一步:先查看下本机网卡,使用命令到network-scripts 下 [root@root~]# cd /etc/syscon ...

  7. 四维dp 或者 剪枝 + dfs Codeforces Beta Round #6 (Div. 2 Only) D

    http://codeforces.com/contest/6/problem/D 题目大意:有一队人,排成一列,每个人都有生命值,你每次可以攻击2~n位置的一个的人,假设每次攻击的位置为pos,那么 ...

  8. 状态转移的最短路 隐式图搜索 UVA 658

    紫书365 题目大意:给你n个全都是bug的东西,然后每次可以修复,给你修复前后的状态,问最后如果能把bug全都修复,最少需要多少时间. 思路:从最初状态开始,然后枚举bug即可. 表示priorit ...

  9. and的用法(&)

    经常看到jq的源码中各种&连接在一起赋值一个变量, 例一: var b = a&&a.getName 例二: var b = a&&a.getName||d 例 ...

  10. iOS9以后 GDataXMLNode修改方式

    iOS9以后GDataXMLNode修改方式