html - 我怎样才能制作一本类似于这本的 HTML 电子书？

Question

我正在尝试制作一个类似于此的 HTML 页面布局 https://ebooks.adelaide.edu.au/b/barrie/jm/peter/index.html 但我无法弄清楚如何让正方形像背景一样工作，并留在一个地方，这样我就可以在上面放图片、文字或任何我想要的东西。我制作了一张图像用作封面照片，并希望它后面有形状，这样我就可以向下滚动并查看关于页面和内容等的按钮。

div {
  margin-right: 300px;
  margin-left: 300px;
  margin-top: 100px;
}

.square {
  width: 523px;
  height: 600px;
  Background-color: #3C3F52;
  margin-right: 300px;
  margin-left: 300px;
  margin-top: 100px;
}

<div><img src="peter%20pan%20cover.jpg" alt="Cover">

  <div class="square"></div>

Answer 1

我猜是这样的。这个例子可以微调。我使用嵌套的 block 级 div 元素，并使用 border、box-shadow 等设置它们的样式，以给人一种书籍封面的印象。

html {
  background: #ccc;
}

.ebook {
  background: white;
  width: 80vw;
  margin: 0 auto 0 auto;
  text-align:center;
  min-height: 800px;
  padding:48px;
  box-shadow: 0px 0px 25px #888888;
}

.ebook p {
  font-size:40pt;
  font-weight:bold;
}

.ebook img {
  width:100px;
  height:100px;
  border: 1px solid grey;
  display:inline-block;
}

.inner-frame {
  border:1px solid black;
  min-height:calc(800px - 96px);
}

<div class="ebook">
<div class="inner-frame">  
  <p>My title </p>
  <img src="peter%20pan%20cover.jpg" alt="Placeholder Image">
  
  </div>
</div>