今天完成的事情：

1、task10这里用到了主要都是表单的使用比如input select还有label

典型例子

<form>

  <label for="male">Male</label>

  <input type="radio" name="sex" id="male" />

  <br />

  <label for="female">Female</label>

  <input type="radio" name="sex" id="female" />

</form>

<label> 标签为 input 元素定义标记。

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

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

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

关于那四个步骤的，1.定制纸箱2.选择数量。。

<div>

<div>

<div>

<span>2</span>

</div>

</div>

<div>

<span>2.选择数量</span>

</div>

</div>

只是对三块内容进行分割，line用来画那条小黄线，circus用来画黄色的圆球，num是下面的数字，主要还是对circus进行absolute定位调好位置就好。其他就设置下背景颜色就好了。

这里做单选要用到，然后就是默认的小圆点样式的修改。

也就是一个大的背景颜色为蓝的上面覆盖一个白色的小点，

:checked伪类选择器顾名思义，表示的是 type="checkbox" 的input元素被选中的状态

下拉菜单用用

<form>

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" selected="selected">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

用select嵌套option来实现，selected="selected"表示默认选中。

文本框就用<input type="text">来实现，

最后在媒体查询中设置了在小屏幕下怎么排列。尽量做到不乱排。

明天计划的事情：学习sass 重写任务4登录页

遇到的问题：修改单选的小圆点样式，下拉菜单的图标。

收获：使用各种表单来实现相应的样式效果。