<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>print  Geovin Du</title>

<style type="text/css" media="screen">

/*

https://www.w3.org/TR/css-page-3/

https://developer.mozilla.org/en-US/docs/Web/CSS/:first

https://dev.opera.com/articles/

https://www.quackit.com/css/at-rules/css_page_at-rule.cfm

https://developers.google.com/web/tools/chrome-devtools/css/

涂聚文

注：Firefox,Safari,Internet Explorer,Google Chrome,Opera 是默认的页眉是网页title  页脚：是第几页/共几页. 只有Microsoft Edge没有默认的页眉，页脚	

	*/

/*应用于Microsoft edge*/

	.heade,.bottom{display:none;}

	</style>

<style type="text/css" media="print">

/*每一页 如果没有另外自定义的话 */

@page {margin-left: 50px; margin-top: 100px;}

/*第一页*/

@page :first {

  margin-left: 50%;

  margin-top: 50%;

}

/*分页标记*/

.geovindu{

  page-break-after: always;

}

.heade {margin-top: 10px;}

	</style>

</head>

<body>

<script type="text/javascript">

document.querySelector("button").onclick = function () {

  window.print();

}

	</script>

<div id="geovindu" class="geovindu">

<div class="heade">页眉：涂家村</div>

<div class="conent">

	First Page.

</div>

<div class="bottom">第一页</div>

</div>

<div id="geovindu" class="geovindu">

<div class="heade">页眉：涂家村</div>

<div class="conent">

	Second Page.

</div>

<div class="bottom">第二页</div>

</div>

<button>Print!</button>

</body>

</html>

　　

css3 @page的更多相关文章

  1. 专为控制打印设计的CSS样式

    大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...

  2. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  4. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  5. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  6. jQuery+css3侧边栏导航菜单

    效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...

  7. WordPress酷炫CSS3读者墙代码

    前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都 ...

  8. [原创]jquery+css3打造一款ajax分页插件

    最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...

  9. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

随机推荐

  1. 记一次将本地工程上传到github的过程

    记一次将本地工程上传到github的过程 1.首先,进入本地工程所在文件夹,运行git init将工程初始化为git仓库: XH@DESKTOP-82MT9LU MINGW64 ~/Desktop/t ...

  2. C语言|博客作业10

    问题 回答 C语言 博客作业10 这个作业要求在哪里 作业要求 我在这个课程的目标是 熟练循环语句的用法 这个作业在哪个具体方面帮助我实现目标 pta作业 参考文献 <C语言程序设计> 1 ...

  3. Date、Calendar和GregorianCalendar的使用

    java.util 包提供了 Date 类来封装当前的日期和时间. Date 类提供两个构造函数来实例化 Date 对象. 第一个构造函数使用当前日期和时间来初始化对象. Date public st ...

  4. 用墨卡托和GPS坐标计算距离时误差测试

    iOS墨卡托和GPS坐标计算距离时误差测试,测试结果: 墨卡托和gps坐标来回转换没有误差. 墨卡托坐标计算出的距离比gps坐标计算出的距离大,100/92*100 = 108米,每100米多算出8米 ...

  5. 转:SpringBoot系列: 使用 flyway 管理数据库版本

    Flyway 和 Liquibase 都是 Java 项目中常用的 DB migration 工具, 从使用简便性看,Flyway 比 Liquibase 更简单, 从 github 的 star 数 ...

  6. bash中$符号的一般用法

    $一般用于获取变量的内容(字符串或数字等),用以构成命令version=$(uname -r).构成字符串echo "my name is $myname".进行算术运算等tota ...

  7. 最新Navicat Premium12 破解方法，亲测可用

    1.下载Navicat Premium 官网https://www.navicat.com.cn/下载最新版本下载安装(文末,网盘地址有64位安装包和注册机下载) 2.激活Navicat Premiu ...

  8. RS485与RS232

    以下内容为结合视频,加上自述对其理解. 信息在传输线上通过电压信息进行传输,一个字节的数据有8位. 当传输一个字节的信息时,通信方式有串行通信与并行通信,在这两种通信方式之中,RS485是并行通信,R ...

  9. luogu P1582 倒水 |数学

    题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...

  10. 大数据之Linux网卡配置

    当你安装好一台Linux之后,第一步自然是配置网卡,让你的Linux上网. 配置网卡大多数有两种模式,一种是桥接,一种是NAT 首先讲一下桥接网卡的上网原理,他是等同于在你现有的网络环境上直接现加一台 ...