添加更多页面
现在您已经熟悉了如何向 Web 故事添加页面，在我们的“宠物之乐”故事中添加下一页非常相似。根据下面提供的信息，请使用您目前所学的内容创建其余页面。如果遇到困难，请查看已完成的 (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> 元素，用于指定一个 grid-area，该网格区域占据 lower-third 并包含以下文本：狗可能是第一批被驯服的动物。它们陪伴人类大约 10,000 年了。一些科学家断言，所有家养和野生狗都有一个小南亚狼的共同祖先。 |
|
第 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 故事，此属性是必需的。 - 使用
autoplay 属性将视频设置为自动播放。对于有效的 AMP 故事，此属性是必需的。 - 使用
loop 属性将视频设置为自动循环播放。 - 将尺寸设置为
width="720" height="1280" 和 layout="responsive"。 - 第 2 层 实现
vertical 模板，并包含一个元素 - 第 3 层：实现
vertical 模板，并包含一个元素 - 一个
<p> 元素，其中包含以下文本：兔子可以学会遵循简单的语音命令，并且在被叫到名字时会过来，它们好奇且爱玩。 - 将
bottom CSS 类应用于该层，以将子元素对齐到屏幕底部。 |
|
我们的“宠物之乐”故事即将完成。我们将在最后一页中使用动画，将所有宠物聚集在一起。