css set a4 paper size

2023-10-27

HTML

<div class="book">
    <div class="page">
        <div class="subpage">Page 1/2</div>    
    </div>
    <div class="page">
        <div class="subpage">Page 2/2</div>    
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px red solid;
    height: 256mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css set a4 paper size 的相关文章

  • python中print的用法_菜鸟学Python之一:使用print输出信息

    菜鸟学Python之一 xff1a 使用print输出信息 大家好 xff0c 我是 64 爱玩电脑 xff0c 从今天起 xff0c 跟大家一起零基础入门学习Python基础知识 xff0c 纯粹零基础入门 xff0c 高手绕行 我用Py
  • python的print输出txt

    方法一 xff1a import sys newfile 61 39 C VisualSTUDIO climbdouban soup txt 39 data 61 open newfile 39 w 39 encoding 61 34 ut
  • python中输出函数print()的一些必要知识

    一 print基本格式 1 仅用于输出字符串 格式 xff1a print 要输入的字符串 例子 xff1a print 34 希望世界和平 34 2 仅用于输出变量 格式 xff1a print 变量1 xff0c 变量2 xff0c 例
  • python2中的print语句可以不用小括号。_Python 中那些令人防不胜防的坑I

    在学习 Python 的过程中 xff0c 我为它的简洁优雅而痴迷 xff0c 但它又是如此的调皮 xff0c 在提供了很多舒服的功能特性之外 xff0c 又悄悄挖了很多带有迷惑性的坑 xff0c 令人防不胜防 人不能两次踏入同一条河流 x
  • print(1,2,3,sep=':')的输出结果是?

    print 1 2 3 sep 61 39 39 1 2 3 第一个参数 要打印的值 第二个参数sep表示要打印多个值时 各值的分割方式 默认空格 第三个参数end表示结尾的方式 默认 n 转载于 https www cnblogs com
  • 正六边形旋转实现

    1 行内样式 div style background none div
  • CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距

    场景 Flex是Flexible Box的缩写 意为 弹性布局 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列 实现如下类似布局 最外层是是一个div div里面是上面一个照片 下面一个表单 这两个元素居中排列 注 博客 霸道流氓
  • 纯HTML加CSS实现3D立体动态相册

    听说是大佬写给女朋友的 效果 卧槽 我又没女盆友我激动个啥 具体代码如下
  • css补充2:flex布局,居中方案等

    一 flex 布局 1 1 flex布局原理 flex是flexible Box的缩写 意为 弹性布局 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为flex布局 当我们为父盒子设为flex布局以后 子元素的float clear
  • 五种方案实现CSS三栏布局

    方案一 浮动布局float
  • CSS设置字间距、行间距、首行缩进

    CSS设置字间距 行间距 首行缩进 ps 本人亲测 阿里云2核4G5M的服务器性价比很高 新用户一块多一天 老用户三块多一天 最高可以买三年 感兴趣的可以戳一下 阿里云折扣服务器 字间距 1 text indent设置抬头距离css缩进 即
  • 清除浮动之after伪元素

  • PHP登录注册页面

    注册 html 注册1 php
  • 定位、浮动

    Position 定位 一 position 1 属性描述 设置或获取元素的定位方式 2 版本变更 有 3 语法模板 position static relative absolute fixed 4 默认值 static 尽量避开影响其他
  • HTML5 WebSocket的入门使用

    HTML5 WebSocket 长连接 客户端与服务端可以保持长时间的通信 一 具体步骤 1 创建一个websocket实例 连接远程服务器并且需要一个连接服务器的url let baseUrl ws echo websocket org
  • 在styled-components的样式声明中做px到rem的自动转换

    原文地址 最近在尝试使用styled components来做React下的样式开发 这样可以利用js语言的灵活来增强css的能力 在用styled components处理px到rem的转换时 有点问题了 styled component
  • W3C?什么是W3C相关标准?

    什么是W3C标准 什是W3C标准 不是一个标准 而是万维网联盟制定的一系列标准 网页主要由三部分组成 结构 Structure 表现 Presentation 和行为 Behavior 对应的标准也分三方面 结构化标准语言主要包括XHTML
  • line-height 百分比和数值设置行高

    一 line height的值为百分比 子集元素继承父级元素的距离 1 例如
  • 【解决】CSS下拉菜单不会显示的问题

    导航栏的下拉菜单不会显示 但按 F5 刷新的一瞬间又能看见下拉菜单的内容 但就是不会显示出来 一开始以为是 js 代码写错或者 css 动画函数的影响 后面找到一篇博客 说这是老生常谈的问题 对于小白确实很难找到问题关键 折腾一晚上终于发现
  • css实现响应式布局

    一 什么是响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 传统的开发方式是PC端开发一套 手机端再开发一套 而使用响应式布局只要开发一套就够了 响应式设计与自适应设计的区别 响应式开发一套界面 通过检测视口分辨率 针对不同

随机推荐

  • 手机Vbus上防护用OVP简介

    手机Vbus上防护用OVP简介 作者 AirCity 2019 10 19 aircity007 sina com 1 什么是OVP OVP是Over Voltage Protection的首字母缩写 中文名是过压保护负载开关 当输入电压大
  • CentOS安装教程-解决“Warning:/dev/root does not exist”问题

    在安装CentOS时 若出现 Warning dev root does not exist could not boot 一般情况下是因为未找到安装系统盘的所在位置 例如 U盘 这时只需找到其位置 并对配置稍作修改即可 当我们使用U盘安装
  • LeetCode:二叉树的修改与构造(5道经典题目)

    LeetCode 二叉树的修改与构造 5道经典题目 本文带来与二叉树的修改与构造有关的经典题目 主要实现是C 226 翻转二叉树 106 从中序与后序遍历序列构造二叉树 105 从前序与中序遍历序列构造二叉树 654 最大二叉树 617 合
  • 安装报错ERROR: Could not find a version that satisfies the requirement tensorflow ERROR: No matching dis

    ERROR No matching distribution found for xxx的情况这可能是因为网络的问题 这时我们使用国内的镜像源来加速输入命令 python m pip install lxml 如果你安装的是别的库 请输入别
  • Java实现 LeetCode 120 三角形最小路径和

    120 三角形最小路径和 给定一个三角形 找出自顶向下的最小路径和 每一步只能移动到下一行中相邻的结点上 例如 给定三角形 2 3 4 6 5 7 4 1 8 3 自顶向下的最小路径和为 11 即 2 3 5 1 11 说明 如果你可以只使
  • 【YOLOX关键模块记录与解读】YOLOX: Exceeding YOLO Series in 2021

    目录 前言 一 主干部分的Focus网络结构 二 解耦头 三 Mosaic数据增强 四 Anchor Free 五 SimOTA标签匹配策略 六 参考资料 前言 论文地址 https arxiv org abs 2107 08430 源码地
  • uniapp引入外部js链接

    geturl let self this const url https webrtc github io adapter adapter latest js https g alicdn com cloudcallcenter SIPml
  • jenkins安装插件失败

    更改镜像库地址 去以下地址获取当前最新的地址 http mirrors jenkins ci org status html 截取上图红框中的url 在管理插件 gt 高级 中配置成下图中的格式
  • Qt中QLineEdit(取值、赋值、字体大小颜色)、QTextEdit和QPlainTextEdit

    核心 这些东西理解就可以了 下次用的时候看下笔记 能想起来就可以了 背 也背不下来 放弃吧 QString 界面设计最常用到的组件就是QLabel和QLineEdit QLabel用于显示字符串 QLineEdit用于输入和显示字符串 两个
  • 浏览器渲染原理

    浏览器渲染原理 目录 目录 浏览器渲染原理 B S架构及其运行原理 渲染过程 defer async不会阻塞页面解析 B S架构及其运行原理 b s架构是Brower Server结构 chrome浏览器渲染速度最快不同于其他浏览器 因为c
  • Transformer入门(一)——结构

    文章目录 前言 一 Transformer的产生和基础思想 1 1 Transformer的Motivation 1 2 Transformer的原始框架 1 3 关于Decoder的补充说明 二 Encoder中重要模块的具体实现 2 1
  • webpack配置devServer配置https代理与证书

    浏览器如果需要开发某些特定功能 需要https浏览器才会给予功能权限 则开发时我们需要在https环境 下面是配置一个webpack devServer的https环境 webpack config js module exports de
  • C++构造函数/拷贝控制

    1 C 构造函数 C 中构造函数 constructor 的作用是用来控制类对象的初始化过程 构造函数的作用是初始化类对象的数据成员 无论何时只要类的对象被创建 就会执行构造函数 1 1 默认构造函数 当定义一个类对象时 如果没有为对象提供
  • Git详细安装教程

    对于Git这块 我也算是个小白 最近在学习Git 所以趁此机会详细讲解一下Git的安装教程以及安装过程中遇到的问题 也欢迎大家对其补充 共同进步 1 下载Git Git的下载地址 windows系统 http gitforwindows o
  • Laravel_arse error: syntax error, unexpected '?'

    解决办法 php的版本不对 先打开composer phar 看看版本是否符合要求 之后修改服务器的php版本 我用的是wamp套餐 把php版本修改为7 2 4 建议也把编译器里的php开发环境统一为7 2 4
  • linux中嵌套循环,linux中的嵌套循环

    嵌套循环 内循环 一条循环语句可以在循环中使用任何类型的命令 包括其他循环命令 示例1 bin bash for a 1 a lt 3 a do echo Starting loop a for b 1 b lt 3 b do echo I
  • ezStudio,易用高效的业务基础平台开发工具

    摘要 本文从业务基础平台谈起 引申出与业务基础平台息息相关的开发工具 通过对国内外开发工具现状与未来趋势的描述 引导读者对开发工具有一个较为全面的了解 最后对清华同方ezONE 易众 业务基础平台中的ezStudio开发工具作了重点介绍与说
  • java excel通用工具类

    public class ExcelUtils 有时间记得重构下 生成excel流 throws IOException param type xone 1 lr 2 public static String createExcelIO L
  • TOP16之CSRF -- 小黑超细详解+案例说明<宝藏文>

    CSRF 跨站请求伪造 很好理解 就是盗用别人的身份伪造请求发送给服务器 在未授权的情况下执行权限保护之内的操作 因为请求的一切流程都是正常操作 这也是一般不会被检测到的漏洞行为 小黑子们 撸起袖子加油干 目录 CSRF 理解 判断是否有C
  • css set a4 paper size

    HTML div class book div class page div class subpage Page 1 2 div div div class page div class subpage Page 2 2 div div