发表于： 2018-09-04 22:40:13
1 806
完成的事情:
重新修改优化了任务五的代码。
footer {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
bottom: 0;
width: 100%;
height: 1rem;
border-top: .02rem solid #dbe5e7;
background: #f8fafb;
font-size: .2rem;
text-align: center;
}
footer>div:nth-child(1) {
color: #5fc0cd;
}
footer>div:nth-child(2) {
position: relative;
width: .94rem;
height: .94rem;
border-radius: 50%;
background: #5fc0cd;
}
footer>div:nth-child(3) {
color: #999;
}
.lefticon {
display: inline-block;
width: .46rem;
height: .4rem;
background: url(task6sprite.png) -1.02rem -.2rem;
}
.ceicon {
position: absolute;
top: .24rem;
left: .3rem;
width: .4rem;
height: .4rem;
background: url(task6sprite.png) -1.02rem -1.04rem;
}
.rigicon {
display: inline-block;
width: .42rem;
height: .41rem;
background: url(task6sprite.png) -.2rem -1.04rem;
}
查看了一部分任务六的资料。
做出了任务六的第一个页面。
学习了使用上下边框、内边距和内容部分的背景颜色制作出
。
巩固了使用伪元素来完成实心三角标志和直角框。
明天计划的事情：
完成任务7第二个页面的切图。
学习css半透明是如何实现的。
实现选择每个玩家方块时，会出现4个选项。
遇到的困难：
使用button标签始终是这样显示
，无法达成想要的效果，但是把标签换为div就可以显示。
收获：
可以使用上下边框的颜色和内容的背景色，利用内边距制作出图标的效果。
对垂直居中的几种方法有了更深的认知。
返回列表
评论