14、商品分类等模块及flex布局

前言：写个分类的模块和推荐专区等模块内容，这章主要是一些页面结构的撰写，没有什么技术难点，主要是flex的布局要好好了解一下。 github：https://github.com/Ewall1106/mall

一、分类模块

1、进入home页面编写分类模块

2、编写页面 （1）主要的html结构就是这样

分类模块html结构

（2）css使用flex布局

css结构

（3）ok，我们的分类模块的效果最终显示效果

效果

二、推荐模块

1、编写recommend模块 （1）主要的html结构

推荐模块html结构

（2）主要的css

css结构

2、完成了推荐模块，最后我们的首页主体就是这幅模样

首页主体效果

三、学习flex布局

这是这本章节的重点，大家可以看到在我的页面基本布局中大量使用了flex布局，所以我觉得这个很重要。 （1）这是对flex的语法总结的一份思维导图，大家可以看看

flex.png

（2）优秀文章 讲解flex的网上很多，丢两个我认为很受益的。 阮一峰老师的：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 微信文档：https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=00080e799303986b0086e605f5680a