今天完成的事情：
任务10部分

明天计划的事情：
做完任务10

遇到的问题：
1，纯html css写导航栏以及汉堡菜单
写导航栏比较简单，是静态的div，设置好样式就行了，难点在于通过媒体查询让导航栏变成汉堡菜单，上一个任务中引用的bootstrap库很直接的解决了这个问题。自己写的时候关于两个模块的联动想破了脑袋。

首先这是设置的媒体查询的断点

所以第一步是在768px以上的时候，导航栏 subnav2显示 然后button隐藏，设置成display：none。这里妹有什么难点。
第二步是768px以下，此时button出现，在没有点击button的时候subnav2是隐藏的。button是设置好的样式，在768以下给一个dispaly随便什么都行，只要不是none（我给的flex，便于三个span的布局）他就会显示出来。
然后此时的subnav2在没有触发点击效果的时候是隐藏的，这个隐藏也有玄机，通过反复修改，不能使用display：none或者visibility：hidden隐藏之后用联动的伪元素来顶掉隐藏，至于为什么不能还不清楚，反正没有效果。这里可以通过设置max-height：0 或者width：0，原理是使盒子的宽或高为0来实现隐藏，之后给伪元素设置max-height：5rem（固定值，大于四个li纵向排列的高度即可，但不能小于）或者width：100%（可以调整）来顶掉隐藏，让他出现。划重点！！！这里这是高度不能用height，必须用max-height，我也不知道为什么，但是设置height没效果！！width就有效，我想是不是因为width100%等于100vw，所以width本身就等于max-width，所以归根结底还是要是用max-width。
具体代码下附代码链接。
然后这里的伪元素也是新接触的伪元素，尝试过用：hover在此处无效，我以为实现点击效果或许active会有用，结果也无效。
这里需要使用focus，使button被点击之后成为焦点，然后用：focus + 来实现两个模块的联动。

 
2，修改默认的input type=radio 样式以及修改select的默认样式好麻烦啊

修改input type=radio样式思路如下

继昨天在hover效果上使用了：：after之后，今天也轮到了给input radio的联动label添加：：before。两者实现目标的思路是一样的，都是加一个额外的样式来覆盖原来的样式，会使代码量大大加大.....但好歹是自己写出来的而不是引用bootstrap库，有利有弊吧

参考文章：https://www.cnblogs.com/xinjie-just/p/5911086.html

修改select中的箭头，百度解决方案如下

就是把默认的箭头隐藏，插入一个图标进去形成雪碧图

插入图标的时候使用到了 代码如下

这行代码囊括了雪碧图所有的元素属性，这只是第二次使用还不熟悉，打开8-2的css文件复制的代码

3，任务10页面看起来简洁，做起来一点都不简单，媒体查询需要设置的断点比较多，尤其是那么多input的宽度需要仔细安排，虽然难度不是很高，但是很麻烦。。。


收获：
纯html css写汉堡菜单是今天最大的难点，关于上面提高的隐藏subnav2让我想破了脑袋，不过相通了之后就好多了。
后面修改input radio和select的默认样式原理都比较简单，但是代码写起来十分的麻烦.....就很难受
这两天主要学习了各类伪元素的使用，最开始接触的hover，然后是active（尽管没用到），focus，after，before等，我感觉伪元素能实现一点简单的互动效果。
    遇事不决设flex，好用就完事了