用编辑器打开项目 ... 找到 app ... 下面的 index.html ... 这里我们可以先去准备体验行动区的代码结构 ..

这个区域我们也可以把它看成是一个故事区 .. 跟上面不同的是，这个区域的文字在图片的上面 ...

我们可以在上面做好的这个故事区的包装上面，添加一个 horizontal .. 表示水平 ...

再打开 story 的样式文件 ... 在这个 ui.story 里面，添加一个 &.horizontal ... 然后把之前添加的样式都嵌套在它里面 .. & 表示引用，在这里它表示的就是 .ui.story ... 因为这块样式嵌套在了 ui.story 里面 ..

回到 index.html ... 先给我们要做的行动体验区添加一个包装 ... 上面可以加上 ui.vertical.story ，垂直显示的故事 .. 就是文字在上面，图片在下面 ...

这个 vertical story 分成了两个部分 .. 上面是文字，下面是一组图片，这两部分内容都是一个旋转木马组件 ... 我们可以使用 JavaScript 去控制它们之间的关系 ... 滚动文字的同时会滚动下面的图片，滚动图片，上面的文字也会随着变化 ..

旋转木马组件可以放在一个带 ui carousel 的容器里 .. 再添加一个这样的容器 ... 因为我们要设置这两个旋转木马组件的关系 .. 所以在这个容器上还得添加点别的东西去表示它们之间的关系 ... 比如在上面这个旋转木马的上面，可以添加一个 for ..

在下面这个旋转木马的上面，可以添加一个 nav ... 这样在使用 JavaScript 去设置旋转木马的时候，你可以根据这两个特殊的类，去定位到正确的元素 ..

旋转木马里面包装的是一组项目，每个项目都可以放在一个带 item 类的容器里 .. 添加四个这样的容器 ... 表示这个旋转木马里面有四个要显示的项目 ..

在下面的这个旋转木马容器里，也添加四个带 item 类的元素 ..

上面这个旋转木马里放的是文字 ... 先用一个带 content 类的包装 ... 里面是文字的标题还有描述，标题放在一个 h2 里面，上面加上 header ... 然后是描述 ... 包装的上面加上一个 description 类 ..

里面再输入一段文字 ..

这个文字项目是这个旋转木马里的第一个项目 ... 在下面的这个旋转木马里面，要添加一个跟上面的文字对应的图片项目 ..

一个 div，上面加上 image ... 里面用一个 img ... 添加一张图片 ... 在 app ... images 的下面，你可以找到需要的图片 ..

这个图片项目在这组旋转木马里面也是第一个 .. 它对应的文字，就是上面这个旋转木马里的第一个项目 ...

使用同样的结构，可以再去设置一下这两个旋转木马里面的其它的三个项目 ...

如果你已经理解了我们为什么要使用这样的结构去组织这块内容 ... 你可以把项目切换到一个特定的标签上，这样会为你准备需要的内容 ...

git checkout v9.4.1