发表于: 2018-09-04 22:40:13

1 807


完成的事情:

重新修改优化了任务五的代码。

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就可以显示


收获:

可以使用上下边框的颜色和内容的背景色,利用内边距制作出图标的效果。

对垂直居中的几种方法有了更深的认知。




返回列表 返回列表
评论

    分享到