样式:

<style   media="print">   
  .Noprint   {   DISPLAY:   none;}   
  .PageNext   {   PAGE-BREAK-AFTER:   always   }   
</style>

注:

①、不需要打印的对象要用上“Noprint”样式。

②、需要换页处理的对象要用上“PageNext”样式。

③、因为最后一页不用加入换页符,所以要控制最后一页不要使用该样式。个人感觉用PAGE-BREAK-BEFORE属性控制第一页要方便一些。

=====================================================================================

page-break-before和page-break-after(来自网络)

page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值:auto、always、left和right。

Auto:是默认值,只有在有需要时,才需设定分页符号 (Page breaks)。

page-break-before若设定成always:则是在遇到特定的组件时,打印机会重新开始一个新的打印页。

page-break-before若设定成left:则会插入分页符号,直到指定的组件出现在一个左边的空白页上。

page-break-before若设定成right:则会插入分页符号,直到指定的组件出现在一个右边的空白页上。

page-break-after属性会将分页符号加在指定组件后,而非之前。

设置为left或right 与 设置为alvays究竟有什么区别,上面红色字体的说明看不明白,希望看到贴字的明白人指点一二。

不过用“always”值再加以控制一般的问题都能解决,以下为例子:

<html>
<head>
<title>Listing 14-4</title>
</head>
<body>
<div>
This is the first DIV.</div>
<div style="page-break-before: always">
This is the second DIV.</div>
<div style="page-break-before: always">
This is the third DIV.</div>
<div style="page-break-before: always">
This is the fourth DIV.</div>
</body>
</html>

  

<html>
<head>
<title>Listing 14-4</title>
</head>
<body>
<div style="page-break-after: always">
This is the first DIV.</div>
<div style="page-break-after: always">
This is the second DIV.</div>
<div style="page-break-after: always">
This is the third DIV.</div>
<div>
This is the fourth DIV.</div>
</body>
</html>

  程序员的基础教程:菜鸟程序员

css控制页面打印(分页、屏蔽不需要打印的对象)的更多相关文章

  1. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  2. 【学习DIV+CSS】2. 学习CSS(一)--CSS控制页面样式

    1. CSS如何控制页面 使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...

  3. 《Two Days DIV + CSS》读书笔记——CSS控制页面方式

    1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...

  4. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  5. css控制页面文字不能被选中user-select:none;

    现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 原因:鼠标点快了文字会被选中. 解决方案:不同的浏览 ...

  6. 译-使用Scroll Snapping实现CSS控制页面滚动

    特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...

  7. Web--CSS控制页面(link与import方式区别)

    先了解: [1]         “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构 W3C,是World Wide ...

  8. Web--CSS控制页面(link与import方式差别)

        先了解: [1]         "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是 ...

  9. 应用CSS的page-break-after属性 实现WEB页面强制分页打印

    虽然dedecms.com向大家介绍了很多CSS属性的相关知识,但有些非常冷门的属性还是有所欠缺.在B/S程序中,对打印页面的控制,CSS相对比较弱,例如: 自动分页, 就基本没啥实际用途.我们通常需 ...

随机推荐

  1. ASP.NET Web API 学习【转】

    转自:http://www.cnblogs.com/babycool/p/3922738.html 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用J ...

  2. 入口点函数的19种消息,AcRxArxApp只处理16种。

    AcRx::AppMsgCode一共有19种消息. 但由IMPLEMENT_ARX_ENTRYPOINT宏实现的App类,只处理了16种消息. 缺: kSuspendMsg = 16,    kIni ...

  3. IIS:日志代码分析

    如何看IIS日志代码,打开IIS日志后,你会看见里面有很多访问记录.baiduspider,Googlebot等就是蜘蛛了.蜘蛛爬过后都会留下记录的,状态代码列在下面: 100 - 表示已收到请求的一 ...

  4. flash 自定义右键功能

    使用过程可能遇到的问题: MouseEvent.RIGHT_CLICK TypeError: Error #2007: 参数 type 不能为空. 首先在项目中设置编译参数. 如果是as项目,则在项目 ...

  5. Hadoop on Yarn 各组件详细原理

    运行在独立的节点上的ResourceManager和NodeManager一起组成了yarn的核心,构建了整个平台.ApplicationMaster和相应的container一起组成了一个Yarn的 ...

  6. java io流 对文件操作

    检查文件是否存在 获取文件路径 获取文件大小 ...... 更多参考手册 //对文件的操作 //检查文件是否存在 //获取文件路径 //获取文件大小 //文件是否可读 //文件是否可写 //.... ...

  7. Windows下PHP版本选取

    1. 下载地址 http://windows.php.net/download/ 2. PHP大版本 PHP4:由于太古老.对OO支持不力已基本被淘汰. PHP5:分为三个分支——PHP5.2之前的版 ...

  8. EF 示例

    EF有三种数据库访问方式,这里只介绍Code First. 1.DB First,类似Linq to sql中拖拽一个DB到方案中 2.Model First,没试过,不能自动生成数据库只能生成表 3 ...

  9. 17. Word Break && Word Break II

    Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...

  10. cocos2dx3.0 removeFromParent和removeAllChildren含义

    顾名思义,removeFromParent就是把自己从父亲那里移除,removeAllChildren就是移除自己所有的孩子,这些方法的具体实现都在基类Node里面,通过查看代码也很容易看到怎么实现的 ...