今天完成的事

1.分隔四个小方块并且调整结构修改样式

2.思考后发现雪碧图的引用错误 修正过来后给四个小方块添加样式

3.给所有玩家方块添加hover样式

4.简单设置footer样式

5.调整footer样式

6.今天完成样式预览

明天的计划

1.调试雪碧图样式使其能根据HOVER来变换大小

2.完善跳转部分

3.开始页面三

遇到的问题

1.昨天雪碧图没有生效的原因是没有引用背景图片

2使用移动端浏览器时发现雪碧图并不会跟着四个小方块一起放大缩小

p:hover .hover1 {
     display: block;
     position: absolute;
     bottom: -6vw;
     left: -1vw;
     width: 4vw;
     height: 4vw;
     background-image: url("组4.png");
     background-repeat: no-repeat;
     background-color: white;
     background-position: 0px 2px;
     background-size: 16vw;
 }
p:hover .hover2 {
    display: block;
    position: absolute;
    bottom: -6vw;
    left: 4.66vw;
    width: 4vw;
    height: 4vw;
    background-image: url("组4.png");
    background-repeat: no-repeat;
    background-color: white;
    background-position: -35px 2px;
    background-size: 16vw;
}

其他图标X轴位置不为0px的图标会在显示里随着放大缩小左右滑动

收获

1.熟悉了雪碧图使用中的注意事项