发表于： 2018-11-04 21:07:48
1 605
今天完成的事情：今天接着昨天画图二，配置footer，把小方块分成两块，分别配置，这些都做完，在加鼠标悬浮窗时，发现
：hover标签属性对鼠标移到的元素及其他的后代，所以悬浮窗必须写在跟小方块一个div里
而鼠标悬浮窗原理其实就是给悬浮窗一个display：none属性，鼠标一过来后，改变其属性，比如display：block；
所以如果悬浮窗与小方块一个层级，当悬浮窗隐藏时，不会占据空间，小方块排列就会受影响。
于是就给悬浮窗一个绝对定位，而且其父级元素div也要有定位属性，不然定位基准会是html：
然后margin设置负值用处很大：
图中文字原本的上下间距很大，因为整体用的flex布局，padding和margin正值只能让间距越来越大，而margin负值解决了这一问题，他不单纯是让元素向反方向移动，而且没有实际的外边距出现，具体实现原理我会接着学下去。
然后就是画出了图三，用到了新元素opacity，直接设置元素0.1~1即可。
不过这样书写opacity：0.5；其子元素也继承其属性，而且无法单独设置透明度。
- opacity: 0.6;
- width: 100%;
- height: 60px;
- position: fixed;
- bottom: 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: rgb(40, 190, 224);
我用的是背景rgb书写，用逗号隔开加上透明度：
这样只有其自身会改变透明度。
完整图：
明天计划的事情：明天把各按钮加上链接，让它们之间有关联，完成任务7.
遇到的问题：问题在上面已经提到了，也都解决了。
收获：学到了margin负值运用，和悬浮窗使用。
返回列表
评论