现在我们去完成产品页面上的外观这部分设计，这块区域跟我们之前在首页上做的垂直类型的故事区类似 .. 分成了两个部分，上面是故事区的文字，下面是一组图片 .. 这块我们可以做成一个旋转木马，滚动文字，下面的图片也跟着动，滚动下面的图片，上面的文字也会随着切换 ...

回到编辑器 ... 在 app 目录下面，找到 product.html .. 这个文档上面是产品页的代码 .. 产品的外观这个故事区内容可以放在这个英雄区代码的下面 ...

另外产品页上还有个子导航，我们会到最后再去完成它 ..

先给整个区域添加一个包装 .. 一个 div ，上面加上 ui vertical story 这几个 css 类 .. 它里面包装的是两个可以相互联系的旋转木马 ..

每个都可以单独放在一个包装里，先给文字旋转木马添加一个包装，上面可以加上 ui carousel text .. 再给图片旋转木马添加一个包装，上面加上 ui carousel image ..

文字

这两个旋转木马里面有相同数量的项目 .. 先添加一个文字项目 .. 一个 div ，上面加上一个 item 类 .. 里面包装一个 div ，加上 content 类，这个包装里是具体的内容 ..

回到设计看一下 ... 这个文字项目的最开始是一个子标题 .. 就是外观这两个字，然后是一个大标题，接着是一段描述文字，最后有两个动作链接 ...

一个 div 加上 sub header ，这是文字项目的子标题，外观 ... 下面是个大标题，可以用一个 h2 ，上面加上 header .. 具体的内容我已经给你准备好了，在 app content 下面，打开这个 product--velar.md .. 复制一下这个标题内容，粘贴过来 .. 大标题的下面是一段描述，一个 div ，加上一个 description 类，表示描述 ..

再去复制一段描述文字 ...

描述的下面还有两个动作链接 .. div.action 一个 a 标签 ... 观看视频，一个斜线分隔一下，再添加一个链接 ... 查看图库 ..

现在我们就准备好了文字旋转木马里的其中的一个项目，你可以使用类似的方法，再去添加两个文字项目 ...

图像

下面我们再去添加一个图片旋转木马项目 .. 在这个 ui carousel image 里面，添加一个 div ，上面加上 item 类，表示这是一个旋转木马项目 ..

里面包装一个 div，加上一个 image 类 ... 在这个包装里再添加一个 img 图像标签 ... 图像我也为你准备好了，在 app images 这个目录的下面 ..

在这个内容文件里，可以复制一下这个图像的地址 ... 把它放在 img 标签的 src 属性里面，src 表示资源 ...

这就是外观区域上的一个图像旋转木马项目 ...

预览
可以先去预览一下，现在你看到的就是外观区域旋转木马的一组项目，一块文字，下面是一个图像项目 ... 在后面我们会去修改这块区域上的内容的显示样式，还要给它添加一些行为 ...

内容

先把这段代码折叠一下 .. 然后复制两份 .. shift + command + D .. 展开一个 ... 修改一下里面的文字内容 ... 可以复制这个内容文件上的内容 .. 先改一下标题 ... 然后是描述 ..

再修改一下另外一个项目 ... 改一下大标题 ... 还有它的描述 ...

再用同样的方法，去添加另外两个图像项目 .. 复制两份 .. 然后修改一下项目里的图像的地址 ... 这个图像地址，你可以在这个内容文档里找到 ..