今天完成的事情：

           任务10  
明天计划的事情：

          做任务11

遇到的问题：

    input type=number  有默认样式，清除掉就行了。

<input type="number" ...> <style>    input::-webkit-outer-spin-button,    input::-webkit-inner-spin-button {        -webkit-appearance: none;    }    input[type="number"]{        -moz-appearance: textfield;    } </style>

收获：

任务10做一个定制箱子的页面，做响应式导航栏
用的CSS画的线和圆圈叠加在一起，hover使背景颜色和文字变色
选择界面，主要是单选框radio，然后修改器默认样式。使用label关联文字，是原来的按钮隐藏，display：none，再自己添加一个圆，。

总结任务10

任务耗时2018.5.9-5.10（2）

任务符合预期。

成果链接：http://gpr666.top/task10/task10.html

官方脑图

自己脑图

任务符合预期。

使用checkbox和label，display：none制作响应式导航栏，用伪类添加效果

input设置步骤：

1.在input后面添加一个兄弟元素span，设置span样式

如：span {

                    display：inline-block；

                    width：30px；

                    height：30px；

                     background：#00f；

                     border：1px solid #000；

}

2.设置input本身display：none；

3.利用伪类选择器：input：checked+span{

                                border：10px solid  #0f0;

                                 backgroud: #534578;  

}

改变样式

这里的+代表选择相邻的后面的兄弟元素，若为不相邻的兄弟元素请使用 input：checked~span{}选择后面所有span

底部文字小屏幕下一行放不下，设置媒体查询使其跨行显示

利用onclick事件可以点击该元素让其他元素改变样式而不受文档流位置影响。

规范代码，添加注释