课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：8-6 利用CSS技巧实现搜索及 banner 区域布局，8-7 使用 flex布局实现图标列表布局，8-8 首页布局收尾
主讲老师：Dell
课程内容：
今天学习的内容包括：利用 CSS 技巧实现搜索及 banner 区域布局，使用 flex 布局实现图标列表布局，首页布局收尾。
1 2 3 4 5 6 7 8 | 今日知识点：图片加载时防止抖动，图片父元素的设置样式.banner { height: 0; overflow: hidden; padding-bottom: (图片高度/图片宽度)%}原理：网速慢的情况下图片没有下载完，但这个 css 能先把图片的位置预留，这样就不会出现图片加载时把后面的内容顶下去导致内容跳动的情况 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 示例代码：<div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/超市.png"> <p class="icons__item__desc">超市便利</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/菜市场.png"> <p class="icons__item__desc">菜市场</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/水果店.png"> <p class="icons__item__desc">水果店</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/鲜花.png"> <p class="icons__item__desc">鲜花绿植</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/医药健康.png"> <p class="icons__item__desc">医药健康</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/家居.png"> <p class="icons__item__desc">家居时尚</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/蛋糕.png"> <p class="icons__item__desc">蛋糕烘焙</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/签到.png"> <p class="icons__item__desc">签到</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/大牌免运.png"> <p class="icons__item__desc">大牌免运</p></div><div class="icons__item"> <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/红包.png"> <p class="icons__item__desc">红包套餐</p></div> |
课程收获：
今天用把这个仿京东到家的项目的首页部分的布局学完了。老师讲得很细致，布局的也很巧妙，想起以前自己做后端时前端页面总是凑合能用就行😅。今天学了三个小节，预计明天可以把第八章学完。
今日课程学习时间大约花费 22 分钟。
点击查看更多内容
为 TA 点赞
0 评论
共同学习，写下你的评论
暂无评论
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦