[北京|结业弟子]JS-顾仁鹏|2018年11月04日的日报-技能树.IT修真院

发表于： 2018-11-04 21:07:48

1 604

今天完成的事情：今天接着昨天画图二，配置footer，把小方块分成两块，分别配置，这些都做完，在加鼠标悬浮窗时，发现

：hover标签属性对鼠标移到的元素及其他的后代，所以悬浮窗必须写在跟小方块一个div里

而鼠标悬浮窗原理其实就是给悬浮窗一个display：none属性，鼠标一过来后，改变其属性，比如display：block；

所以如果悬浮窗与小方块一个层级，当悬浮窗隐藏时，不会占据空间，小方块排列就会受影响。

于是就给悬浮窗一个绝对定位，而且其父级元素div也要有定位属性，不然定位基准会是html：

.content-box{
width     : 24vw;
height    : 24vw;
background: #f5c97b;
border    : 1.4vw solid #fff;
position  : relative;
}
.identity{
display  : flex;
height   : 80%;
font-size: 4vw;
}
.number{
display   : flex;
height    : 21%;
background: #83b09a;
font-size : 2vw;
color     : #fff;
}
.skill{
position: absolute;
top     : 24vw;
left    : -1.4vw;
display : none;

<div class="content-box">
<div class="identity align-items-center justify-content-center">水民</div>
<div class="number align-items-center justify-content-center">1号</div>
<img class="skill" src="skill.png" width="115%" alt="">
</div>

然后margin设置负值用处很大：

.top-word{
padding-left : 10vw;
font-size    : 3vw;
color        : #fff;
margin-bottom: -2vw;
}

图中文字原本的上下间距很大，因为整体用的flex布局，padding和margin正值只能让间距越来越大，而margin负值解决了这一问题，他不单纯是让元素向反方向移动，而且没有实际的外边距出现，具体实现原理我会接着学下去。

然后就是画出了图三，用到了新元素opacity，直接设置元素0.1~1即可。

不过这样书写opacity：0.5；其子元素也继承其属性，而且无法单独设置透明度。

.footer {

我用的是背景rgb书写，用逗号隔开加上透明度：

background     : rgb(40, 190, 224,0.6);

这样只有其自身会改变透明度。

完整图：

明天计划的事情：明天把各按钮加上链接，让它们之间有关联，完成任务7.
遇到的问题：问题在上面已经提到了，也都解决了。
收获：学到了margin负值运用，和悬浮窗使用。

返回列表

【任务7】 [北京|结业弟子]JS-顾仁鹏 | 2018年11月04日 的日报 中品

评论

分享到

【任务7】 [北京|结业弟子]JS-顾仁鹏 | 2018年11月04日的日报中品