为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第17天 利用CSS技巧实现搜索及...

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

2022.09.21 22:50 46浏览

课程名称: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 分钟。

https://img1.sycdn.imooc.com/632b247000015c5318460894.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消