今天完成：

整了一天，跟昨天的区别就是仔细研究了下label标签，然后把昨天的任务十代码加上基于媒体查询的响应式。

label标签介绍

label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。

label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。

主要使用场景

label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。

显式关联

显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。如：

<input type='checkbox' name='basket' id='basketball'>
<label for="basketball">篮球</label>
<input type='checkbox' name='football' id='football'>
<label for="football">足球</label>

隐式关联

隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。如下：

<input style="display: none;" type="radio" name="main-div6div1radio" id="radio-box6" checked="checked">
<label for="radio-box6"><span>三层A瓦优质</span></label>

显式关联优点：

可以减少标签嵌套层数

label标签和表单可以在不同的位置

显示关联缺点：

控件需要定义id属性

label标签和表单控件不利于作为一个整体来控制

隐式关联优点：

控件无需定义id

标签和控件方便作为一个整体控制

隐式关联缺点：

增加了标签嵌套层数

不能将标签和关联控件放到不同的位置

明天计划：

开始整less和sass了，仔细研究下怎么利用less和sass来减少css的代码，达到重复使用的效果；