css任务十三总结

技能脑图：

      个人脑图：

任务总结：

      1

        2.任务的要点：任务十三是要我们重写任务七的内容，同样是运用sass编译并且不使用bootstrap框架；目的是让我们进一步增加使用sass的熟练度，能够深入理解混合宏，变量，插值，占位符等用法； 

另一个要点就是要学会css的样式重置，首先我们要知道样式重置是什么？在HTML标签在浏览器里有默认的样式，有些默认样式往往会给我们带来麻烦，影响开发效率。所以有经验的前端设计者都会自定义

一个重置浏览器默认样式的CSS文件，CSS reset就是把浏览器提供的默认样式覆盖掉。说到了css reset就不得不了解一下Normalize ，Normalize.css 是一个很小的CSS文件，但它在默认的HTML元素样式上

提供了跨浏览器的高度一致性。用于保护有用的浏览器默认样式而不是完全去掉它们修复浏览器自身的bug并保证各浏览器的一致性；

        3.遇到的问题：

        相比任务七，任务十三增加了一个要求，就是在版本选择页面加一个侧边栏，侧边栏要加是很容易的但是要触发点击事件就没那么容易了；这里可以用input：checkbox属性，还可以用js触发；我选择的

是第一种使用纯css属性来触发；input：checkbox属性是一个复选框属性，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理

我们的Checkbox复选框。我们需要知道，判断复选框被选中，如果是则改变label元素中的相应属性。再通过input[type=checkbox]:checked，来带动整体页面实现点击效果。

1如何让列表在左侧 拉出来？点击框时 ：checked将右侧的内容设置为定位+right=-70%（相当于右侧内容整体都往右走70%的宽度  即右侧内容只剩下30%）    通过input的id转移给了lable的for 而lable设置了三横