今天完成的事情：
1，做完了任务13
2，拆分任务14的各部分css
3、补任务总结

明天计划的事情：
做任务14 

遇到的问题：
没啥问题

收获：
脑图画得更熟练了呢



                                                                                                                                                 


CSS89任务总结

任务名称：CSS：TASK89

成果链接：代码https://github.com/a1224105946/CSStask/tree/master/task8
                  展示 https://a1224105946.github.io/CSStask/task/task8-1.html

任务耗时：本次任务从2019/04/07-2019/04/14 共耗时6.5天，请假一天半

技能脑图：官方脑图

个人脑图


总结：

任务总结：

1.Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

bootstrap的网格系统主要是.container（容器）  .row（行） .column（列）  

他的规则是列在行内，行在容器里。一个容器里面的行可以嵌套，满足不同的需求。

一个行最多可以有12列。可以通过列的水平合并确定宽度。例如两列 每列水平占6列的位置，那么这两列就各占行的一半大。一列占3列的水平位置，另一列占9列、那么宽度比就是1比3，最多有12列。可以在列里面嵌套row。

container有一个水平方向的padding，宽度为15px

而row有一个负的水平margin也是15px

最后column也有一个15px的水平padding

column只能在row里。由于row的margin为-15px。那么column的border就碰到了container的border，并且他自己有个padding，所以里面的内容就碰不到container的border了。有15px的距离。而中间的column虽然border是挨在一起的，但是有两个padding，则内容是有30px的距离的。

综合下来，column的内容距离container左右边框15px，互相距离30px。

2.bootstrap的响应式是根据：

可以看出主要使用的bs就是栅格系统，栅格系统也是根据媒体查询来写的，明白了这一点之后任务89的三个页面后两个页面就没有使用栅格，而是自己写多个断点，来实现自适应效果。所以后两个页面就没引用bs库啦
因此任务89耗时长了点，第一个页面要学习使用bs库，第二个页面就要抛弃bs库，还是比较艰难的。
任务89相比之前的任务主要在于内容量增加了很多，每一个页面的内容都相当于前七个任务加起来。但是主要使用的东西仍然是之前已经学到的，比如在布局中大量使用的弹性盒子，能有效解决各种标签（比如inline-block）的莫名其妙bug（脱离文档流）。
做任务89是一个漫长的过程，是心态上的转变，从简单页面到复杂页面，每一个细节都要把控好，有效提高了耐心、细心（细节不对就会被打回修改）。

                                                                                                                                                                                                            



css10任务总结

任务名称：CSS：TASK10

成果链接：代码https://github.com/a1224105946/CSStask/tree/master/task10
                  展示 https://a1224105946.github.io/CSStask/task10/task10.html

任务耗时：2019/04/15-2019/04/20 共6天

技能脑图：官方脑图


我的脑图：



总结：
任务10用时跟任务89差不多，因为我在10中用到了大量新知识点，包括before after伪类的使用，不用bs库自己用css写导航栏以及汉堡菜单。

1，纯html css写导航栏以及汉堡菜单
写导航栏比较简单，是静态的div，设置好样式就行了，难点在于通过媒体查询让导航栏变成汉堡菜单，上一个任务中引用的bootstrap库很直接的解决了这个问题。自己写的时候关于两个模块的联动想破了脑袋。

首先这是设置的媒体查询的断点
@media screen and (max-width: 768px) 

所以第一步是在768px以上的时候，导航栏 subnav2显示 然后button隐藏，设置成display：none。这里妹有什么难点。
第二步是768px以下，此时button出现，在没有点击button的时候subnav2是隐藏的。button是设置好的样式，在768以下给一个dispaly随便什么都行，只要不是none（我给的flex，便于三个span的布局）他就会显示出来。
然后此时的subnav2在没有触发点击效果的时候是隐藏的，这个隐藏也有玄机，通过反复修改，不能使用display：none或者visibility：hidden隐藏之后用联动的伪元素来顶掉隐藏，至于为什么不能还不清楚，反正没有效果。这里可以通过设置max-height：0 或者width：0，原理是使盒子的宽或高为0来实现隐藏，之后给伪元素设置max-height：5rem（固定值，大于四个li纵向排列的高度即可，但不能小于）或者width：100%（可以调整）来顶掉隐藏，让他出现。划重点！！！这里这是高度不能用height，必须用max-height，我也不知道为什么，但是设置height没效果！！width就有效，我想是不是因为width100%等于100vw，所以width本身就等于max-width，所以归根结底还是要是用max-width。
具体代码下附代码链接。
然后这里的伪元素也是新接触的伪元素，尝试过用：hover在此处无效，我以为实现点击效果或许active会有用，结果也无效。
这里需要使用focus，使button被点击之后成为焦点，然后用：focus + 来实现两个模块的联动。

 
2，修改默认的input type=radio 样式以及修改select的默认样式好麻烦啊

修改input type=radio样式思路如下

继昨天在hover效果上使用了：：after之后，今天也轮到了给input radio的联动label添加：：before。两者实现目标的思路是一样的，都是加一个额外的样式来覆盖原来的样式，会使代码量大大加大.....但好歹是自己写出来的而不是引用bootstrap库，有利有弊吧

参考文章：https://www.cnblogs.com/xinjie-just/p/5911086.html

修改select中的箭头，百度解决方案如下

就是把默认的箭头隐藏，插入一个图标进去形成雪碧图

插入图标的时候使用到了 代码如下

background: url(image/arrow.png) no-repeat  .7rem .06rem / .24rem .28rem;

这行代码囊括了雪碧图所有的元素属性，这只是第二次使用还不熟悉，打开8-2的css文件复制的代码


                                                                                                                                                                              

task11任务总结

任务名称：CSS：TASK11

成果链接：代码https://github.com/a1224105946/CSStask/tree/master/task11
                  展示 https://a1224105946.github.io/CSStask/task11/task11.html

任务耗时：2019/04/21-2019/04/24 共4天


官方脑图：



我的脑图：



总结：
主要的耗时在理解与学习sass上，初次看sass资料压根就看不懂，学习了慕课网的sass教程还是很懵逼，改成了scss要好一点，毕竟书写习惯跟css基本一致。

1.基本用法

 变量

SASS允许使用变量，所有变量以$开头。

　　$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

　　$side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

 计算功能

SASS允许在代码中使用算式：

　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

嵌套

SASS允许选择器嵌套。比如，下面的CSS代码：

　　div h1 {
　　　　color : red;
　　}

可以写成：

　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

属性也可以嵌套，比如border-color属性，可以写成：

　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

border后面必须加上冒号。

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

　　a {
　　　　&:hover { color: #ffb3ff; }
　　}

 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

　　/*! 
　　　　重要注释！
　　*/

2.代码的重用

 继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

　　.class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：

　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

 Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，调用这个mixin。

　　div {
　　　　@include left;
　　}

mixin的强大之处，在于可以指定参数和缺省值。

　　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

使用的时候，根据需要加入参数：

　　div {
　　　　@include left(20px);
　　}

下面是一个mixin的实例，用来生成浏览器前缀。

　　@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

使用的时候，可以像下面这样调用：

　　#navbar li { @include rounded(top, left); }

　　#footer { @include rounded(top, left, 5px); }

3.颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

　　lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

 插入文件

@import命令，用来插入外部文件。

　　@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

　　@import "foo.css";

4.高级用法

条件语句

@if可以用来判断：

　　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

配套的还有@else命令：

　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

5. 循环语句

SASS支持for循环：

　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

也支持while循环：

　　$i: 6;

　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

each命令，作用与for类似：

　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

 自定义函数

SASS允许用户编写自己的函数。

　　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}









理解了scss的语法之后，做任务就很快了，代码是现成的，而且原先的css代码也没有很多地方要用到scss，scss主要是使复用性高的代码尽可能省略，提高阅读性与可维护性。

 

                                  a              
                                                                                                                                                          


css12任务总结

任务名称：CSS：TASK12

成果链接：代码https://github.com/a1224105946/CSStask/tree/master/task12
                  展示 https://a1224105946.github.io/CSStask/task12/task12-1.html

任务耗时：2019/04/25-2019/04/27 共3天

官方脑图：


我的脑图：


总结：
任务12比起11基本没有变化，html这一块布局没什么好说的，flex已经用的驾轻就熟了，啥都能用弹性盒子解决。
css这一块的代码复用性也不多，scss部分也很少。
这个任务白给，没难度。