先去给页底单独创建一个样式文件 .. 放在 styles 目录的下面，名字是 _bottom.scss ..

把这个 html 文档放在编辑器的下边儿 ... 在底部的包装上有个 .ui.bottom .. 用它作为这块界面的样式的选择器 ..

先给底部内容的上边儿还有下边儿添加点内边距 .. padding-top .. 设置成 6% .. padding-bottom 设置成 12% ..

然后是底部里面的 header 样式 .. 也就是标题的样式 ..

font-size ，字号设置成 16 像素 .. letter-spacing .. 字间距设置成 3px ... 再它的底部添加一个 24 像素的外边距 ..

然后让文字右对齐，把 text-align 属性的值设置成 right ..

再用一个 text-transform ，设置成 uppercase .. 这样标题里面的英文就会变成大写的 ..

再设置一下 list ，列表的样式 .. 嵌套一个 item .. 列表里面的项目上面会有这个类 ..

text-align 设置成 right ，让文字右对齐 ..

padding-right ，项目右边儿添加 3 个像素的内边距 .. 因为我们的标题有两个像素的字间距 .. 在项目里面添加的这三个像素的边距可以让项目文字跟标题文字右对齐 ..

项目的下边儿可以再添加 8 个像素的外边距 ..

然后设置一下文字的颜色 .. 用 rgba 的形式表示这个颜色 ... 颜色是黑色 ... 不透明度是 .75

再添加一个媒体查询 .. @media only screen and (max-width: 767px)

设置一下 .header 在小尺寸的设备上的样式 .. 把它的文字的对齐方式设置成左对齐 text-align: left

.list ... .item ，让列表项目的文字的对齐方式也变成 left .. text-align: left

再给 .content 的下边儿添加点内边距 ... padding-bottom: 24px