发表于: 2018-09-02 23:59:04

1 697


完成的事情:

学会了雪碧图的制作和使用方式,https://www.toptal.com/developers/css/sprite-generator     用了这个在线的雪碧图合成网站,并给出了每个小图标在雪碧图中的位置,使用background-image:  url(task6sprite.png) -.2rem -.2rem; image和position来选择需要显示的图片,position属性可以和image属性简写在一起。图片的垂直居中使用了position:absolute, 

top:50%

transform:translatey(-50%);

tranlatey(-50%)数值是以元素自身的高度来进行的偏移。


使用了两个button 按钮并撑起了父元素的高度,给垂直居中使用了父元素的padding-top/bottom.


尝试使用css模拟了下拉框,只要是使用display:inline-block、 display:none 和伪类hover, 给下拉框需要显示的部分设置inline-block和hover {display:block;} 下拉框的选项部分设置display:none,鼠标悬停在下拉框时,hover的display:block生效,选项部分呈现,离开时消失。


明天计划的事情:

完成任务六,整理任务六用到的知识并巩固。


遇到的困难:

在做下拉框部分的时候,查到的资料很多都是使用使用css进行修改<select>元素,后者是css模仿下拉框的过程及其复杂,看过之后没有发现关键点在哪里。如果只是不同的模仿普通下拉框,使用 display:inline-block、 display:none 和伪类hover就可以达到。


收获:

学会了雪碧图的制作和使用方法,对背景图片的定位方式更加熟悉,可以使用css来进行下拉框的模拟。






返回列表 返回列表
评论

    分享到