css3 @page
<!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的更多相关文章
- 专为控制打印设计的CSS样式
大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张.Web开发人员 ...
- CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- jQuery+css3侧边栏导航菜单
效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...
- WordPress酷炫CSS3读者墙代码
前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都 ...
- [原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
- （转）详解css3弹性盒模型（Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
随机推荐
- Windows Server 2012R2 DHCP服务介绍及搭建 转载
转载链接:https://blog.csdn.net/KamRoseLee/article/details/79251830 一.什么是DHCP DHCP(DynamicHost Configur ...
- vue 中使用 watch 的各种问题
报错: Method "watch" has type "object" in the component definition. Did you refere ...
- java中关键字volatile的作用(转载)
转载:http://blog.csdn.net/orzorz/article/details/4319055 用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对 ...
- Tensorflow搭建CNN实现验证码识别
完整代码:GitHub 我的简书:Awesome_Tang的简书 整个项目代码分为三部分: Generrate_Captcha: 生成验证码图片(训练集,验证集和测试集): 读取图片数据和标签(标签即 ...
- 使用curl创建简单的性能监控工具
cURL,全称Command Line URL viewer,是一种命令行工具,用来发送网络请求,然后得到和提取数据,显示在标准输出(stdout). 我们可以使用curl来获取网页的源码,显示头信息 ...
- 【解决】error pulling image configuration: Get https:// ...... x509: certificate has expired or is not yet valid
[问题]进行镜像拉取时报错 [分析] 很多人会被第一句所蒙蔽,按照网上教程进行修改etc/sysconfig/docker,之后发现还是没有用. 其实这里重点是最后一句"certificat ...
- BZOJ 3265 志愿者招募加强版(单纯形)
3265: 志愿者招募加强版 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 848 Solved: 436[Submit][Status][Disc ...
- Orleans 序列化遇到的坑
真的是巨坑 搞明白问题的我简直无法用言语来描述我的心情 先上架构图 理想中的架构 服务随便上 网关只负责分发 然后跟随官方教程写遇到了序列化问题 以前有经验,不慌,以前稀里糊涂就搞定了. 再然后遇到一 ...
- ajax来获取JWT的token
AJAX方式获取token需要用
- 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...