下面去完成这个产品参数区域 ... 这部分内容也被分成了两部分，上面有一个大参数，下面是一些产品具体型号的参数 ...

先去准备这块内容 .. 打开 product.html .. 在这个 block story 的下面，可以去添加参数区域 ... 一个 div，上面可以加上一个 ui spec .. 你可以自己随便怎么去命名这个区域 ..

里面分成了两个部分，添加一个 div ，加上一个 highlight，它里面可以包装产品的那些大的参数 .. 这部分内容的布局我们可以使用 semantic ui 里的 grid 组件 .. 添加一个包装，加上 ui centered grid ，居中的网络 ..

每栏内容单独放在一个包装里，在这个包装的上面，我们可以分别指定在移动，平板，还有桌面设备上的栏的宽度 .. five wide mobile，表示这栏内容在小尺寸移动设备上占用 5 个网格的宽度，four wide tablet ，在平板上占用 4 个网格，three wide computer ，在桌面设备上占用 3 个网格宽度 .. 最后再加上一个 column 类 ..

每一栏里面是一个参数内容 .. 可以先添加一个包装，加上一个 ui.statistic ，在 semantic ui 里面，有一个 statistic 组件，提供的样式跟我们的需求差不多，不过我想自己去创建这块样式，不会太复杂 ..

参数的最上面是一个标签，一个 div ，加上一个 label 类，里面是标签文字 ... 然后是参数的值，一个 div ，加上 value 类 .. 输入一个值 .. 这个值的后面还有个单位，这个单位的显示要比数字小一些，所以我们可以用一组 span 标签包装一下这个单位，这样在创建样式的时候，我们可以单独去设置单位文字的大小 ..

这样就准备好了一个参数项目 ... 下面再复制两块 .. 修改一下里面的内容 .. 标签上的文字 ... 还有对应的值 ..

这块内容的下面是具体型号的产品参数 .. 分成了四栏显示 ..

先添加一个包装，加上一个 details 类 .. 里面用一个 semantic ui 的网格 ... .ui.four.column.doubling.stackable.centered.grid .. four column 表示网格里分成四栏 ..

每一栏内容放在一个带 column 类的容器里面 .. 具体内容放在一个带 content 类的容器里 ... 然后是标题 ... 一个 h3 ，加上一个 header 类 ..

下面是一组列表 ... 一个 div ，加上 list 类 .. 列表里的每个项目可以放在一个带 item 类的包装里面 ... 列表里的具体内容可以 content 目录下面的这个内容文字里找到 ..

再复制这块 ... 分别修改一下里面的文字内容 ...

现在我们就准备好了产品参数区域上的内容代码 ... 下面我们可以去给它们添加点样式 ...