Question

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

我想这些内容。这个例子可以微调。我使用嵌套的块级div元素，并使用border，box-shadow等方式对其进行样式化，以给出书籍封面的印象。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

试试这个CSS：

.square {
border: 2px solid #00609c;
height: 47em;
position: relative;
}

如何制作与此类似的HTML电子书？

2 个答案: