今天完成的事情： 没有完成任务2，写好了滑动条的样式

明天计划的事情：完成任务2

遇到的问题： 

    滑动条的实现： 

           利用<input type="range" max="20" min="6">

           修改滑动条的样式： 首先要去除或修改默认样式，这里是这样写的：

/*去除默认样式*/
input[type=range] {
    /*加厂商前缀保证在webkit上的兼容*/
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
}

input[type=range]::-webkit-slider-thumb {
    /*加厂商前缀保证在webkit上的兼容*/
    -webkit-appearance: none;
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent; /* Hides the slider so custom styles can be added */
    border-color: transparent;
    color: transparent;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

一开始没加厂商前缀，所以设置的样式一直不生效。加上前缀后，兼容了webkit内核浏览器，自己设置的样式才生效

给滑动条改变宽度：

一开始是给滑轨设置宽度，但不生效。

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

}

试了下给input加宽度，生效了

input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    background-color: #fab344;
}

收获： 学习了css3新特性 clac，通过百分比，px等单位混合计算长度值。