一、今天完成的任务:

1，完成之前任务的修改，以及师兄找到的各种问题的修改及理解。

2，学习进度条滑块的部分知识

二、明天的计划：

1，整理小课堂有关定时器的知识点，

2，js任务二仍旧没有任何头绪,做完小课堂之后，准备找一个师兄的看一下师兄的思路。

三、遇到的问题：

1，关于官网的框架链接不能使用：

解决方法：

1）下载到本地，进行本地引用

2）写一个属于自己的框架库

2，如下图所示：

1）把鼠标放在div圆上hover 同时使字体变色：

解决方法：

 先给div圆设置hover效果 然后再给包裹圆和字体的大div设置hover效果，在触发圆的同时也是在触发包裹它两个大div的hover效果。

2）在触发字体hover效果的同时使div圆的hover效果也生效：

解决方法：

 给字体单独设置hover效果，然后再设置一个关联效果。就像任务七中的四个选择图一样 例：radio（包裹圆和字体的大盒子）single（圆）

.radio:hover .single{

    background：orange;

}

四、收获：

1，去除进度条默认样式：

input[type=range] {    

-webkit-appearance: none;   

width: 300px;    

border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/

}

input[type=range]::-webkit-slider-thumb {

-webkit-appearance: none;

}

2,给滑动轨道添加样式:

input[type=range]::-webkit-slider-runnable-track {    

height: 15px;    

border-radius: 10px; /*将轨道设为圆角的*/    

box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/

}

3,给滑块添加样式:

input[type=range]::-webkit-slider-thumb { 

   -webkit-appearance: none;   

 height: 25px;  

  width: 25px;    

margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/    

background: #ffffff;   

 border-radius: 50%; /*外观设置为圆形*/    

border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/   

 box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/

}