今天完成的任务

a.任务10的环境配置和header的编写

b.拓展知识

明天的计划

a.继续任务10的编写

b.昨天不熟悉的知识点熟悉一遍

c.拓展知识

遇到的问题

a.当写到导航页的时候，这次并没有直接套用，而是看着样式进行的手写，总体还是没有全部理解，不过算是知道是导航页形成的最重要的环节就是利用display:none;和display:block；的状态切换，来造成导航页面的形成。然后卡在了导航图标出来后点击出现复选框这里了，这个原理还需要有机会手写一次进行解析。

b. 这里的制作需要思维的开放，开始想的是做出那个横列，分开了3个DIV,不过制作过程很不美妙，始终达不到我预想多效果；开始尝试换一个思维方式，后来试了下把圆图标用absolute来定义，然后把下面文本用margin隔下来，设置border-top，用5px的加粗来实现，发现效果以外的好，于是决定就用这个方式了（以后思维多多散发一点）。

c.这个点击同心圆做很困难，<input>和<label>标签用的很不熟悉， 这里有2个难点：1.<input id="box1" type="radio" name="boxes" checked="yes"> 这个属性的使用。2.::before，::after 2个伪类的使用。 当都学习熟悉了后，这个东西就比较简单了主要思路是：

1. 为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；

2. 然后把真正的单选按钮隐藏起来；

3. 最后把生成内容美化一下。

收获

a.role是HTML5的标签属性，可以用于标识一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。简单的说，role是为了给一些特定的浏览工具，比如盲文浏览工具识别。

<div role="button"></div> ，把div元素转换为button按钮功能使用；

<div role="navigation"></div>，把div元素转换为navigation导航功能使用；

<div role="checkbox" aria-checked="checked"></div>，把div元素转换为checkbox复选框功能使用；

<a role="button" class="btn btn-default" href="#" >链接</a>，把a链接元素转换为button按钮功能使用。

但是它更多的是用来增强语义性，当现有的html标签不能充分表达语义性的时候，就可以借助role来说明。通常它更多的出现在一些自定义的组件上。比如html中没有tree标签，我们就可以把他的role设置为tree，这样可以增强组件的可访问性、可用性和可交互性。

b.html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。  

 把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。  

 这样，当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动。   

c. ss3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

d.<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

e.checked 预先选定复选框或单选按钮。

clip 属性剪裁绝对定位元素。

label + input[type="radio"]

+为相邻元素选择器，即label元素和input是相邻元素

label为标签选择器，指label标签

input指input表单元素

[type="radio"]为属性选择器，指元素的type属性为radio

input[type="radio"]即单选表单

整体的意思是，选中紧跟着label标签的单选框，如

<label>标签</label>

<input type="radio" />

上面的radio会被选中，并应用设置的css样式