我已经把这组卡片组件的内容都准备好了 .. 你可以把项目切换到特定的标签上，这样你就会看到这些内容 .. 打开命令行，在项目所在的目录的下面 .. 执行一下 git checkout v8.2.3-start

下面我们去给这些卡片组件设计样式 .. 在项目的 app 目录下面的 styles 这里，创建一个样式文件 .. 名字是 _card.scss

再打开 main.scss ... @import ，导入 card

回到这个 card 样式 .. 每个卡片组件的包装上面都有一个 .ui.card ，表示同时包含 ui 还有 card 这两个类的元素 ..

先用一个 background ，把容器的背景设置成白色 #fff

再把卡片的图像包装里面的图片的宽度设置成 100% ..

.image > img {width: 100%}

然后是内容的样式 .. 内容的包装上面有个 .content 类，用它作为这块样式的选择器 .. 先用一个 padding ，添加点内边距 .. 大小是 40 像素 ..

再让底部的内边距大一些 .. padding-bottom ... 大小是 56 像素 ..

再设置一下大标题 ... 可以把这个样式嵌套在这个 content 里面 .. > .header ... 这个大于号的意思是，这个 header 是 content 的直接子元素 ..

因为这个样式嵌套在了 content 里面，所以大于号的前面就相当于是这个 .content ..

里面用一个 font-size .. 设置一下字号 .. 大小是 24px .. 再用一个 margin ，把外边距设置成 0 .. 大标题的下面可以添加点外边距 .. margin-bottom ，大小是 24像素 ..

再设计一下子标题的样式 .. .sub.header .. 字号设置成 14px .. font-weight 设置成 600 ... 然后添加点字间距，用的是 letter-spacing ，大小是 3 像素 ..

再让它里面的内容变成大写的 .. 把 text-transform 的值设置成 uppercase

.sub.header {
font-size: 14px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}

在我们的设计里标题的下面有一条小横线 .. 这个小横线的样式我们可以把它放在标题元素的 after 这个伪元素上面 ..

这个样式选择器可以这样写 ..

> .header:after

:after 就是设置一下元素的 after 这个伪元素 .. 里面先用一个 content .. 设置一下这个 after 里的内容 .. 用一个空白的字符 .. 再添加一个 display 属性，把它设置成块级元素 .. block ..

再用一个 border-bottom，在它下面添加一个边框 .. 大小是 2 像素， solid ，表示实线，颜色是 #000，表示的是黑色 ..

再用一个 padding-bottom ，添加一个 8 像素的底边儿的内边距 ..

> .header:after {
content: " ";
display: block;
border-bottom: 2px solid #000;
width: 40px;
padding-bottom: 8px;
}

然后是内容里的描述 ... .description .. 给它添加一个 8 像素的底边儿的外边距 ...

现在我们这个卡片组件的样式，就基本上做好了 ...