继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

LEATH
关注TA
已关注
手记 456
粉丝 93
获赞 467

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

一、分类模块

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

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

webp

分类模块html结构

(2)css使用flex布局

webp

css结构

(3)ok,我们的分类模块的效果最终显示效果

webp

效果

二、推荐模块

1、编写recommend模块
(1)主要的html结构

webp

推荐模块html结构

(2)主要的css

webp

css结构

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

webp

首页主体效果

三、学习flex布局

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

webp

flex.png

(2)优秀文章
讲解flex的网上很多,丢两个我认为很受益的。



作者:Ewall_
链接:https://www.jianshu.com/p/d58bdcb54529


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP