前言:写个分类的模块和推荐专区等模块内容,这章主要是一些页面结构的撰写,没有什么技术难点,主要是flex的布局要好好了解一下。
github:https://github.com/Ewall1106/mall
一、分类模块
1、进入home页面编写分类模块
2、编写页面
(1)主要的html结构就是这样
![img_353cd77f5a244e0ec195d5d059233e5c.png](https://yqfile.alicdn.com/img_353cd77f5a244e0ec195d5d059233e5c.png?x-oss-process=image/resize,w_1400/format,webp)
分类模块html结构
(2)css使用flex布局
![img_90d1faedb338fdf5ea45982b57ca0d00.png](https://yqfile.alicdn.com/img_90d1faedb338fdf5ea45982b57ca0d00.png?x-oss-process=image/resize,w_1400/format,webp)
css结构
(3)ok,我们的分类模块的效果最终显示效果
![img_cc08e51a8515fd44ac420d6211468fbb.png](https://yqfile.alicdn.com/img_cc08e51a8515fd44ac420d6211468fbb.png?x-oss-process=image/resize,w_1400/format,webp)
效果
二、推荐模块
1、编写recommend模块
(1)主要的html结构
![img_65fc52363f9d0c97f3e1dc884cc20f18.png](https://yqfile.alicdn.com/img_65fc52363f9d0c97f3e1dc884cc20f18.png?x-oss-process=image/resize,w_1400/format,webp)
推荐模块html结构
(2)主要的css
![img_428501b467f9a1bb551e7d19f74ca0e9.png](https://yqfile.alicdn.com/img_428501b467f9a1bb551e7d19f74ca0e9.png?x-oss-process=image/resize,w_1400/format,webp)
css结构
2、完成了推荐模块,最后我们的首页主体就是这幅模样
![img_86bcc72cb98de52a0a98324d4d87ef56.png](https://yqfile.alicdn.com/img_86bcc72cb98de52a0a98324d4d87ef56.png?x-oss-process=image/resize,w_1400/format,webp)
首页主体效果
三、学习flex布局
这是这本章节的重点,大家可以看到在我的页面基本布局中大量使用了flex布局,所以我觉得这个很重要。
(1)这是对flex的语法总结的一份思维导图,大家可以看看
![img_dd599f07a64e44d66c0f2f354294ef59.png](https://yqfile.alicdn.com/img_dd599f07a64e44d66c0f2f354294ef59.png?x-oss-process=image/resize,w_1400/format,webp)
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