继上次利用微信小程序开发者工具进行了简单的排版，做出一张可爱的恐龙学院电子校园卡后，这次继续深入学习，对首页开发进行了简单的实践。

1.首页相当于一整个盒子模型，每一个板块都相当于一个小盒子，我们第一步要做的就是先把最小的盒子设计好，图片、字体的内容、大小以及美化通过类函数联系.wxml和.wxss都能够很简单地设计出来。

2.当把小盒子的内容设计好之后，就要开始设计他们的父容器将所有的子盒子包裹起来，这就需要利用很多的函数嵌套，在这里由于函数数量过多，如果代码之间没有缩进将会让人看得眼花缭乱，我们只需要选中代码并且右键鼠标，选择格式化文档，就能轻松地让代码具有缩进，代码结构就一目了然，犯错的概率就会下降。

3.当大体的父容器和子盒子结构都设计好后，就需要利用flex来对子盒子在父容器进行排版，有兴趣的小伙伴可以自行去flex的网站进行了解和实践：https://coding.imweb.io/demo/flex/index.html。flex结构可以缩减很多代码，例如我们不再需要在每个子盒子进行margin设置，可以直接利用flex中的justify-content：space-around就能让上下左右四个子盒子之间保持适当的距离，如果你只想保证同一行的子盒子之间的间距，也可以使用justify-content：space-between就能实现，使得子盒子在父容器之中可以更好的排版，还有许多功能我就不一一赘述了，大家可以自行探索。

4.除此之外，position也是一个十分好用的定义位置的函数，relative用于设置参考系，absolute用于确定绝对位置，方便于子盒子在子盒子中的位置定位和排版，例如名片的制作就运用了position来进行图片之间的定位。

下面是我的具体代码：

.wxml部分：

.wxss部分：

程序运行结果图（手机上实际的）：

由于没有合适的图标样式，所以下方图处有一点难看，违背了小程序要美观的原则。除此之外，还有一点要注意的是，图标大小的设计尽量使用百分比作为单位，如果以像素px做单位，那么在不同手机型号上看到的效果是不一样的，也许你在开发者工具上看起来很不错，但只要你的手机机型和开发者工具里设置的机型不一样，图片就会出现空缺、位置不正确的情况。

以上就是我这次的学习心得分享，希望对大家有帮助。