艾瑞巴蒂，上一章我们完成了小程序首页-楼层的基本设置，图片已全部显现。
这节课我们来魔法变身，让它更美观！
1、 打开index.less文件，写入标签结构：
.index_floor{
.floor_group{
.floor_title{
image{}
}
.floor_list{
navigator{
image{}
}
}
}
}结构递进关系是：
floor——floor_group——floor_title-floor_list
其中，floor_titl与floor_list是并列的两个属性。
2、 改变"时尚女装"图片的大小，使其看起来更合适。
我们继续补充上面的代码内容，在"floor_title"内的image标签内，补充宽度设置代码：
同时，在index.wxss文件中，补充宽度"width"的代码：
保存，可看到小程序页面的"时尚服饰"图片的宽度已变宽变合适：
3、 修改标题下方的内容部分。
比较修改前后的图片效果（如下图），
可看到"成型"的小程序，每张图片是页面宽的1/3，
并且后三张图片的高度是第一张图片的1/2。
我们继续在index.less文件中进行补充，找到floor_list这部分，写入代码：
.index_floor .floor_group .floor_title image {
width: 100%;
}
.index_floor .floor_group .floor_List navigator {
float: left;
width: 33.33%;
}
.index_floor .floor_group .floor_List navigator image {
width: 100%;
}
同时在index.wxss文件中，写入代码：
.index_floor .floor_group .floor_title image {
width: 100%;
}
.index_floor .floor_group .floor_List navigator {
float: left;
width: 33.33%;
}
.index_floor .floor_group .floor_List navigator image {
width: 100%;
}
保存代码，看到小程序的界面发生变化：
楼层部分变得跟成型的差不多了，
但是我们看"户外运动"、"箱包服饰"等部分的图片按照后四张是第一张图高度的1/2，是不合适的：
所以，我们上节课在index.wxml文件中，
简单粗暴地在image标签内加入mode属性的有效值"widthFix"，
让图片自适应是不合理的，要进行修改。
我们可手动让后四张图片的高等于第一张的1/2，且高度要随界面的变化而等比例变化。
所以，这里先计算一下图片的比例关系：
（1） 点击调试器-wxml，复制第一张图片的路径，粘贴至浏览器内并打开：
（2） 鼠标右键"审查元素"，查看图片的大小，可看到原图为232*386rpx：
（3）在index.less文件中，写入后四张图片的超链接，代码如下（关于原图等比例的换算过程也写到里面了）：
保存后，我们在index.wxss文件可看到，系统已将图片的高度自动计算出来了：
（4） 将index.wxml文件中image标签的mode属性的有效值由"widthFix"改为如下：
保存，小程序的页面呈现如下，可看到三组图片的分割宽度都很合适：
但是，从成型的小程序来看，上下图片之间要有间隔，我们要加上边框：
（1） 先来加左边框，在index.less文件中加入两行代码，如下：
保存，看到图片的左侧已出现白色边框：
（2） 继续给2、3张图片加上下边框，index.less文件中写入代码：
保存，可看到图片已出现下边框：
（3） 调整"户外运动"与"时尚女装"组之间的空隙，使其有点儿空隙，以进行区分：
代码如下：
padding: 10rpx 0; 这行代码表示图片的上下内边距设置为10rpx,左右内边距为0rpx。
保存代码，效果出现：
好了，
到这里，我们对首页-楼层的设置、美化样式工作已全部完成，你学会了吗？
欢迎大家实际操作起来，在留言区表达自己的看法，交流学习心得哦~~