发表于: 2018-08-07 23:10:27

1 624


今天完成的事情:


1.研究了下修真院首页线上学习的页面中小方块鼠标从哪边进,hover内容就从哪边展开的效果,自己用css试着写了一下,最为相似的想法是用四个三角形覆盖在div上,然后对三角形设置hover,但是在css中三角形只能用border+transparent来实现,但是这样三角形以外区域还是会有hover判定,所以无法实现.最终得出结论:不用js没有办法完成.......


2.响应式导航:由于要一个点击事件,所以无法用纯css实现,而只能用bootstrap,而bootstrap的响应式导航外联了一个jquery.min.js文件,而我下的bootstrap没有jQuery文件,只有js文件,导致网页缩小后导航栏按钮点击没反应.


3.了解了下flex-grow、flex-shrink、flex-basis的区别于用法:

  

  (1)flex-grow和width效果是一样的

   

  (2)flex-shrink 当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。flex-shrink:1;其效果和flex:1差不多,只不过分配的是剩余空间.

   

  (3)flex-basis: 当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。这个是当元素溢出时自动缩小比率.

明天计划的事情:


1.响应式导航,任务8几个网页的媒体查询再优化下


遇到的问题:bootstrap的响应式导航外联了一个jquery.min.js文件,而我下的bootstrap没有jQuery文件

收获:

1.flex-grow、flex-shrink、flex-basis的区别和用法,感觉最实用的就是flex-shrink了.


返回列表 返回列表
评论

    分享到