首页 > 其他分享 >HTML+CSS 实现简单打印页

HTML+CSS 实现简单打印页

时间:2024-03-06 23:11:46浏览次数:13  
标签:... 打印 第二页 第三页 HTML page CSS

代码:

<!DOCTYPE html>  
<html>  
<head>  
  <title>分页打印示例</title>  
  <style>  
    /* 打印样式 */  
    @media print {  
      .page {  
        page-break-after: always; /* 每个.page元素后都分页 */  
      }
    }  
  </style>  
</head>  
<body>  
  <div class="page">
    <h1>第一页</h1>  
    <p>这是第一页的内容...</p>  
  </div>  
  <div class="page">  
    <h1>第二页</h1>  
    <p>这是第二页的内容...</p>  
  </div>  
  <div class="page">  
    <h1>第三页</h1>  
    <p>这是第三页的内容...</p>  
  </div>  
  
  <button onclick="window.print()">打印</button>  
</body>  
</html>

标签:...,打印,第二页,第三页,HTML,page,CSS
From: https://www.cnblogs.com/vanjnbolg/p/18057874

相关文章

  • 卡码java基础课 | 9.打印正方形
    学习内容:通过一道题目来学习使用循环嵌套。例题:解:点击查看代码importjava.util.Scanner;publicclassMain{publicstaticvoidmain(String[]args){Scannersc=newScanner(System.in);intn=sc.nextInt();for(intro......
  • HTML开发工具和环境介绍,内附超详细的VS code安装教程!
    工欲善其事必先利其器,一款好的开发工具可以让我们事半功倍。前面我们对HTML的相关概念和基本结构已经有了基本的了解,下面我们就来安装在前端开发中的需要使用的开发工具及环境。在众多HTML编辑器中,选择一个适合自己的工具至关重要。今天我们就来认识一下前端开发工作中使用的最广......
  • 前端css阴影画图
    在线演示地址:css阴影画图一,在css中有一个box-shadow属性,可以设置元素的阴影。.item{width:50px;height:50px;background:#009688;box-shadow:50px0red,100px0px#000;}效果:二,box-shadow可以添加多个。.item{width:50px;height:......
  • makefile --- 调试打印方法
    使用info/warning/error增加调试信息$(info“hereaddthedebuginfo”) info信息不打印消息所在的行号$(warning“hereaddthedebuginfo”) 打印行号,makefile继续执行$(error“error:thiswillstopthecompile”) 打印行号,停止执行打印变量的值$......
  • Nuxt3-tailwindcss使用
    Nuxt3使用 tailwindcss文档:https://www.tailwindcss.cn/docs/installation安装文档:https://tailwindcss.nuxtjs.org/getting-started/installation1、安装 @nuxtjs/tailwindcssyarnadd-D@nuxtjs/tailwindcss2、nuxt.config.ts中配置exportdefaultdefineNuxtConfig......
  • html标签快速回顾
    html标签快速回顾html一篇搞定***补充:书写习惯,1不会写就是拼音全称,不要写拼音简写.2能展开写的代码就不要写一行,看起来麻烦<h1>标题,一个标签独占一行</h1> <p>段落,里面的文字会自适应浏览器大小换行</p> <br>强制换行 <strong>加粗</strong> <em>倾斜</em> <div>一个标签......
  • css div 三张背景图片
    cssdiv宽度1300高度46,同时给它设置三张背景图片堆叠同时显示,其一图片宽度1300高度46,铺满整个div且距离最左侧偏移22px,其二图片宽度44,高度43,在div的最左端,其三图片宽度83,高度43,在div的最右端,他们同时垂直居中在div中  .container{width:1300px;height:4......
  • 前端基础学习1 | Web、Html、CSS
    前端基础学习1|Web、Html、CSS1、Web基础知识Web(wwwWorldWideWeb),全球广域网,也称万维网,能够通过浏览器访问的网站Web网站的工作流程Web标准,也称为网页标准,由一些列的标准组成,大部分由W3C(WorldWideWebConsortium,万维网联盟)负责制定。Web标准由三个部分组成:HTML:......
  • tomcat8.5+ windows中html页面及控制台中文乱码问题解决办法
    tomcat8.5+windows中html页面及控制台中文乱码问题解决办法————————————————版权声明:本文为博主原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接和本声明。原文链接:https://blog.csdn.net/onemy/article/details/106215384 https://blog.csdn.......
  • 在vue项目中使用scss预处理器
    从Node.js12版本开始,`node-sass`被标记为不再维护,并且从npm上已经被移除。现在,推荐使用`sass`包替代`node-sass`。`sass`包是Sass的JavaScript实现,它比`node-sass`更快速、更现代化,并且与最新版本的DartSass兼容。在Vue项目中使用Sass,你应该安装sass包......