简介
在本课中，我们将学习如何创建一个单页网站。我们将探索如何创建首页模板、制作固定头部、添加链接和锚点，以及实现平滑滚动。
示例网站
这是我创建的示例网站，带有固定头部。当我点击菜单项时，它会直接跳转到页面的相应部分。我通过创建页面内链接和锚点实现了这一点。由于我正在创建一个单页网站，我没有创建任何页面，而是添加了一个首页模板，并在首页模板上构建整个网站。为此，我们进入站点编辑器。选择模板，然后点击“添加新模板”。接着，我们可以添加首页模板。然后，我添加了页面的所有内容。如你所见，我添加了带有网站标志和导航块的头部、一个封面区域、一个关于区域、一个展示作品的部分（因为这是一个建筑师的个人作品集网站），以及一个联系区域。我使用了一个表单插件来添加这个联系表单。在最底部，是我们的页脚。
链接
让我们从头部开始添加链接。我们要添加到导航菜单的第一个链接叫做“关于”。在侧边栏设置中，“文本”下方是链接的名称，而“链接”下方我们填写 #about 或链接的名称。然后，我们对其他两个部分进行同样的操作。第二个链接叫做“我的作品”，然后将链接改为 #mywork。接着，我们处理联系导航项，在“链接”下方添加 #contact。然后，我们可以点击保存。
锚点
接下来，我们需要为页面上的每个部分添加 HTML 锚点。为此，在列表视图中选择该部分，然后进入侧边栏设置底部的“高级”选项。在“HTML 锚点”下方，添加相关链接的名称。在我们添加的“关于”链接下方是 #about，所以在这种情况下，HTML 锚点应命名为“about”。添加锚点时，请记住它应该使用小写字母且不含空格。请注意，锚点是网页上可以直接链接到的特定点。可以将它们视为页面内的书签。当你点击带有锚点的链接时，它会直接带你到页面的那个部分。接下来，我们可以选择“我的作品”部分并添加 HTML 锚点。我们将输入“mywork”，全部小写且不含空格。最后，对联系部分进行同样的操作。然后点击保存。你会注意到，在列表视图中，每个部分旁边都添加了锚点。在前端，我们现在可以看到导航菜单已就位，当我们点击链接或导航项时，它会直接带我们到那个部分。但我们还需要让头部固定。
固定头部
让我们回到首页模板。要使头部固定，我们需要将头部包裹在一个组块中。一旦将其包裹在组块中，我们可以进入侧边栏设置，在“位置”下方。点击“默认”，然后选择“固定”。接下来，我将把组块的背景颜色改为与网站相同。点击保存后，我们可以在前端查看网站，会看到头部已经固定。而且锚点也已就位。
平滑滚动
最后要讨论的是平滑滚动。我添加了一些 CSS 来实现在从一个部分移动到另一个部分时的平滑滚动。在本课中，我们没有时间深入探讨 CSS，但我会向你展示如何获取这段代码片段，为你的网站添加平滑滚动。简而言之，CSS 代表层叠样式表，通过将规则应用于 HTML 内容来决定网站的外观。要为你的网站添加额外的 CSS，请点击右上角的样式图标，然后点击三个垂直点。接着点击“额外 CSS”。如我们所见，我已经添加了一段简短的代码片段来为网站添加平滑滚动。我也会将其放在视频下方，供你复制粘贴。为了可访问性，我将此功能包裹在一个首选的减少运动媒体查询中。这尊重用户的偏好，并且仅在他们没有在设备上明确禁用该选项时生效。让我们移除 CSS 来看看它对网站的影响。移除后，我们可以返回网站前端。当我们点击链接时，它会直接带我们到那里，不再有平滑滚动。但我们可以通过重新添加 CSS 代码片段来快速恢复。
结论
我相信你现在对添加首页模板、固定头部、标签、锚点以及一些 CSS 代码来实现平滑滚动更有信心了。