发表于： 2019-03-09 23:56:16
1 783
Day 32
今天完成的事情
1.完成task7-2
2.完成task7-3
遇到的问题
【solved】 1.自动生成雪碧图的网站生成的是以px为单位的css，而为了实现自适应，需要将雪碧图更改为以vw为单位。
background-size 用来控制整个雪碧图的大小，原尺寸的雪碧图宽高设为200%或把宽高数据放大一倍
再对需要引用的logo的width height的属性放大一倍
最后调整原来position的数据
background-position: ；
如果只设置一个值的话，默认是x方向的值，另外一个值就是y方向，y方向的值是50%，也就是center。
第二点就是无论是关键字还是数字，还是%，都是可以混用的。
第三点就是可以单独设置方向上的值。
那么出来的小图片的大小就可以放大一倍，而不会把周围的图片露出来
想缩小一倍亦可这样操作
【unsolved】 2.audio音乐播放器位置放不对位置。
通过CSS旋转属性transform解决了这个问题
transform: none|transform-functions;
【solved】 3.加入游戏胜利的图片后，图片不能居中
查看了开发者工具，没有找出原因，只能摸索着设置
因为是雪碧图，包裹在div标签内，即为块级元素
【fail】 设置了margin：0 auto; 无效
【fail】 在雪碧图上直接设置.bg-victory{ background: url() no-repeat center center} 无效
【fail】 设main{ display: table }; 设.bg-victory{ display: table-cell}；有效但损失两侧宽度，暂无法弥补
【success】设main{ display: flex ; justify-content: center;}
【solved】 4.本来将各个页面的html、css及雪碧图分开存放，但发现并不能识别不同文件夹的内容，只能存放在同一个文件夹内，
也就是这样，感觉太乱了，不知道有没有什么别的办法
收获
1.table及table-cell
将容器设为display:table然他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中
与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。
2.opacity和rgba
opacity属性的值，可以被其子元素继承。即设置了父元素为透明，其内的文字及各项子元素都为透明色
为之前的RGB颜色模型增加一个新的值，即成为了RGBA颜色模型。rgba颜色模型有四个值，最后一个是alpha通道的值，取值在0.0到1.0之间
针对以上两种方法的不同特性，我们可以分情况使用两者。例如，当我们需要制作透明的边框时 ，就使用ragb颜色，当我们需要背景图片透明时，需要使用alpha属性，当然，背景图片上的内容的透明度也会随之改变。
3.html文档之间跳转
① 在html内设置
或在div里设置 id="btn-skip"，然后在body的最后面添加js
明天计划学习
提交任务，开始任务八
注： 【unsolved】截日报发出前未解决的问题
【solved】已解决现象但并未从根本上解决问题
【solved】已解决
返回列表
评论