【九月打卡】第17天 利用CSS技巧实现搜索及 banner 区域布局，使用 flex 布局实现图标列表布局，首页布局收尾

课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节：8-6 利用CSS技巧实现搜索及 banner 区域布局，8-7 使用 flex布局实现图标列表布局，8-8 首页布局收尾

主讲老师：Dell

课程内容：

今天学习的内容包括：利用 CSS 技巧实现搜索及 banner 区域布局，使用 flex 布局实现图标列表布局，首页布局收尾。

今日知识点：
图片加载时防止抖动，图片父元素的设置样式
.banner {
    height: 0;
    overflow: hidden;
    padding-bottom: (图片高度/图片宽度)%
}
原理：网速慢的情况下图片没有下载完，但这个 css 能先把图片的位置预留，这样就不会出现图片加载时把后面的内容顶下去导致内容跳动的情况

示例代码：
<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/超市.png">
    <p class="icons__item__desc">超市便利</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/菜市场.png">
    <p class="icons__item__desc">菜市场</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/水果店.png">
    <p class="icons__item__desc">水果店</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/鲜花.png">
    <p class="icons__item__desc">鲜花绿植</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/医药健康.png">
    <p class="icons__item__desc">医药健康</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/家居.png">
    <p class="icons__item__desc">家居时尚</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/蛋糕.png">
    <p class="icons__item__desc">蛋糕烘焙</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/签到.png">
    <p class="icons__item__desc">签到</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/大牌免运.png">
    <p class="icons__item__desc">大牌免运</p>
</div>

<div class="icons__item">
    <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/红包.png">
    <p class="icons__item__desc">红包套餐</p>
</div>

课程收获：

今天用把这个仿京东到家的项目的首页部分的布局学完了。老师讲得很细致，布局的也很巧妙，想起以前自己做后端时前端页面总是凑合能用就行😅。今天学了三个小节，预计明天可以把第八章学完。

今日课程学习时间大约花费 22 分钟。