今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

昨天的进展还可以，对于input和label之间怎么关联，怎么去修改单选框的样式和隐藏原本input自带的单选框算是弄清楚了一点。

1、完成了html整体的框架布局的编写。

     之前还在查资料，对于input，只知道它是通过type来定义不同的属性，向这里我们要用到的就是单选框，type=“radio”定义了这里的input是单选框。input元素必须在form元素中使用，用来声明允许用户输入数据的input控件。

     这里还有一个标签label标签。label标签这里是定义input的标记，要想写出单选框，这里label属性是不可少的，和input同时使用，这里label通过for属性来绑定到input元素上，给input设上id值，for属性和id的属性相同。

如：

这里就通过label标签关联了input元素。

又因为label标签不会展示任何效果，所以我们要修改单选框的样式，就需要给label设置:before选择器，通过给before选择器重新写一个圆的样式，这里input自带的单选框不能用display：none来隐藏掉，只能通过opacity属性来达到透明的效果，但是单选框依然存在，只是让它透明化看不见了。

2、了解了:before这个伪元素。

定义：:before 伪元素在元素之前添加内容。

用法：这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

如下图：

在p元素前加上“台词”，前面就会添加台词内容。

这里用到:before选择器，必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。这里的content用于在css中渲染向元素逻辑上的头部和尾部添加内容。

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

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

默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

3、完成了主体单选框部分的编写。

     任务10的难点基本上就在单选框上，因为要写成和UI图上一样的效果，所以这里用运用上面三个知识点，用before选择器给label（label关联了input控件）重新写一个圆，再通过hover效果来达到。

    其他的下拉框和导航栏前面的任务基本上都写过。不是很难。

4、了解了相邻兄弟选择器

怎么通过运用相邻兄弟选择器来给label设置css样式。

定义：可选择紧接在另一元素后的元素，且二者有相同父元素。

例如：我要给有相同父级的h元素和p元素设一个margin-top的间距，如下图：

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。所以这样写就可以让h元素后的元素样式发生改变。

这里的语法解释：相邻兄弟选择器使用了加号（+），即相邻兄弟结合符，他们之间也可以留空白符。

明天计划的事情：（一定要写非常细致的内容） 

完成任务10的基本调试，提交任务。

遇到的问题：（遇到什么困难，怎么解决的）

      

收获：（通过今天的学习，学到了什么知识）

label通过for属性关联input元素控件标记。

:before选择器在元素前插入内容，一般用于修饰内容样式。

相邻兄弟选择器的使用。