css3 @page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <! 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 > |
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!