今天完成的事情：

        hover时会出现4个操作选择：经过今天师兄的一点通，瞬间明白了制作头像鼠标悬浮的布局，可以利用盒中盒多重设置相同属性，再加上查询百度，明白代码css使用：  .父级元素 .b元素 {  display:block }  的方式，来定义鼠标移动到父级身上时，B元素的样式。完成布局

       带箭头的对话框绘制：三角箭头除了切图以为也可以 div选择器制作，对应了任务6中的深度思考。通过div的伪类:after，给他添加content，调整content的边距来达到三角形效果，border-left和border-right的宽度来改变箭头的宽度，border-top的边框宽度改变箭头的长短。感觉有时候无聊时可以多试试这些玩法。不过练习时间太少。

.dialogBox{
   height: 0.82rem;
   width: 100%;
   margin-top: 0.7rem;
   background-color: #b9e9f5;
   position: fixed;
   line-height: 0.82rem;
   font-size: 0.26rem;
   color: #464646;
}
.dialogBox:after{
   content: "";
   border-top: solid 0.20rem #b9e9f5;
   border-left: solid 0.15rem #00800000;
   border-right: solid 0.15rem #00800000;
   position: absolute;
   left: 11.25%;
   top: 100%;
}

        进度

明天的计划

        给中间内容保持居中、布局页脚。

遇到的困难

         .父级元素 .b元素 {  display:block } 第一次见到这样的用法，两个类选择器这样设置会遵循怎么样的规则呢，虽然使用了，但是不理解其中的含义。用多类选择器后，不接触其他选择器，很陌生，但是之前查询知识点，也没见两类选择器组合。

        模拟器时需要点击头像才出现下面的四个图标。

收获

        理解新的知识点，认真练习操作了两小时，解决昨晚遗留的问题，同时也加强了对其的理解运用。