添加更多页面
既然您已经熟悉如何向 Web Story 添加页面，那么在我们的“宠物之乐”故事中添加后续页面也非常相似。根据下面提供的信息，请**使用您目前所学的知识继续创建其余页面**。如果您遇到困难，请查看完整的 (pets-completed.html) 代码。
**提示 –** 请记住，每个页面都需要一个唯一的“id”属性（例如，id="page1"）。
第 1 页：猫
演示如何在单个图层中显示图像和文本。
- 包含 1 个图层
- 实现
vertical 模板。 - 包含 3 个元素
- 一个带有标题的
<h1> 元素：*猫* - 一个响应式的
amp-img（cat.jpg，720 x 1280 像素） - 一个用于以下引用的
<q> 元素：*狗在被叫的时候来。猫会接收消息，然后回复你。--玛丽·布莱* |
|
第 2 页：狗
演示如何排列文本并使用两个图层显示全屏图像。
- 包含 2 个图层
- 图层 1：实现
fill 模板，并包含一个响应式的 amp-img（dog.jpg，720 x 1280 像素）。 - 图层 2：实现
thirds 模板，并包含 2 个元素 - 一个带有标题的
<h1> 元素：*狗* - 一个
<p> 元素，用于指定一个占据 lower-third 的 grid-area 并包含以下文本：*狗可能是最早被驯服的动物。它们陪伴人类大约 10000 年了。一些科学家断言，所有狗（家养和野生）的共同祖先是南亚小狼。* |
|
第 3 页：鸟
演示如何排列文本、显示全屏图像，并为页面提供背景音频。
- 包含 3 个图层
- 图层 1：实现
fill 模板，并包含一个响应式的 amp-img（bird.jpg，720 x 1280 像素）。 - 图层 2：实现
vertical 模板，并包含一个元素 - 图层 3：实现
vertical 模板，并包含一个元素 - 一个用于以下引用的
<q> 元素：*一只鸟有三样东西：羽毛、飞行和歌唱，而羽毛是最不重要的。--玛乔丽·艾伦·塞弗特* - 此第三图层指定
class="bottom"，以将子元素与屏幕底部对齐。 - 在显示页面时在后台播放音频文件。您可以在整个故事或单个页面的后台播放音频。要为页面播放音频，请将
background-audio="assets/bird-singing.mp3" 属性添加到 <amp-story-page> 元素。如果您的音频包含旁白或重要的音频信息，请确保还以文本形式传达相同的信息，以供可能无法听到或已关闭声音的用户使用。 |
|
第 4 页：兔子
演示如何排列文本，并显示页面的全屏视频。
- 包含 3 个图层
- 图层 1：实现
fill 模板，并包含一个响应式的 amp-video（rabbit.mp4）。 - 请记住，在
<head> 部分为 amp-video 组件添加**必需的脚本**，以便显示视频。 - 指定
poster 图像（rabbit.jpg）。此属性对于有效的 AMP Story 是**必需的**。 - 使用
autoplay 属性将视频设置为自动播放。此属性对于有效的 AMP Story 是**必需的**。 - 使用
loop 属性将视频设置为自动循环播放。 - 将尺寸设置为
width="720" height="1280" 和 layout="responsive"。 - 图层 2：实现
vertical 模板，并包含一个元素 - 图层 3：实现
vertical 模板，并包含一个元素 - 一个
<p> 元素，其中包含以下文本：*兔子可以学会遵循简单的语音命令，并在被叫到名字时过来，它们好奇且爱玩*。 - 将
bottom CSS 类应用于图层，以将子元素与屏幕底部对齐。 |
|
我们的“宠物之乐”故事即将完成。我们将在最后一页中使用动画将所有宠物聚集在一起。