发表于: 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了.
评论