Task13任务总结

任务名称：CSS-Task13

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task13/Task13-1/Task13-1.html
                  展示 https://814885760lp.github.io/jnshu/Task13/Task13-1/Task13-1.html

任务耗时：本次任务从2019/08/19-2019/08/21 共耗时3天

技能脑图：

    官方脑图：

   个人脑图：

任务小结:

1.此任务需要自己实现侧边导航栏，原理和任务十的一样。input 和label for的组合要会使用

2.css重置

关于css样式重置 ，相信对于接触过前端的人都知道在开始编写属于自己的代码之前都需要完成这一步。不过，我还是想说说自己对css重置的理解。希望可以利人利己（哈哈，对，就素介么任性！）

首先，我觉得像我一样对于理解概念无感，容易混淆的前端小白要清楚什么是css重置样式，就要弄清楚两个概念：CSS Reset以及css重置（其实概念很相近，但是还是有所区别的），不然傻傻只知道css样式要重置，知其然不知其所以然，这对于我这种对概念有点强迫症的人来说，不搞清楚实在是太痛苦了。（哈哈哈，闲话少说，进入正题）

就我自己的理解而言，对于css重置样式表可以分为下面3个问题：

（1）什么是CSS Reset ？要用到CSS Reset的原因是？

（2）为什么要重置CSS？

好啦，问题抛出了，我也该说说我自己的理解了：（1）CSS Reset简单来讲就是根据我们自己编写页面的需求重新设置css属性（废话，这个当然大家都知道！可是我重点想说的是css reset的原因耶~）css reset主要是因为html标签在浏览器中都有各自的默认样式，比如： p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻 烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简 单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

（2）涉及到为什么要重置css，这点要从浏览器出发，因为不同的浏览器对于html标签的解释各不相同，重置css可以使得html标签在各个浏览器下产生相同的表现效果。

Task14-15任务总结

任务名称：CSS-Task14-15

成果链接：代码 https://github.com/814885760lp/jnshu/blob/master/Task14/Task14-1/Task14-1.html
                  展示 https://814885760lp.github.io/jnshu/Task14/Task14-1/Task14-1.html

任务耗时：本次任务从2019/08/22-2019/08/25 共耗时4天

技能脑图：

    官方脑图：

   个人脑图：

任务小结：

1.sass的使用要熟练，同时注意sass中伪元素的使用方法，例如：:hover前需要加&符号，详细使用可以参考sass中文网

2.编码一定要规范，不然当代码量很大的时候，查找代码可能需要耗费大量时间，且布局不美观，看起来不舒服

3.导航栏和轮播图需要手写，不能使用bootstrap，但是理解了其手写原理后，写出来还是比较简单的

4.组件的拆分，一般会多次用到的css样式，可以单独拆分出来写成一个css文件，需要使用的时候通过link或者import导入即可，这样的目的是方便维护css，不然修改的时候还得一个个的去修改。