`

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>
</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;
    }
}
分享到:
评论

相关推荐

    HTML和CSS3制作的可编辑的微软Word样式文档

    sheets-of-paper-a4.css:A4纸(21cm × 29.7cm) sheets-of-paper-a3.css:A3纸(29.7cm × 42cm) sheets-of-paper-usletter.css:US letter(21.6cm × 27.9cm) sheets-of-paper-uslegal.css:US legal(21.6cm × ...

    css3-paper-temple.zip

    "css3-paper-temple.zip"这个压缩包,很可能包含了一些关于CSS3在创建纸质风格模板方面的应用实例或教程,这将帮助我们深入了解CSS3的特性以及如何将其应用于实际项目中。 首先,让我们探讨一下CSS3的核心特点。CSS...

    前端项目-paper-css.zip

    【前端项目-paper-css.zip】是一个专门针对打印优化的前端项目,名为"Paper CSS",它致力于为用户提供愉快的打印体验。这个压缩包包含了项目的主要源代码,主要文件名为"paper-css-master",意味着我们即将探索的是...

    HTML 页面实现A4纸样式 显示效果

    常见的A4纸边距约为2.5cm,转换为像素后大约是96dpi * 2.5cm ≈ 72px。设置如下: ```css body { padding: 72px; } ``` 4. **内容区域**:在HTML中,我们可以使用`&lt;div&gt;`或其他元素来表示每一页的内容区域。...

    CSS3的background-size属性,实现响应式式图片等比例缩放。

    CSS3的`background-size`属性就是实现响应式图片等比例缩放的关键技术之一,它解决了传统方法中图片在不同屏幕尺寸下显示不适应的问题。 `background-size`属性允许我们自定义背景图片的大小,而不仅仅是局限于图片...

    css3paper_HTML5_CSS3源码_

    其中,CSS3 Paper翻页效果是一种模拟纸质书本翻页动态效果的技术,它使得网页看起来更具交互性和真实感。这个"css3paper_HTML5_CSS3源码_"项目正是基于这样的设计理念,旨在为开发者提供实现这种效果的代码资源。 ...

    解决XP IE8不支持css3的background-size问题实例

    本实例主要关注的是如何解决在Windows XP系统下,使用Internet Explorer 8(IE8)浏览器时遇到的不支持CSS3 `background-size`属性的问题。这个问题是由于IE8浏览器的内核不支持CSS3新特性导致的,而`background-...

    use cssTheme to set eclipse RCP css

    在eclipse开发中, 使用cssTheme和applicationCSS来设置主题样式,需要创建product运行文件,然后在plugin.xml设置product的属性. 学习网站 https://www.vogella.com/tutorials/Eclipse4CSS/article.html#:~:text=%...

    css3paper_HTML5_CSS3源码_源码.zip

    css3paper_HTML5_CSS3源码_源码

    CSS3的Background-size很重要

    CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术,使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。...

    Jquery+Mobile+a4+html5+css3中文手册

    《Jquery+Mobile+a4+html5+css3中文手册》是针对Web开发者的综合性参考资料,涵盖了前端开发的三大核心技术:jQuery Mobile、HTML5和CSS3。这些技术在现代网页和移动应用开发中起着至关重要的作用。接下来,我们将...

    css教程,CSS编写

    5. **规则集(Rule Set)**:规则集是选择器和声明的结合,如`p { color: red; font-size: 16px; }`。 6. **层叠(Cascading)**:CSS的“层叠”特性意味着可以有多个样式来源,它们按照优先级合并,形成最终的样式...

    css3-3d-paper-menu.zip

    《CSS3 3D Paper Menu 实现详解》 在网页设计中,为了提供更丰富的用户体验,动态效果的应用越来越广泛。CSS3(Cascading Style Sheets Level 3)作为新一代的样式表语言,为网页设计师提供了许多强大的功能,其中...

    CSS CSS CSS

    CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    reset.css文件.zip

    重置CSS(reset.css)是前端开发中的一个重要概念,它旨在消除浏览器之间的样式差异,确保网页在各种浏览器中呈现一致的布局。这个压缩包“reset.css文件.zip”包含了一个名为“reset.css”的文件,它是实现这一目标...

    Div+Css实现信纸书写页面

    background-size: 20px 20px; } ``` 此外,还可以通过调整`line-height`属性控制行高,以获得舒适的书写体验。比如: ```css .letter-paper { line-height: 1.5; /* 可根据实际需求调整 */ } ``` 结合以上知识点...

    CSS-paper.rar_opera

    这是一个纯粹的CSS3效果,模拟实现Pseudo-Classes模拟卡片翘边阴影效果、方框边框阴影效果,不过经测试貌似不兼容IE8,但完美支持ie9、chrome、safari、firefox、opera、360等浏览器。也算是为学习CSS3的朋友共享一...

    CSS特效+CSS图标

    CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS...

Global site tag (gtag.js) - Google Analytics