黑书也化个妆

马黑黑 · 发表于 2022-4-29 10:36

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-29 10:42 编辑

All in here

馬
黑
黑

書中自有黃金屋

Never settle

HTML文档结构

<div class="book">
	<div class="page">
		<div>
			封面
		</div>
		<div>
			扉页
		</div>
	</div>
	<div class="page">
		<div>
			第一页
		</div>
		<div>
			第二页
		</div>
	</div>
	<div class="page">
		<div>
			第三页
		</div>
		<div>
			第四页
		</div>
	</div>
	<div class="page">
		<div>
			内封
		</div>
		<div>
			封底
		</div>
	</div>
</div>

红色部分是放置书本内容的地方，支持HTML代码，可以是文本，可以是图片，甚至可以是媒体。建议使用规范的HTML代码发布帖子内容，可以将组织好的代码替换红色部分。

红色之外的代码结构不可破坏，否则黑书会死翘翘！

1

关于书本页码

本示范每一页都标有页码，封面、扉页、内封与封底也有相应的文本标识，都是页码范畴。这些页码标识，通过HTML+CSS实现，HTML代码只需通过class引用CSS样式便可。

单数页码对应于如下代码中的第一页所在的盒子即第一组 div，双数页码对应于第二页所在的盒子即第二组 div：

	<div>第一页<div>
	<div>第二页<div>

那么，单页页码用以下语句插入：<p class="rnum">1</p>

那么，双页页码则用：<p class="lnum">2</p>

可以看出来：rnum 是 right number 即右侧页码的意思，lnum 则是 left number 即左侧页码。.rnum 和 .lnum 已在CSS里设定为绝对定位，因此只要放在对应的所在页的div之内便可，无需考虑它在代码流中的具体位置。举例如下：

	<div>
		<p>第一页的内容</p>
		><p class="rnum">1</p>
	<div>
	<div>
		><p class="rnum">2</p>
		<p>第二页的内容</p>
	<div>

封面、内封可视为单数页码，也可以根据需要选用。

2

第二頁

3

第三頁

4

第四頁

-End-

內封

花潮出版社出版
正版書籍: ￥99.99

封底

东篱闲人 · 发表于 2022-4-29 10:37

书下面露字了。。。

马黑黑 · 发表于 2022-4-29 10:43

东篱闲人发表于 2022-4-29 10:37
书下面露字了。。。

嗯，论坛的CSS样式和本地的不同，字数减一点就好。

马黑黑 · 发表于 2022-4-29 10:47

主要代码：

<style>
.book {
left: -214px;
display: flex;
align-items: center;
width: 1024px;
height: 700px;
perspective: 1800px;
cursor: pointer;
padding: 10px;
position: relative;
}
.page {
padding: 20px;
width: 478px;
height: 670px;
left: 50%;
transform-origin: left;
background-color: rgba(243,226,199,1);
background: linear-gradient(to right, rgba(193,158,103,1) 0%, rgba(182,141,76,1) 1%, rgba(233,212,179,1) 100%);
box-shadow: inset -10px -3px 6px rgba(243,226,199,1), 1px 1px 20px rgba(0,0,0,.15);
transform-style: preserve-3d;
position: absolute;
}
.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { }
.page div:nth-child(2) { display: none; }
@keyframes rot1{
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
@keyframes rot2{
from { transform: rotateY(-180deg); }
to { transform: rotateY(0deg); }
}
.page p { margin: 0; padding: 4px 0; }
.page img { width: 100%; height: 100%; }
h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }
.rnum { position: absolute; bottom: 4px; right: 10px; color: #777; font-size: 10px; }
.lnum { position: absolute; bottom: -16px; left: -6px; color: #777; font-size: 10px; }
.tit { font: bold 3em /3.5em sans-serif;color:#e6e6e6;text-shadow: 1px 1px 2px gray; }
.vtc { writing-mode: vertical-rl; }
.mid { text-align: center; }
.right { text-align: right; }
.redcolor { color: red; }
</style>
<div class="book">
<div class="page">
<div>
<p class="rnum">All in here</p>
<p class="right" style="color: #777;">馬<br>黑<br>黑</p>
<p class="tit vtc">書中自有黃金屋</p>
</div>
<div>
<p class="lnum">Never settle</p>
<p>HTML文档结构</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<p>第一頁</p>
</div>
<div>
<p class="lnum">2</p>
<p>第二頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p>第三頁</p>
</div>
<div>
<p class="lnum">4</p>
<p>第四頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">-End-</p>
<p>內封</p>
</div>
<div>
<p class="rnum">花潮出版社出版<br>正版書籍: ￥99.99</p>
<p>封底</p>
</div>
</div>
</div>
<script>
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;
setzIdx();
document.querySelector(".book").onclick = function(){
if(idx == 0){ //前翻
page[currentPage].style.animation = "rot1 .5s linear forwards";
page[currentPage].children[0].style.display = "none";
page[currentPage].children[1].style.display = "block";
page[currentPage].children[1].style.transform = "rotateY(-180deg)";
currentPage ++;
if(currentPage == all){
idx = 1;
currentPage = all - 1;
}
} else { //后翻
page[currentPage].style.animation = "rot2 .5s linear forwards";
page[currentPage].children[1].style.display = "none";
page[currentPage].children[0].style.display = "block";
page[currentPage].children[1].style.transform = "rotateY(360deg)";
currentPage --;
if(currentPage < 0){
idx = 0;
currentPage = 0;
}
}
setzIdx();
}
function setzIdx(){
for(j=0; j<all; j++){
page[j].style.zIndex = j >= currentPage ? page[j].style.zIndex = all - j : page[j].style.zIndex = j + 1;
}
if(page[currentPage].style.zIndex <= all) page[currentPage].style.zIndex = all;
}
</script>

复制代码

马黑黑 · 发表于 2022-4-29 10:59

本帖最后由马黑黑于 2022-4-29 11:05 编辑

下面是HTML部分的代码，发布书籍要编辑的部分。有颜色的是需要修改或添加的内容，相同颜色块的处在同一张纸的正反两面，类推下去。编辑时不要破坏颜色代码以外的代码结构，添加纸张要确保所添加的是一整组的 class="page"、内含两组div 的代码（后面给实例）：

<div class="book">
      <div class="page">
            <div>
                     <p class="rnum">All in here</p>
                     <p class="right" style="color: #777;">馬<br>黑<br>黑</p>
                     <p class="tit vtc">書中自有黃金屋</p>
            </div>
            <div>
                     <p class="lnum">Never settle</p>
                     <p>HTML文档结构</p>
            </div>
      </div>
      <div class="page">
            <div>
                     <p class="rnum">1</p>
                     <p>第一頁</p>
            </div>
            <div>
                     <p class="lnum">2</p>
                     <p>第二頁</p>
            </div>
      </div>
      <div class="page">
            <div>
                     <p class="rnum">3</p>
                     <p>第三頁</p>
            </div>
            <div>
                     <p class="lnum">4</p>
                     <p>第四頁</p>
            </div>
      </div>
      <div class="page">
            <div>
                     <p class="rnum">-End-</p>
                     <p>內封</p>
            </div>
            <div>
                     <p class="rnum">花潮出版社出版<br>正版書籍: ￥99.99</p>
                     <p>封底</p>
            </div>
      </div>
</div>

附：添加纸张代码，我们加在第四页和内封之间：

<div class="book">
      <div class="page">
            <div>
                     <p class="rnum">All in here</p>
                     <p class="right" style="color: #777;">馬<br>黑<br>黑</p>
                     <p class="tit vtc">書中自有黃金屋</p>
            </div>
            <div>
                     <p class="lnum">Never settle</p>
                     <p>HTML文档结构</p>
            </div>
      </div>
      <div class="page">
            <div>
                     <p class="rnum">1</p>
                     <p>第一頁</p>
            </div>
            <div>
                     <p class="lnum">2</p>
                     <p>第二頁</p>
            </div>
      </div>
      <div class="page">
            <div>
                     <p class="rnum">3</p>
                     <p>第三頁</p>
            </div>
            <div>
                     <p class="lnum">4</p>
                     <p>第四頁</p>
            </div>
      </div>

      <div class="page">
            <div>
                     <p class="rnum">3</p>
                     <p>第五頁</p>
            </div>
            <div>
                     <p class="lnum">4</p>
                     <p>第六頁</p>
            </div>
      </div>

      <div class="page">
            <div>
                     <p class="rnum">-End-</p>
                     <p>內封</p>
            </div>
            <div>
                     <p class="rnum">花潮出版社出版<br>正版書籍: ￥99.99</p>
                     <p>封底</p>
            </div>
      </div>
</div>