今天完成的事情：

1、基本完成任务十的页面（还没添加响应式）

明日计划：

1、为任务十的页面添加响应式

2、开始任务十一

遇到的困难：

1、不知道该怎么自定义radio的样式，在网上进行一番搜索后解决

收获：

1、知道了:checked选择器,匹配每个被选中的input元素（用于单选和按钮和复选框），在这次页面中就是用到了单选框上面，点到哪个单选按钮，哪个单选按钮就可以使用:checked选择器所添加的样式

2、知道了+选择器

+选择器就是相邻兄弟选择器，如果需要选择紧接在另一个元素之后的元素，而且这两者拥有相同的父元素就可以实用+选择器，例如：

div {

  <p>h这是一个段落</p>

  <h1>这是一个标题</h1>

}

就可以使用 p + h1{ color:red; }来对h1进行样式的设置，这次就用到了它，和:checked一起用来选择一个紧接在被选中的input之后的元素，下面会详述

3、知道了:after选择器，用在被选元素的后面插入新的内容。

4、知道了一种纯css改变radio样式的方法

先给出html结构

form{

  <input type="radio" id="style-radio-1" class="radio">

  <label for="style-radio-1" class="radio-style"></label>

  <span>对口箱</span>

}

注意这里的label里的内容要和input标签的id属性的内容相同

首先要消除radio的默认样式：.radio{ display:none;}

然后要把label做成我们需要的圆形

form .radio-style {

  display: inline-block;

  position: relative;

  margin-right: 1.25%;

  padding: .09rem;

  border: .01rem solid #d6d6d6;

  border-radius: 50%;

  vertical-align: middle;

  cursor: pointer;

  background-color: #f8f9fb;

}

之后就要用到之前了解到的几个选择器了

form .radio:checked + .radio-style{ background-color: #1277dc;}

这个选择器选择的是紧跟在被选中的input元素（在这里就是被点击的按钮）后的lable元素

然后按钮里面还有一个小圆圈用:after选择器来设置样式

form .radio:checked + .radio-style:after {

 content: ' ';

 display: inline-block;

 position: absolute; /*这里采用的是绝对定位的方法，是相对于label定位的，上面在.radio-style里面也进行了position:relative;的设置*/

 top: .07rem; left: .07rem;

 width: .04rem;

 height: .04rem;

 border-radius: 50%;

 background-color: #fff;

}

这样基本上就可以完成radio的自定义样式了，顺便说一下，后面在测试的时候按钮并不变化，后来发现需要label里的内容要和input标签的id属性的内容相同才可以，应该是要一个label对应一个input吧。 这种方法的缺点就是要给每一个input设置独有的id才行，后来在网上有看到一种不用设置id的方法，但还没试验，明天再看看看吧

ps:本创任务差不多定下来了，前期也就是做做课件，打打杂吧，不是太忙，所以这段时间要把握好啊~