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

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

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

一、分类模块

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

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

img_353cd77f5a244e0ec195d5d059233e5c.png
分类模块html结构

(2)css使用flex布局

img_90d1faedb338fdf5ea45982b57ca0d00.png
css结构

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

img_cc08e51a8515fd44ac420d6211468fbb.png
效果

二、推荐模块

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

img_65fc52363f9d0c97f3e1dc884cc20f18.png
推荐模块html结构

(2)主要的css

img_428501b467f9a1bb551e7d19f74ca0e9.png
css结构

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

img_86bcc72cb98de52a0a98324d4d87ef56.png
首页主体效果

三、学习flex布局

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

img_dd599f07a64e44d66c0f2f354294ef59.png
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

目录
相关文章
flex布局属性简介
flex布局属性简介
|
1月前
|
前端开发
FLex布局详解
Flex布局通过`flex-direction`定义主轴方向,包括横向`row`、反向横向`row-reverse`、纵向`column`及反向纵向`column-reverse`。`justify-content`控制主轴上子元素的排列,如起始端`flex-start`、末端`flex-end`、居中`center`、等间距`space-around`或两端对齐`space-between`。在Y轴上设置这些同样有效。`flex-wrap: wrap`使子元素在需要时换行。`align-items: center`实现侧轴(交叉轴)上的居中对齐
43 1
FLex布局详解
|
13天前
|
JavaScript
Vue3弹性布局(Flex)
这是一个基于 Vue 的弹性布局组件库,提供了丰富的参数配置,如宽度、方向、换行等,支持自定义对齐方式和间隙设置。在线预览展示了不同布局效果,包括单选、按钮和滑动输入条等组件的使用示例。
Vue3弹性布局(Flex)
|
21天前
|
前端开发 容器
掌握弹性盒子布局(Flex):打造灵活的网页布局
掌握弹性盒子布局(Flex):打造灵活的网页布局
|
27天前
|
容器
|
28天前
|
前端开发 JavaScript API
如何在 Angular 中使用 Flex 布局
如何在 Angular 中使用 Flex 布局
27 0
|
2月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
2月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
35 1
|
2月前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
38 1
|
3月前
|
容器
一篇文章讲明白flex布局
一篇文章讲明白flex布局
23 3