现在我们要去把页面上的这个英雄区的设计使用代码的形式表示出来 .. 这个英雄区可以是一个幻灯片 .. 我们可以先做出它的普通状态 .. 就是单独的一张幻灯片 ..

会有一个大的图片 .. 上面会靠左，大概垂直居中的准备上有一些文字 ..

这里会用到 css 的 flexbox ，让这块内容在垂直居中的位置上显示 ...

图片可以使用绝对定位 .. 这个图片还要响应设备的宽度 ..

在小尺寸移动设备上 .. 文字会在图片的下面显示 .. 使用 css 的 flexbox ，可以去控制子元素的顺序 ..

就是你可以让文字代码，在图片代码的上面出现，如果你想让文字显示在图片的下面，可以把包装它们的容器的显示设置成 flex ..

然后再去设置文字的包装的顺序属性，还有图片的顺序属性 ..

先打开命令行工具 .. 进入到项目所在的目录 .. 执行一下 gulp serve ..

创建一个本地的服务器 ..

新建一个命令行标签 .. 再执行一下 gulp watch-ui ..

然后再用编辑器打开项目 ..