2020-01-13_css触动修改/缩放显示说明/发现/z-i

2020-01-13  本文已影响0人  强化班_刘敬辉

问题描述:css触动修改

昨天是将A和B分开处理,触动A之后显示B,A、B是两个不同的个体,因此当移动到B上之后,没有再触动A就使得B内容消失。

解决方案:将A、B两部分放置在C中,其中A显示,B隐藏,当触动C时再让B显示,这样因为B在C内所以,在移动过程中,B不会消失。

同时对B的css中使用position:absolute;使得A位置不发生变动。

问题描述:缩放显示说明

非双层控制:只用div_2就可实现,原理是body相当于一个大的div_1。使用双层控制的好处是,可以对div_1的背景设置颜色,那样的好处是可以在页面缩放时,色带依旧存在。

发现:相邻class的float设置left时各元素内容正常方向显示,设置right后将按照反方向显示。

 class值为nav-item float:left;

产生效果:

正序方向 float:right;

产生效果:

逆序方向

z-index的使用:对需要进行的兄弟元素使用absolute(绝对)或者relative(相对)定位。


min/max-hight/width

模块化处理,相同方法成块,使得代码简洁化。

上一篇下一篇

猜你喜欢

热点阅读