为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第9天 前端工程师学习笔记

【金秋打卡】第9天 前端工程师学习笔记

2022.11.09 22:26 55浏览

第一模块

课程信息

    课程名称:前端工程师

    课程章节:过渡项目实战1

    课程讲师:

第二模块

课程内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡效果实战课1</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1200px;
overflow: hidden;
margin:40px auto;
}
.box ul li{
float: left;
width: 380px;
height: 210px;
position: relative;
}
.box ul li img{
width: 380px;
height: 210px;
}
.box ul li .info{
position: absolute;
bottom: 0;
width: 370px;
height: 30px;
line-height: 30px;
color: white;
padding-left: 10px;
background-color: rgba(0,0,0,.5);
/* 透明度设置为0,不是背景的透明度,而是整体的透明度 */
opacity: 0;
/* 过渡 */
transition: opacity 1s ease 0s;
}
/* 当li被触碰的时候,内部的info盒子就要把透明度变为1 */
.box ul li:hover .info{
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.jpg" alt="">
<div class="info">北京的故宫</div>
</li>
<li>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" alt="">
<div class="info">十七孔桥</div>
</li>
<li>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg" alt="">
<div class="info">国家大剧院</div>
</li>
</ul>
</div>
</body>
</html>

第三模块

学习收获与心得:

写代码的时候要伴随技术文档,不管是方便自己以后的阅读和快速回顾,还是方便他们对代码进行重构编辑,
都是非常必要的。一个人的对手不是别人,而是自己,不是自己的智商,而是自己的懒惰。惰于思考。

第四模块

学习完毕打卡截图:

https://img1.sycdn.imooc.com/6375bae3000193dd20381098.jpg

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

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

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
0
获赞与收藏
0

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消