根据我们的这个故事区的设计，去设计一下这块界面的代码结构 ... 就是用 html 的标签去组织一下这块内容。组织的方式会适合我们在后面要去应用的样式 ..

在项目的下面，执行一下 gulp serve ... 这样会创建一个本地服务器，然后在浏览器上打开项目里的内容 .. 再用编辑器打开这个项目 ..

找到 app 下面的 index.html ..

先把之前我们做好的这英雄区还有卡片组件这两块内容折叠起来 ... 选中它们 .. 再把它们注释掉 ..

先给故事区里的全部内容添加一个容器 .. 可以使用一个 div ... 加上 ui.story 这两个 css 类 ..

这个故事区的宽度我想让它是流动它 .. 所以可以不用添加布局用的容器 ..

故事区分成了两部分，左半部分是文字内容， 整体还有个图像背景 ...

先给文字内容添加一个容器 ... 加上一个 content 类 ..

里面先添加一个 sub header ... story

下面是个大标题 ... 可以用一下 h2 标签 ... 元素上面再加上一个 header 类 ... 再输入标题里的文字内容 .. 揽胜历史 ..

大标题的下面是一段描述 ... 用一个 div，加上一个 description ... 再去复制一段文字 ...

描述的下面是个按钮 ... 先给它添加个包装 .. 上面加上一个 action 类 ..

按钮是个链接，用一个 a 标签 ... 我在页面上已经链接了 semantic ui 里的按钮样式 .. 所以在这个标签的上面，我们可以用一下 ui big basic black button ... 按钮上的文字是 了解更多 ..

再去添加一个图像 .. 这个元素跟包装文字内容的 content 是兄弟关系 .. 元素上面加上一个 image 类 ..

元素里面包装一个图像 .. 可以用一个 img 标签 ... 再它的 src 属性里面指定一下图像的位置 ... 我在项目的 app images 下面，已经准备好了一张图片 ...

位置是 images / 加上这个图片的名字 ...

这样我们的故事区的代码结构就准备好了 ...