`

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;`或其他元素来表示每一页的内容区域。...

    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源码_源码

    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的“层叠”特性意味着可以有多个样式来源,它们按照优先级合并,形成最终的样式...

    CSS CSS CSS

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

    Reset_CSS css样式重置文件

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

    CSS中常用的 reset.css文件

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

    reset.css文件.zip

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

    postcss-image-set-function:在CSS中使用image-set()

    PostCSS image-set()函数 可让您按照规范在CSS中使用image-set()函数显示与分辨率有关的image-set() 。 .example { background-image : image-set ( url( img.png ) 1 x, url( img@2x.png ) 2 x, url( img@print....

    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...

    CSS酷站CSS特效华丽CSS

    在本篇内容中,我们将深入探讨"CSS酷站"、"CSS特效"和"华丽CSS"相关的知识点,以及通过一些CSS精美示例来展示其魅力。 首先,"CSS酷站"是指那些运用创新和独特CSS技巧设计的网站,它们通常具有引人入胜的视觉效果和...

    Three.js前端3D开发:使用CSS3DRenderer渲染全景图

    renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 5. **加载全景图**:全景图通常是一张环绕图像,可以使用Three.js的 ImageLoader 或者 ...

    div+css手册

    5. **字体和文本属性**:CSS2.0提供了丰富的字体和文本属性,如`font-family`、`font-size`、`color`、`text-align`等,可以定制文本的样式和布局。 6. **背景和边框**:CSS2.0引入了背景图像、颜色和边框样式,如`...

Global site tag (gtag.js) - Google Analytics