`

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

相关推荐

    css3-paper-temple.zip

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

    前端项目-paper-css.zip

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

    css3paper_HTML5_CSS3源码_

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

    use cssTheme to set eclipse RCP css

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

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

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

    html css网页制作成品r-paper开发笔记

    在"r-paper"项目中,开发者可能使用了现代前端框架或库,如Bootstrap或Flexbox来简化布局,或者使用Sass、Less等预处理器来增强CSS的功能。此外,开发笔记可能会涵盖调试技巧、版本控制(如Git)的使用、代码组织...

    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”的文件,它是实现这一目标...

    Div+Css实现信纸书写页面

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

    精通CSS精通CSS

    3. 属性与值:CSS提供众多属性来控制元素的样式,如`color`、`font-size`、`background-color`等,值可以是颜色、长度单位、百分比等。 二、CSS盒模型 盒模型是理解CSS布局的关键,包括内容(content)、内边距...

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

    Enduring CSS

    Enduring CSS is a book for considering how to write CSS in the most effective manner, and how you too can create an enduring CSS code base, regardless of project size. Take a journey with me if you ...

    CSS网站布局与美化,css

    CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...

Global site tag (gtag.js) - Google Analytics