今天完成的事情：

1.完成了css任务。

明天计划的事情：

1.进js。

遇到的问题：

display：none；

收获：

1.写任务总结的时候才知道这是面包屑导航。。每次都瞎鸡儿命名。。

任务名称：css-task-14-15 任务总结

成果链接：https://xjdxc.github.io/task/task14&15/html/task14.1.html

任务耗时：3.27日-3.31日    5天

官网脑图：

我的脑图：

任务总结：

1.css模拟轮播图的几种方法。

利用雪碧图+background。优点是轮播图可以平滑过渡，比较自然。缺点是不可以嵌套a标签进行页面跳转。

ul+li。让img图片都float：left；动画效果设置负值margin来实现图片位移。优点是可以嵌套a标签，但是过渡不够平滑。

2.关于SASS的使用。

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。使用sass可以帮助我们更快捷高效的编译css文件。

当css文件组件化时，可以通过@import添加到一个scss文件中。如果不想让组件的scss文件自动编译，可以在文件名前加_，sass就明白不会编译该文件。例如

@mixin混合器，可以定义可重复使用的样式，避免了使用无语意的 class。可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

@extend。当我们遇到这种情况时：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。但是通过sass我们可以让第二个元素的样式通过@extend完全继承第一个元素的所有样式，并且可以再添加新的样式进来。

& 变量。如果一个组件中有一个数值大量重复出现。比如字体font-size。可以通过设置变量的值，后面可以直接引用变量。当字体大小需要统一作出改变时，只需要改变变量的值就可以同时修改。

for语句。指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

在此任务中用来设置栅格系统

嵌套。嵌套包括属性嵌套和css样式嵌套。注意嵌套层数最好控制在三层左右，不要超过四层。

3.css样式模块组件化。

模块组件化帮助我们维护css代码。将一个页面分为数个组件部分。这样每个部分互相独立，一个部分需要调整的时候，不会出现牵一发而动全身的情况。

组件化也可以帮助我们快速找到需要调整的位置。当一个页面的代码量巨大的时候，假如需要调整一个button的样式，可能难寻其迹。这时候组件可以再具体细化。让模块也从组建中独立出来。例如main可以再细分subnav、content等。

在此任务中我分为了六个模块轮播图、栅格系统、reset、以及header、main、footer。然后在通过sass的@import导入在一个scss文件中集中编译。

4.div+css模拟下拉菜单。通过label+input实现。之前任务中使用过不在赘述。

需要提的是在这里使用transition比使用动画效果要好一些。