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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,039评论 3 119
  • 父亲打来电话,说母亲上山放羊,不小心摔断了一条胳膊。一个小时后,我匆匆赶到医院,见到了手术后还处于麻醉状态的母亲。...
    石林007阅读 2,649评论 0 4
  • 咔咔君阅读 1,111评论 0 0
  • MyBatis是一个可以自定义SQL、存储过程和高级映射的持久层框架。MyBatis 摒除了大部分的JDBC代码、...
    七寸知架构阅读 11,680评论 6 56