2020-01-13_css触动修改/缩放显示说明/发现/z-index的使用

问题描述: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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,095评论 0 13
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,357评论 0 11
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,630评论 0 7
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,667评论 0 6
  • 长立志,但却很少成功。这是大多数人的面临的问题。究其原因,根本在于动力不足。 我们想到要做一件事的时候,常常会因为...
    遇见未来的我阅读 86评论 0 0