今天完成的事情：

1.差点完成任务十三，写完了发现少写个功能

明天计划做的事情：

1.完成任务十三。

2.学一点JS基础。

遇到的问题：

1.关于CSS架构问题，拆分CSS样式表可以帮助我们更方便快捷的维护代码。但是目前还没有感受到拆分样式表带来的便利。相反，还要考虑引入文件的路径问题。举个例子，main分块中引入image文件夹中的一张图片，需要的相对路径是../../image，而经过@import后SASS编译出来的CSS文件，该图片对他的相对路径可能变成了../image，这样就会造成图片的流失。估计是项目太小了，或者是我还没有get到使用拆分CSS的技巧。

收获：

1.   修正了关于first-child的伪类的应用。

例如p：first-child{color：red}；他并不会自动搜索父元素中最后一个为p的子元素。而是

1、找到最后一个子元素。2、这个子元素为p元素。  二者缺一不可，如果最后一个元素为div等其他，那就是无效的，一个大坑。

2.学习了相对路径和绝对路径。

相对路径  ./代表在同文件夹内   ../上一层，可以叠加 ../../向上两层

绝对路径  /表示从盘符开始的绝对路径 <img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">

使用SASS写的话感觉最好使用绝对路径描述。

两张图都是同一文件夹的图片，不同的写法。

3.

如图，我们给这个div设置了上下左右margin。

然后为了实现点击跳转的效果，给div套上了一个a标签。

可以从图中看出来a标签的长宽都是比div要大的，因为a标签包括了div的margin部分，这就造成了一个很尴尬的结果，就是点击div的margin部分也会跳转页面。

我想到了2个方法。

1：取消div的margin。给父元素设置flex来给div定位，就没有margin了。

2：把a标签放进div里。然后让里面的字撑起来a的长宽，使得a和div的尺寸一致。或者a标签设置

display：inline-block。长宽：100%；

4.使用动画效果推进菜单栏的时候，设置forwards可以保留动画结束时的效果，不然会回到原位。如果给一个元素设置两个动画，后面的动画覆盖前一个动画效果。

任务总结：

任务名称：css-task-13

成果链接：https://xjdxc.github.io/task/task13/html/task13.7.3.html

任务耗时：11.20日-11.21日  （2天）

官方脑图：

我的脑图：

任务总结：

初步开始使用CSS样式表拆分。

我的分类：

组件化思想（分而治之）：

分而治之

这种开发的思想其实也就是分而治之（最重要的架构思想），页面逻辑过于复杂，便将页面分为很多个业务组件模块分而治之，这样的话维护人员每次只需要改动对应的模块即可，以达到最大程度的降低开发难度与维护成本的效果，所以现在比较好的框架都会对组件化作一定程度的实现。

而任务十三则是教会我们初步的使用组件化。

使用CSS框架的好处：

1、开发效率的提高。

2、规范代码命名。

3、更好的团队合作

4、 解决浏览器的兼容性问题

5、一套完整的、结构清晰的结构代码。

使用CSS框架的弊端：

1、你需要完全的理解整套框

2、你会延续一些框架中的错误bu

3、限制开发思

4、臃肿的源代

5、框架的语义化