task10  任务总结

官网脑图：

个人脑图：

任务耗时：5天。（中间请了一天假）

成果链接：https://singsad.github.io/task10/task10.html.

任务总结：首先布局的header。使用了hover效果，使得hover时候变大变色，刚开始我的想法是使用另一个盒子，在hover的时候覆盖之前的盒子，发现自己是把简单的东西复杂化了，多写了很多代码不说，效果也没有好到哪里去，

师兄说可以直接设置hover时变大，经修改，代码如下。

对于接下来的响应式下拉菜单按钮，由于前期布局使用最简单的flex布局，很容易得到任务效果，但是在手机访问，界面缩小时，不会出现响应式下拉菜单，尝试写媒体查询来改变，不会写。。所以没办法只能用引入bootstrap的方法来重写这个下拉菜单，浪费了时间。

之后就是task10的难点，对于radio样式的修改。

网上搜索到了很多改变原有样式的办法，我使用label。慢慢尝试做了出来，但是要实现UI图效果，hover效果，代码如下：
<span class="box3">
<input type="radio" id="right-mouse" class="box4" name="right-mouse">
<label for="right-mouse"></label>
<span class="box11">对口箱</span>
</span>

css代码：
.box3 label {
width: 1.5rem;
height: 1.5rem;
position: absolute;
top: 1rem;
left: 0;
background: #fff;
border:1px solid #ccc;
border-radius: 50%;
/* cursor: pointer; */
}

.box3 input:checked+label::after {
content: '';
width: 1.5rem;
height: 1.5rem;
position: absolute;
border: 5.5px solid #1d7ad9;
background-color: #fff;
border-radius: 50%;
left: -1px;
top:-1px;
}

设置hover效果的时候，不知道怎么设置出中间白色，周五蓝色的效果，我一直以为是设置一个伪元素，把背景颜色变成蓝色，然后不知道中间怎么变成白色，想在添加伪元素，可惜做不到，纠结很久，师兄一下电通了。。。可以用蓝色的border颜色。背景色设置白色就可以达到。。总结：要学会变通，要用多个角度考虑问题。

最后就是对下拉菜单的样式修改

.box2>.first-step>.dropdown-first>select {
appearance: none;
-webkit-appearance: none;
width: 13rem;
height: 4rem;
font-size: 1.4rem;
padding-left: 2rem;
outline: none;
border: 1px solid #ccc;
background: #fff;
}

使用appearance: none;去除原有的low比样式，接下来设置我们自己的样式，我使用的是绝对定位，修改完成之后覆盖上去

.dropdown-first::after {
content: '';
width: 3rem;
height: 3rem;
background: url(sanjiao.png) no-repeat center;
position: absolute;
pointer-events: none;
top: 15%;
right: -0.8rem;
}

最后就是使用媒体查询，在结束的时候做出小屏幕访问效果。使用媒体查询改代码。因为刚开始布局代码的时候考虑的不周到，没有考虑到响应式的问题，导致后面再设置响应式比较麻烦，加上自己原来布局比较菜，乱七八糟的，所以在后面使用媒体查询要改变好多布局加盒子，真的是特别麻烦。自我谴责。以后写样式对布局一定要严格要求，把布局写好，不要乱定宽高。不把简单的东西复杂化，不强加样式。遇到的问题是：媒体查询时候无法设置，经师兄帮助。得知媒体查询一般需放在最后面，放在前面会被后面的代替。好处是对媒体查询了解加深。

然后对于深度思考

1.如何改变默认radio和select的样式？

介绍一下input元素，input元素是最重要的表单元素。

       input元素在 form元素中使用，用来声明允许用户输入数据的 input 控件。

       输入类型是由类型属性（type）定义的，输入类型至少包含23种，大多数经常被用到的输入类型如下：

       text（文本输入）、password（密码输入）、submit（提交按钮）、button（按钮）、image（图像作为提交按钮）以及checkbox（复选框）和radio（单选按钮）。

label 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。

"for" 属性可把 label 绑定到另外一个元素。只需把 "for" 属性的值设置为相关元素的 id 属性的值。   也就是我们改变单选框所用的样式，把原有样式隐藏，用label显示我们自己新建的样式。

select标签用来创建下拉列表。select标签中的 option 标签定义了列表中的可用选项。

修改radio默认样式

需要用到的工具如下：

label标签；

:checked 选择器,匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

兄弟选择器：

1、+ 选择器（相邻兄弟选择器），可选择紧接在另一元素后的元素，且二者有相同父元素。

2、~ 选择器，作用是查找某一个指定元素的后面的所有兄弟结点。

修改select默认样式

appearance 属性，可以让元素看上去像标准的用户界面元素。

需要注意的是，

所有主流浏览器都不支持 appearance 属性。

Firefox 支持替代的 -moz-appearance 属性。

Safari 和 Chrome 支持替代的 -webkit-appearance 属性。