发表于： 2017-03-22 23:44:26
2 647
今天完成：
完成任务7，处理页面三半透明和页面二的简单隐藏效果，看任务8相关资料
明天计划：
继续任务8 切图 任务7要是没通过就修改任务7
遇到困难：
1、页面二本打算用使用display的none和block两个属性。默认情况下设置二级ul的display属性为none；鼠标滑过时dispaly属性为block，但是不能一直存在而且实用性不是很好。接着看了师兄的代码查到了使用opacity来隐藏。
.img-a{
padding-top: 1rem;
width: 100%;
opacity: 0;
}
.col-xs-4:hover .img-a{
opacity: 1;
}
2、页面三的半透明也想用opacity实现，但是会将内容一起隐藏，查了资料可以使用rgba（255,2，2,0.5）最后的0.5就是透明度，可以避免将内容一起隐藏。
3、昨天再写自适应的时候学会了使用vw，但是今天发现vw会一直随着屏幕的变化而变化，并不会受max-width的限制，导致在过宽的时候出现变形。最后还是换回了rem，使用媒体查询实现响应。
收获：
学会了两种处理透明度的方法，更加了解vw和rem的区别
返回列表
评论