发表于: 2018-05-12 22:06:43

1 651



今天完成的事:

1、任务八进行中,之前有经验。header+导航栏布置的都比较顺利。

2、卡在轮播图了。。这他么是什么鬼...

看来还是多看几个例子然后找模板写个Demo。

明天的计划:

1、继续任务8,尽量把轮播图理解好,写好第一个页面,实在不行我就写静态了,后面回头再看看原理。

遇到的困难:

今天主要是学习了任务7的深度思考,任务8涉及的知识点;目前困难在于轮播图。

收获:

一、关于z-indent的知识:(深度思考之一)

https://www.cnblogs.com/fogwind/p/6182828.html

文档中的层叠上下文由满足以下任意一个条件的元素形成:

  1. 根元素 (HTML),
  2. z-index 值不为 "auto"的 绝对/相对定位,
  3. 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
  4. opacity 属性值小于 1 的元素
  5. transform 属性值不为 "none"的元素,
  6. mix-blend-mode 属性值不为 "normal"的元素,
  7. filter值不为“none”的元素,
  8. perspective值不为“none”的元素,
  9. isolation 属性被设置为 "isolate"的元素,
  10. position: fixed
  11. 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值(参考 这篇文章)
  12. -webkit-overflow-scrolling 属性被设置 "touch"的元素

在层叠上下文中,其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是,其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
总结:
给一个 HTML 元素定位和 z-index 赋值创建一个层叠上下文,(opacity 值不为 1 的也是相同)。
层叠上下文可以包含在其他层叠上下文中,并且一起创建一个有层级的层叠上下文。
每个层叠上下文完全独立于它的兄弟元素:当处理层叠时只考虑子元素。
每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会 在父层叠上下文中 按顺序进行层叠。

Note: 层叠上下文的层级是 HTML 元素层级的一个层级,因为只有某些元素才会创建层叠上下文。可以这样说,没有创建自己的层叠上下文的元素 将被父层叠上下文包含。

看了一堆,我总结下。目前opasity、position:absulote/relative/fixed、transform、float,其他的没有生成过z-indent,而且生成的层叠互不影响,类比于n维空间。额...不知道理解得对不对?

二、如果是在手机上查看投票页,没有hover效果时应该怎么办?(深度思考)

简单的说就是,绑定touchstart,touchend事件,改变类。不用hover,而是触发JS的touchstart,touchend事件。

涉及到JS,看了下,目前有个印象,是BOM的东西...

进度:CSS-任务8


开始时间:2018.05.12

  

结束时间:2018.05.15


有无延期风险: 无。

禅道:http://task.jnshu.com/zentao/my-task.html




返回列表 返回列表
评论

    分享到