美文网首页让前端飞vue小程序
14、商品分类等模块及flex布局

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

作者: ComfyUI | 来源:发表于2018-06-27 16:24 被阅读122次

    前言:写个分类的模块和推荐专区等模块内容,这章主要是一些页面结构的撰写,没有什么技术难点,主要是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

    相关文章

      网友评论

      • 78a997385f41:请问怎么自己设计那些圆形图标哇~~:relaxed:
        ComfyUI:@Vue拓荒 网上抠的,就几张图片

      本文标题:14、商品分类等模块及flex布局

      本文链接:https://www.haomeiwen.com/subject/rzxiyftx.html