第一模块
课程信息
课程名称：前端工程师
课程章节：过渡项目实战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>第三模块
学习收获与心得：
写代码的时候要伴随技术文档，不管是方便自己以后的阅读和快速回顾，还是方便他们对代码进行重构编辑， 都是非常必要的。一个人的对手不是别人，而是自己，不是自己的智商，而是自己的懒惰。惰于思考。
第四模块
学习完毕打卡截图：
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦