b站pink老师前端代码学习

代码都是自己看视频敲得，视频链接在下面

先上效果图

b站pink老师前端代码学习

主要用的就是定位，蛮简单的，代码如下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>防土豆显示及隐藏</title>
       <style>
           .tudou{
               position: relative;
               height: 320px;
               width: 444px;
               margin: 50px auto;


           }
           .tudou img{
               height: 100%;
               width: 100%;
           }
           .mask{
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: rgb(0,0,0,.3) url(img/arr.png) no-repeat center;
           }

.tudou:hover .mask{
display: block;
}

       </style>
   </head>
   <body>
       <div class="tudou">
           <img src="img/tudou.jpg"/>
           <div class="mask"></div>


       </div>
   </body>
</html>

b站pink老师前端代码学习

相关推荐