今天完成的事情：

今天完成了任务十五的第一个页面的重做，学会了不用bootstrap做轮播图，把页面一需要的组件做了一些修改，

这几天的css基础的学习让我收获了很多，现在做页面速度比以前快了好多，布局思路也比较清晰了，但是仍然需要继续深入的学习。
明天计划的事情：

完成剩余页面的重做，学习js基础知识
遇到的问题：

在不用框架做轮播图还是有点难度的，因为页面有两个不同的轮播图，而用css做出来的轮播图要不是自动播放，要不手动播放的，暂时没有找到2者效果都有的实现方法，估计js可以做到，而且css实现的代码量确实有点大。

轮播图css实现的主要思路：

使用input复选框和label（模拟点击事件）来实现

第一个轮播图需要实现图片的轮播，并且在轮播图中加入左右箭头控制图片，底部有圆圈也需要同步控制图片。

首先将input的选择和图片进行关联设置图片移动属性（使用除css3的transition属性），同时关联底部圆圈按钮的颜色

然后做个箭头

这个箭头我是使用boder和css3的2D转换属性来做的，具体代码如上。

最后通过关联input和图片来设置图片轮播的顺序

input：nth-of-type（n）是选择input的父元素的第n个子元素，也可以给input加上id来代替。

多个label标签可绑定同一个input，在这个轮播图中使用了3个label绑定同一个input，分别为左右切换按钮和底部圆圈按钮。

当input被：checked后，通过选择器可控制图片或label标签的样式

注意：

input ~一定选择input之后的兄弟元素（一定是之后，渲染关系不可逆；而且一定是兄弟，如果是子集，请加上后代选择器比如：#pic1:checked ~ .btnlunbo>.btn1 ）

说完第一个轮播图第二个轮播图（其实轮播的是一个div）相对比较简单，没有左右按钮，而且这里我没有使用css3的移动而是使用消失和隐藏来做的，也是通过input和label模拟js点击事件，这个只需要底部的圆圈和图片与input绑定，实现圆圈控制div的出现顺序。

关于轮播图中有flex属性出现的问题。

不过做第二个轮播图中div的布局用了flex，发现可以用display：flex来替代display：block；但是如果在check之前div加入flex属性后再none，再使用display：block后出不来样式，最后发现可以先给check前div不加flex，加入display：none，check后不需display：block直接使用个flex就好了，比较奇怪，flex有点霸道。

收获：

1、

关于轮播图两种实现方式的优缺点？

      css轮播，适应性更广，但是代码比较多，可以在用户禁用js后仍然轮播，可以平稳退化。但不能同时自动轮播和点击轮播。

      js轮播，主流轮播方法比较简便，代码少。目前接触的是bootstrap写的carousel插件实现。后续可以用JS来自己写。

2、

为何CSS从来没有父类选择器？

（参考张鑫旭的博客：http://www.zhangxinxu.com/wordpress/2016/08/css-parent-selector/）

主要是由于CSS和HTML本身的渲染机制决定，浏览器解析HTML文档，是从前往后，由外及里的。如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，网页渲染呈现速度就会大大减慢，浏览器会出现长时间的白板。

3、

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

4、

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

5、

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

6、

常见的HTML事件

onchange HTML 元素改变

onclick 用户点击 HTML 元素

onmouseover 用户在一个HTML元素上移动鼠标

onmouseout 用户从一个HTML元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

7、

CSS3的2D 转换方法：

translate()素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

rotate()顺时针旋转给定的角度。允许负值，元素将逆时针旋转。角度单位（deg）

scale()元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

（x,y）把宽度转换为原始尺寸的 x 倍，把高度转换为原始高度的 2y 倍

skew()元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

matrix()

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

今天做页面用的时间挺长，只看了一会js，明天继续。。。