Day 41     task10-2

今天完成的事情

      1.task10

遇到的问题

      1.【unsolved】header部分做导航条时采用了导航类标签页式的做法，但发现没办法使hover时的标签变大，同时不影响另一元素

解决办法：使用应用bootstrap按钮组而不是导航栏标签页

仍存在点击时出现外边框及阴影的问题，但设置：active无效，且开发者工具中未查找到原因。

      2.【solved】流程图hover效果，如何使hover效果下字体与图形同时变色

用伪类选择器hover，hover后面空格再加上要变色的元素，之后编辑样式就是hover的时候后面的元素发生的样式改变。

html

css

      3.【solved】按钮样式更改

很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。

思路：

1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；

2. 然后把真正的单选按钮隐藏起来；

3. 最后把生成内容美化一下。

具体步骤如下

1.设置<input type=radio>即创建单选按钮

2.设置id for将radio选框及文字配对 

3.

（1）选框样式

为选框重新设置样式 ，利用伪元素::before 生成空div，用border-radius将其设置为圆形，并设置选框大小

（2）点选时设置border为蓝色，并设置border宽度

（3）隐藏原有样式

      4.更改下拉列表默认样式

按照网上教程中完成更改后发现下拉列表内未点开时不能显示文字，更改文字颜色也并没有解决问题

经检查，问题出现在这几行代码，删掉后恢复，也并未对更改后样式产生影响

收获

      1.学会制作流程图

      2.学会利用伪元素更改单选按钮样式

      3.学会用lable将选框和文字关联起来

明天计划学习

       继续task10

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决