发表于: 2019-04-29 23:42:00
1 771
今天完成的事情:
1.完成部分任务六
2.学习编写下拉菜单
明天计划的事情:
1.完成任务六
遇到的问题:
1.做任务六的时候用到雪碧图,搞不清楚background-position到底是作用于本身的图还是
作用于父元素
1.1 询问师兄后自己理解了一下,background-position就作用于background-image,之前
是一开始就想岔了,把background-position认为是一个单独的块作用于父元素钻了牛角尖
2.做任务六的时候发现块元素内,上行块内文字跟下行块内文字之间有间隙
2.1 询问师兄后了解到,他们之间之所以有间隙,是因为文字是内联元素,内联元素默认
的是基线对齐,上行文字对准的就是边上的空白节点,而空白节点让的行高是比文字高度
要高的,所以就跟下行文字产生了这个间隙,解决办法就是先把文字的行高设成跟文字
高度一致,然后把父元素的font—size等于0,由于fony-size会遗传,所以空白节点的文字
大小也为0了,自然也就没有行号,缝隙也可消除。
收获:
1. 学习了编写下拉菜单:
第一步:定位下拉元素:用position:relative
第二步:定义下拉的样式(显示着的那一个)
第三步:定义下拉内容(隐藏着的):设置position:absolute , display:none
第四步:定义鼠标滑过是弹出:用伪元素hover设置第一步的元素,同时设置第三部元素
设置成可见 display:block
评论