Question

我正在建立一个网站，我希望将我的整个网站放在一个页面上。我正在寻找这些网站的灵感，但我无法弄清楚他们如何将网站划分为不同的块。当我尝试这样做并为它们设置样式时，所有发生的事情都是：例如

<p>
bla bla
</p>

当我设置P时，显然它只会在文本到达时应用颜色，并使页面的其余部分留空。

以下是一些例子。（http://clovercaremassage.ca/）和（http://deacupunctuurpraktijk.nl/）

由于

Answer 1

您展示的示例网站属于parallax style。这是一个非常基本的模板，可以帮助您入门。这个例子中的关键是每个块的高度＆＃39;是屏幕高度100vh（视口高度的100％），第二个块的背景是固定的（不会随页面滚动）。此示例不使用任何动画或滚动速度偏移，这有助于使一些好的设计如此引人注目。如果您不是编码员，可以找到许多wordpress themes that utilize parallax，您只需要安装一个并填写内容。

＆＃13;

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.section:nth-child(1) { background-color: hsla(0, 0%, 50%, 1); }
.section:nth-child(2) { background: url("https://i.imgur.com/hHBx4Ji.jpg") no-repeat fixed center; }
.section:nth-child(3) { background-color: hsla(50, 30%, 70%, 1); }

＆＃13;

<div class="section">block 1</div>
<div class="section">block 2</div>
<div class="section">block 3</div>

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/hL7mu7mt/

将我的网站划分为块

1 个答案: