今天完成了什么：

微调汉堡菜单；

学习如何使用纯css写幻灯片；

遇到了什么问题：

幻灯片样式不太会写；花了时间很多，找了很多资料慢慢啃吧；

收获了什么：

轮播图的话，三种做法， 一是用CSS3的 keyframe+animation，用百分比实现控制轮播的间隔，这里的重点是要给装图片的容器三倍大小（三张图片），然后还要3+1最后一张需要克隆第一张图片，

达到衔接，这种方法通过调整百分比，可以达到很好的轮播，但是无法添加控制按钮，实现左右滑动 ；

 二就是用Bootstrap组件里的方法，需要用到JS的内容。

另外一种是用表单元素按钮做出能点击的，但是不会自动左右滑动；

复习了下sass的相关概念；

什么Sass

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。

Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass 是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。

Sass 是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。

Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的Sass也被称为Scss。

在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：

• 嵌套输出方式 nested
• 展开输出方式 expanded
• 紧凑输出方式 compact
• 压缩输出方式 compressed

在知识点中，嵌套输出方式，在前端是可以看到效果的，后几种方式是需要在命令行中编译的

继承的注意事项

跟变量和混合器不同，继承不是仅仅用css样式替换@extend处的代码那么简单。为了不让你对生成的css感觉奇怪，对这背后的工作原理有一定了解是非常重要的。

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。当.error出现在复杂的选择器中，比如说h1.error .error a或者#main .sidebar input.error[type="text"]，那情况就变得复杂多了，但是不用担心，sass已经为你考虑到了这些。

关于@extend有两个要点你应该知道。

• 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
• 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。

明天计划：

写幻灯片尽快完成。。