项目考察点：弹性布局、伪类、base64
1、弹性布局
弹性布局中心思想就是将父容器设为display: flex，它的所有子元素自动成为容器成员。
在本项目中，可以分为两个大盒子：.row-center和.wrap，其中.wrap内又有两个盒子.row-1和.row-2，如图所示：
界面布局划分
- .row-center内项目是居中的，使用 justify-content:center。
- .wrap内项目需要两端对齐，使用justify-content:space-between。
- .row-1内项目从左往右排列，使用justify-content:flex-start。
- .row-2内项目从又往左排列，使用justify-content:flex-end。
WXSS如下：
.row{
display: flex;
}
.row-center{
justify-content:center;
}
.wrap{
display: flex;
justify-content:space-between;
}
.wrap .row-1{
justify-content:flex-start;
}
.wrap .row-2{
justify-content:flex-end;
}
观察row-1结构：
<view class='row row-1'>
<view class='item'>
<image class='img-style' src='../../images/3.jpg'></image>
<text class='item-name'>姑父</text>
</view>
<view class='item'>
<image class='img-style' src='../../images/4.jpg'></image>
<text class='item-name'>姑姑</text>
</view>
<view class='item'>
<image class='img-style' src='../../images/8.jpg'></image>
<text class='item-name'>表弟</text>
</view>
</view>
我们发现.row-1内的项目 item 之间是兄弟关系，而第三个 item 却在下一行，这时就要给盒子.row-1设置flex-wrap: wrap让 item 在一行排不下的时候自动换行。.row-2同理。
.row{
display: flex;
flex-wrap: wrap;
}
2、伪类
观察标题.title结构：
<view class='title'>我们这一家</view>
标题只有一行代码，那么就需要用到伪类::before和::after实现[图片]和[图片]这两部分。content 属性与 ::before 及 ::after 伪元素配合使用，来插入生成内容。因为本项目只需要插入背景图片，因此content设置为空。
.title::before{
content: '';
display: block;
position:absolute;
left:-36rpx;
top:8rpx;
width:36rpx;
height:32rpx;
background-size: cover;
background-image: url(`http://xxxxxxxx`);
}
.title::right{
content: '';
display: block;
position:absolute;
right:-36rpx;
top:8rpx;
width:36rpx;
height:32rpx;
background-size: cover;
background-image: url(`http://xxxxxxxx`);
}
当只需要给相同元素中第一个元素设置样式的时候，可以使用伪类:first-of-type。因此照片间距我们只需要给每个.row中第一个子元素 item 设置 margin-right 。
.item:first-of-type{
margin-right:14rpx;
}
3、base64
由于 WXSS 中不支持引入本地图片，因此在 WXSS 使用 background-image 引入图片时，只能使用网络图片或将本地图片转为 base64 。
两种方式优缺点：
- 引用网络图片代码相对简单，但缺点是需要将图片上传服务器。
- 将本地图片转为 base64 的好处是减少 HTTP 请求，但由于 base64 编码会导致图片体积变大，因此适合小尺寸的图片。
- 网络上有许多 base64 图片在线转换工具，比如 http://imgbase64.duoshitong.com/。
