发表于： 2020-04-23 21:35:53
1 1376
今天的任务：
①完成任务7，并解决了在做任务中遇到的诸多问题，
②利用伪元素：hover来达到鼠标滑过方块出现额外内容的目的：
要保证下面的四个小方框和黄色的方框要处于同一个父级元素内，并且要对父级元素进行hover操作，hover只能对元素本身和它的子元素或者同级进行操作，不能对上一级元素进行操作。
注意：
.父:hover .子{} 的命名，子元素可以同时添加多个同级，也可以用相同的类来代表一群子元素。
还有display: none的属性，必须加在你不想看到的那个元素里，不能添加在上级。
③刚开始导航条被挡住，后来给导航条添加z-index属性可以解决。
④设置opacity元素的所有后代元素会随着一起具有透明性，那么使用opacity实现“背景透明，文字不透明”是不可取的。
刚开始直接添加opacity结果如下：
所以要css3的rgba
使用说明：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度
background: rgba(70,184,218,0.8);
按钮背景颜色不被影响
再设置z-index
ok，结果如下：
明天的任务：
总结前面完成的任务，开始任务8.
返回列表
评论