今天完成的事：

今天又检查了并调整一遍任务8.9的代码，开始任务进行10.

1.在任务10的过程中学习了使用bootstrap创建进度条.

创建一个基本的进度条的步骤如下：

添加一个带有 class .progress 的 <div>。

    <div class="progress"></div>

接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

    <div class="progressBar"></div>

通过对元素添加样式，以达到预期的目的，

成果图：

2.学习如何创建一个单选按钮。涉及 radio 和 lable 有元素。

lable：label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。

           label标签；:checked 选择器,匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

          "for" 属性可把 label 绑定到另外一个元素。只需把 "for" 属性的值设置为相关元素的 id 属性的值。

radio：

定义了单选按钮，通常和input一起使用，

<input type="radio></div>

3.伪类和伪元素的区别：

css引入伪类和伪元素概念是为了格式化文档树以外的信息。

伪类:         用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，                         我们可以通过:hover来描述这个元素的状态。

                 虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素:      用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。

                 虽然用户可以看到这些文本，但是这些文本实际上不在文档树中

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。

伪类的使用方法

伪类的语法：

selector:pseudo-class {property:value;}   伪类就像真正的类一样，可以叠加使用，没有数量上限，只要不是互斥的，

明天计划的事：完成任务10的响应式页面布局，

遇到的问题：布局是使用了radio常见单选按钮，但是做出来的效果是可以多选的，不鸡道是咋接回事。还有这样设置的单选按钮好像不能改变样式。

收获：，任务布局已完成一半，学会了创建进度条。