今天完成的事情：

完成任务10，对之前的部分零碎笔记进行了整理。

任务10难点昨天已攻克，今天完成剩下部分的搭建和响应式效果优化。

比如下拉菜单用position定位后，单选框部分不被下拉菜单遮挡等细节。

另外整理了部分笔记（某一知识点的一整块内容梳理），包括flex布局，动画animation的应用方式、过渡transition（包括transition+hover会碰上的卡顿问题如何解决）、表单对应的类型以及样式优化。

明天计划的事情:

开始任务11，了解sass和less的区别，选择其中一门学习。

遇到的问题：

收获：

成果链接：https://lareina-wzy.github.io/test/ task10/html/task10.html

任务耗时：2019.11.01-2019.11.02

官网脑图：

我的脑图：

任务十总结：

 1.  input表单类型：type属性值，如type="text".

name属性定义同一类选择，如单选框则同类单选一，复选框则同类复选。

<label> : 关联 <input> 元素的标签，点击label范围即选中关联的input

2.  更改单选框前圆圈

控件与label并列时，可以为<label>元素添加生成性内容（伪元素），用其来设置单选按钮的样式。把真正的单选按钮隐藏起来。

控件嵌套在label内时，因为input嵌套在label标签内，不是并行的关系，给label添加伪类用不了input标签的checked属性。故考虑直接给input标签添加伪类来实现。

3.  select下拉菜单箭头样式

方法一：

另设div盒子完成样式修改，利用定位+点击穿透的方式完成。

方法二：

去除select右侧箭头

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

利用z-index将div盒子置底（或下拉菜单置顶），将顶部下拉菜单的的背景色设为transparent透明。