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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的小碗汤

推荐一款提高效率的工具

在工作中经常会遇到PDF转Word等可编辑文本情况,相信很多小伙伴用的是文字一个一个打,图片一个一个截的笨办法了。今天小编也和大家一样,准备这样搞,但是篇幅实在...

21830
来自专栏程序员互动联盟

Bitmap那些事之基础知识

前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢! 我做的一个功能就是处理手机中的应用ICON,处理无非就是...

30560
来自专栏应用案例

RIOT 与 ImageOptim - 两款 Win 和 Mac 上好用的免费图片优化无损压缩工具

不管你是网站站长、自媒体、博客作者、摄影师、设计师,还是需要在网上分享传输图片/照片的人,都希望自己上传图片耗时更短、图片体积更小,别人浏览时又能更快下载显示出...

47350
来自专栏ionic3+

【技巧】ionic3的手势Gestures

手势Gestures,ionic官网上的文档描述非常简单,就下面一段就没了,估计很多人看完直接就懵了:只有6个事件吗?

13330
来自专栏数据结构与算法

pd_ds中的hash

前言 在c++的STL中,提供了一种hash函数,其用法和map是几乎一样的,但是速度却能快接近一倍 使用方法 需要的头文件 #include<ext/pb_d...

37690
来自专栏IT大咖说

百度脑图解析:如何进行web复杂应用的渐进式开发

23320
来自专栏小文博客

腾讯云OCR文字识别“测评”

前不久有朋友为了方便工作,问我“怎么把图片中的文字提取出来”,我当时就想到手机QQ扫一扫刚好可以实现这个功能,就让他先将图片传到手机,然后再用手机QQ扫一扫 。

2.8K80
来自专栏BestSDK

Dynamsoft Camera SDK 6.0发布,轻松捕捉图像和视频流

Dynamsoft Camera SDK提供了Java api,使您可以轻松地从浏览器兼容的USB视频类(UVC)网络摄像头捕捉图像和视频流。 ? 使用基于浏览...

38260
来自专栏数据小魔方

树状图(Tree Map)

今天跟大家分享的是树状图! ▼ 树状图(treemap)是一种经常用来展示多层级数据的分析工具。主要是使用矩形的面积、颜色、来显示复杂的层级数据关系,能够直观体...

685100
来自专栏郭诗雅的专栏

Three.js camera初探——转场动画实现

three.js是用javascript写的基于webGL的第三方3D库,通过它可以在网页中进行3D建模,结合上TweenMax.js动画库,在网页中实现3D动...

4.5K30

扫码关注云+社区

领取腾讯云代金券