时间戳

首页 > 解决方案 > 把我的网站分成几个块

html - 把我的网站分成几个块

问题描述

我正在建立一个网站，我希望我的整个网站都在一个页面上。我一直在寻找这些网站的灵感，但我不知道它们是如何将网站划分为不同的区块的。当我尝试这样做并为它们设置样式时，所发生的一切是：例如

<p>
bla bla
</p>

当我设置 P 样式时，它只在文本到达的范围内应用颜色，并将页面的其余部分留空。

这里有些例子。( http://clovercaremassage.ca/ ) 和 ( http://deacupunctuurpraktijk.nl/ )

谢谢

标签： htmlcss

解决方案

您展示的示例网站是视差风格的。这是一个非常基本的模板，可以帮助您入门。这个例子中的关键是每个“块”的高度是屏幕的高度 100vh（视口高度的 100%）和第二个块的背景是固定的（不随页面滚动）。这个例子没有使用任何动画或滚动速度偏移来帮助使一些好的设计如此引人注目。如果您不是编码员，您可以找到许多使用视差的 wordpress 主题，您所要做的就是安装一个并填写内容。

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); }
<div class="section">block 1</div>
<div class="section">block 2</div>
<div class="section">block 3</div>

小提琴

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

推荐阅读