下面去设计一下这块区域的样式 ... 把这个 html 文档分离到编辑器的下面 ... 这样在写样式的时候，你可以参考这块区域的代码结构 ...

打开 story 的样式文件 ..

添加一个 &.vertical .. 在这个区域的上面除了 ui story 还有一个 vertical 类 ..

里面用一下 background，先把背景设置成白色 .. #fff

然后让它变成一个 flexbox .. display:flex ... 再把 flex-direction 设置成 column ...

底边儿留出 12% 的内边距 ...

再设置一下内容的样式 ... 添加一个 .content .. 里面用一下 text-align ，把它设置成 center ... 添加 10% 的内边距 .. padding: 10%

content 里面包装了 header 还有 description ，我想让它们可以水平居中在这个 content 包装里面显示 ..

先让它变成一个 flexbox ... display:flex ，再把 flex-direction 设置成 column

然后让它里面的元素居中，可以把 align-items 属性的值设置成 center

再设置一下文字里的大标题 .. 元素上有个 header 类，用它作为样式的选择器的一部分 ..

font-size，字号设置成 36px ... margin-bottom ，在底边儿添加一个 32 像素的外边距

description

标题的下面是描述 ... 元素上有个 description ...

把它的宽度设置成 70% ... font-size 字号设置成 20px ... 然后用一个 line-height ，把行间距设置成 1.5 倍 ..

如果这个元素里面的文字是在段落标签里面，你还得单独设置一下它里面的段落标签的行间距 ... 也把它设置成 1.5 ...

这个描述文字让它细一点，这里可以设置一下它的字体 ...

font-family: "PingFangSC-Ultralight";

再用一个 color ，设置一下文字的颜色 ... 可以使用 rgba 的形式表示 ... 颜色是黑色 .. 不透明度设置成 .5

image

然后是这个区域里的图片的样式 .. 包装元素上有个 image 类，设置一下它里面的 img 标签的样式 .. 把图像的宽度设置成 100% ..

mobile

在小尺寸的移动设备上，样式会有点不一样 .. 可以先写一个媒体查询 ..

@media only screen and (max-width: 767px)

里面先添加一个 .content ，再嵌套一个 header ，把标题的字号设置的小一点 .. 大小可以是 24px ..

再添加一个 description ，重新再设置一下它的宽度 ... 可以是 85% ... 字号也可以小一点 ... 设置成 16px ...

再预览一下 ...