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;
}
}
相关推荐
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在创建纸质风格模板方面的应用实例或教程,这将帮助我们深入了解CSS3的特性以及如何将其应用于实际项目中。 首先,让我们探讨一下CSS3的核心特点。CSS...
【前端项目-paper-css.zip】是一个专门针对打印优化的前端项目,名为"Paper CSS",它致力于为用户提供愉快的打印体验。这个压缩包包含了项目的主要源代码,主要文件名为"paper-css-master",意味着我们即将探索的是...
常见的A4纸边距约为2.5cm,转换为像素后大约是96dpi * 2.5cm ≈ 72px。设置如下: ```css body { padding: 72px; } ``` 4. **内容区域**:在HTML中,我们可以使用`<div>`或其他元素来表示每一页的内容区域。...
其中,CSS3 Paper翻页效果是一种模拟纸质书本翻页动态效果的技术,它使得网页看起来更具交互性和真实感。这个"css3paper_HTML5_CSS3源码_"项目正是基于这样的设计理念,旨在为开发者提供实现这种效果的代码资源。 ...
本实例主要关注的是如何解决在Windows XP系统下,使用Internet Explorer 8(IE8)浏览器时遇到的不支持CSS3 `background-size`属性的问题。这个问题是由于IE8浏览器的内核不支持CSS3新特性导致的,而`background-...
在eclipse开发中, 使用cssTheme和applicationCSS来设置主题样式,需要创建product运行文件,然后在plugin.xml设置product的属性. 学习网站 https://www.vogella.com/tutorials/Eclipse4CSS/article.html#:~:text=%...
css3paper_HTML5_CSS3源码_源码
《Jquery+Mobile+a4+html5+css3中文手册》是针对Web开发者的综合性参考资料,涵盖了前端开发的三大核心技术:jQuery Mobile、HTML5和CSS3。这些技术在现代网页和移动应用开发中起着至关重要的作用。接下来,我们将...
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属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...
重置CSS(reset.css)是前端开发中的一个重要概念,它旨在消除浏览器之间的样式差异,确保网页在各种浏览器中呈现一致的布局。这个压缩包“reset.css文件.zip”包含了一个名为“reset.css”的文件,它是实现这一目标...
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....
这是一个纯粹的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技巧设计的网站,它们通常具有引人入胜的视觉效果和...
renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 5. **加载全景图**:全景图通常是一张环绕图像,可以使用Three.js的 ImageLoader 或者 ...
5. **字体和文本属性**:CSS2.0提供了丰富的字体和文本属性,如`font-family`、`font-size`、`color`、`text-align`等,可以定制文本的样式和布局。 6. **背景和边框**:CSS2.0引入了背景图像、颜色和边框样式,如`...