今日完成：

今天才知道那个单选按钮是可以用css做的，input的radio属性是可以定义单选按钮。一直以为input只是一个输入文本的元素。。。

<form action="" method="get">
    <input name="box-type" type="radio"  id="type-01" />
    <label for="type-01">对口箱</label>
    <input name="box-type" type="radio"  id="type-02"/>
    <label for="type-02">飞机盒</label>
    <input name="box-type" type="radio" id="type-03"/>
    <label for="type-03">天地盖</label>
</form>

<label>标签为input元素定义标注

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

div.main label {
    display: inline-block;
    margin: 30px;
    align-items: center;
}

div.main input[type="radio"]{
    display: none;
}
div.main input + label:before{
    content: "";
    display: inline-block;
    width:16px;
    height: 16px;
    border-radius: 100%;
    border: 1px solid #d6d6d6;
    margin-right: 17px;
}
div.main  input:checked + label:before{
    width: 4px;
    height: 4px;
    border: 7px solid #1d7ad9;
}

然后修改了任务七的投票页面。这次感觉还不错。