HTML如何实现屏显和打印

Wesley13
• 阅读 472

无意中翻阅CSS,发现里面有两语句:page-break-beforepage-break-after
分别对应的 参数是: auto; always; left; right;
于是尝试建立一张HTML,如下

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>分页测试</title>  
<style type="text/css">  
<!--  
.A4 {          
    page-break-before: auto;          
    page-break-after: always;  
}  
-->  
</style>  
</head>  
  
<body>  
    <div class="A4">第一页</div>  
    <div class="A4">第二页</div>  
</body>  
</html>  

于是解决了问题.....显示时是连续的,当你选择打印预览时,你会看到,已经是自动分开两页打印.

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
2年前
天哪!几行js代码就可以实现拳皇小游戏
前言今天,我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说,我们赶紧来看下如何实现吧!效果(非静止八神)分别按W、S、A、D键可实现位置移动,并且效果真实。源码html与css很简单,主要是js中有几点需要注意的。<!DOCTYPE html<html lang"en"<head <meta charset"UTF8" <title游
Stella981 Stella981
2年前
DIVcss背景图片固定居中,div阴影,背景半透明,div圆角,DIV渐变 【mark用】
<html\<head\<metahttpequiv\"ContentType"content\"text/html;charsetutf8"/<title\CSStest</title\<styletype\"text/css"\body{mar
Stella981 Stella981
2年前
JavaScript 从select表中获取数据在表格中添加行
<!DOCTYPE html<html<head lang"en"    <meta charset"UTF8"    <title</title    <link rel"stylesheet" href"css/mian.css"/    <script src
Wesley13 Wesley13
2年前
【CSS】IE8 中 height 与 min
测试demo 源代码:<!DOCTYPE html<html lang"zhCN"<head    <meta charset"UTF8"    <meta httpequiv"XUACompatible" content"IEedge,chrome1"/    <
Wesley13 Wesley13
2年前
JS获取表单元素的值
<html<head<metahttpequiv"contenttype"content"text/html;charsetutf8"<title测试</title</head<body<formid"form1"name"form1"文本框
Stella981 Stella981
2年前
Ruby on Rails 学习笔记(四)
当页面需要保持风格一致时,最简单的方法是采用模板。详见如下代码:<!doctype html<html <head  <meta charset"UTF8"  <meta name"Generator" content"EditPlus®"  <meta name"Author
Wesley13 Wesley13
2年前
HTML5
META标签可分为两大部分:HTTPEQUIV和NAME变量。HTTP实例HTML代码实例中有一项内容是<metahttpequiv"ContentType"content"text/html;charsetgb2312"其作用是指定了当前文档所使用的字符编码为gb2312,也就是中文简体字符。根据这一行代
Stella981 Stella981
2年前
HTML中meta标签的作用与使用
META标签用来描述一个HTML网页文档的属性META标签可分为两大部分:HTTPEQUIV和NAME变量。HTTP实例HTML代码实例中有一项内容是<metahttpequiv"ContentType"content"text/html;charsetgb2312"其作用是指定了当前文档所使用的字符编码为gb2
Stella981 Stella981
2年前
Js使用面向对象和面向过程的方法实现拖拽物体的效果
1.面向过程的拖拽实现代码:!(https://oscimg.oschina.net/oscnet/d680c759957babef2fec0902676eaa35ad9.gif)<!DOCTYPEhtml<html<head<titledragDiv</title
程昱 程昱
2个月前
2023最新版-Web前端架构师35周完结无密
2023最新版Web前端架构师35周完结无密download》quangneng.com/3677/Web前端工程师需要学什么Web前端工程师需要学习的技能和知识主要包括以下几个方面:HTML/CSS/JavaScript:HTML、CSS和JavaScr