今天完成的事情：

完成了任务10的布局，在进行调试和修改。中间确定尺寸那一块儿布局有点问题，还没调好。

明天计划的事情：

调好中间布局的问题，提交任务10。开始做任务11。

遇到的问题：

单选框前面的样式，和下拉列表选项后面三角的样式，开始都用的默认的，但和原图有出入。就想着要改变样式，最后通过查找资料和参考其他师兄的进行了解决。

单选框前面的样式，通过：checked伪类和：after伪类进行了实现，

.regular-radio:checked + .demo-radioInput:after {
    display: inline-block;
    height:1.8rem;
    width:1.8rem;
    background-color:#f8f9fb;
    border:0.7rem solid #1d7ad9;
    border-radius:50%;
    content: "";

下拉列表后面的样式通过将原来的样式不让显示，然后新作一个块儿，里面再用css绘制一个三角进行实现。appearance之前没接触过，这次特意学习了一下，代码如下：

select.form-control 
    -webkit-appearance: none;
    -moz-appearance: none;
}
select.form-control::-ms-expand {
    display: none;
}

收获：

学会了表单的各项知识：

label标签的用法，之前一般都用for来和表单元素绑定，今天学习到也可以不用绑定，直接包含到label标签中就行，如下：

1. 显式的联系：  
2. <label for="SSN">Social Security Number:</label>  
3. <input type="text" name="SocSecNum" id="SSn" />  
4.   
5. 隐式的联系：  
6. <label>Date of Birth: <input type="text" name="DofB" /></label>  

小课堂学习了选择器优先级和权重的知识。之前对权重这一块儿没啥概念，都只是直接设定，结合小课堂和后来查找资料，进行了系统了解：

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。

小课堂分享的时候提到了伪类和伪元素，但当时大家都不太了解，没太讲清。自己之前也不知道伪元素的概念，之后就专门进行了查找和了解，如下：

伪类种类

伪元素种类

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因；

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes::Pseudo-elements