发表于: 2018-12-03 21:46:46
1 927
今天完成的事情:
1、完成了任务二页面的编写。
之前在昨天日报中的问题卡了好久,今天总算是通过在div外面再嵌套div,给最大的父级设置flex,然后通过fiex-direction:column属性让我写的九个div成上下排列。
没用之前的效果:
使用之后的效果:
在通过给最大父级的下一子级设置justify-content:space-around属性,就能让div之间保持相等的距离。如图:
这就是flex的强大,只需要这几个属性值就可以解决了,因为嵌套的盒子太多,有九个盒子,然后每个盒子套了好几个,导致今天看代码都看晕了。。
2、完成了audio音频的插入路径。
昨天看了audio音频的资料,但是在写的时候没有显示控件,后来发现是代码语法写错了,我直接在菜鸟中复制了写法,audio中的src属性。
<audio controls>
<source src="..." >
<source src="mp3" >
但是遇到了一个问题,因为控件的width不能调太小,不然就不能按键触发,但是给它加right值就会把上面的空间挤大,导致整个移动端页面就有边距空隙,后来参考了下指导师兄的日报,发现了师兄的操作很溜,用transform来转换它的方向,就可以解决这个问题。很厉害(鼓掌!)
如下图:
这个是没有转换的效果,调right值就把旁边的空间撑大了。
这是使用transform: rotate(180deg);把顺序调换了下,这样就不用调它的边距值。
就可以解决这个问题。
3、对于hover怎么设置出效果有了一点了解。
hover是不能同级之间作用的,例如这次任务是要触及盒子就会有hover效果,所以给作用的那个父级设置就行。然后要用到display:none属性隐藏它。
4、完成任务的提交审核,但是有些问题需要修整,第二个页面需要自适应,需要用到vh和vw知识点,这个需要明天去了解下,之前在任务一中接触过,但是看不懂,明天去查下资料。
明天的计划:
1、完成问题的修改,重新提交审核。
2、学习vh和vw知识。
问题:
在完成事情里。
收获:
收获了audio属性的使用。position可以和flex一起使用。
评论