今天完成的事情：

1、写任务8、9总结。

2、讲小课堂。

3、修改任务8、9。

明天的计划：

1、拆禅道。

2、开始任务10。

遇到的问题：

1、小课堂讲的有些磕磕绊绊。

也许是因为这种形式的交流经验以前比较欠缺吧，有些紧张不够放松。本来准备好的该讲的一些小知识点不小心漏掉了，讲完才发觉。

争取下次讲小课堂再进步一点，语言组织更流畅一些~

2、任务8、9有些细节忽略了。

程序员可以没有审美但是一定要按既定的规律来写代码，比如最简单的对齐、文字不掉行、设置锚点、LOGO响应式时大小要合适、内容与footer中间适当留白、文字与小图标对齐、一行多个块状元素响应式时怎么样排列会比较好看等等。

还要考虑到不同分辨率对页面的影响和不同浏览器的兼容情况。

如果再算上审美的话·····那还需调试

收获：任务8、9深度思考

1、如何实现轮播图？

①我是用js组件来完成的轮播图。具体原理还看不太懂，暂时先把网上的实现方法贴过来，等学习js的时候在回过头来检查吧。

②实现轮播图最主要的就是定时器 （setInterval 函数和 clearInterval 函数），他们分别是定时和清除定时。

在html ，css 已经写好的情况下。最主要的就是js的功能问题了。轮播图的功能步骤如下：

（1）先让图片轮播起来。基本就是写一个 play函数里面加定时器，每次使图片的index对象加一，当index大于最大值时，设置index等于第 一张图片.这样轮播图就动起来了。

（2）轮播图动起来基本就是只显示一张图片隐藏其他的图片。我上面使用的是opacity 。

（3）图片下面的按钮。主要就是使下面的按钮与上面的图片一一对应。然后点击下面的按钮显示对应的图片。

（4）左右的上一张和下一张按钮。点击左边的上一张按钮图片向前显示，实现原理就是使 index 对象减一。点击左边的下一张按钮图片向后显示，实现原理就是使 index 对象  加一。 

（5） 对应上一张和下一张连续点击的问题就是给这两个按钮加上延时器。

（6） 当鼠标放在轮播图区域时停止轮播，实现原理就是清除定时器，离开开始轮播就是加上定时器。

2、如何用css实现一个简单的幻灯片的效果页面？

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。

Animation字面上的意思，就是“动画”的意思，

我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处，

我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。

在CSS3中创建动画，您需要学习@keyframes规则。

Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，

后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，

有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，

如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，

我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，

比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，

我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，

也就是说这个"from"就相当于"0%"而"to"相当于"100%",值得一说的是，

其中"0%"不能像别的属性取值一样把百分比符号省略。

Internet Explorer 11、Firefox以及Opera支持@keyframes规则和animation属性。

3、主流浏览器内核有哪几种？

（1）首先是背景介绍，什么是浏览器内核？

浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。 

（2）四种主流内核

①Trident/IE内核：用户广、兼容性差，bug多

Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、2345浏览器、腾讯TT、淘宝浏览器、阿云浏览器（早期版本）、瑞星安全浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器等等 。

②Gecko/Firefox内核：开源、开发程度高、体验好

Gecko内核常见的浏览器： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）等等 。

③WebKit内核：苹果内核、用户广、开源

WebKit内核常见的浏览器：傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器等等。

④Presto内核：渲染速度最快、动态内核

Presto内核常见的浏览器：由于Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。

4、什么是外边距重叠？重叠的结果是什么？

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

计算规则如下：

①两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为正数时，它们会自动合成一个单独的外边距，取它们中间比较大的，此时的margin值为20，只要第二div的margin-top小于20，margin值就为20。

②两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为负数时，它们会自动合成一个单独的外边距，取它们中间绝对值比较大的，此时的margin值为-20，只要第二div的margin-top绝对值小于20，margin值就为-20。

③两个外边距一正一负时，折叠结果是两者的相加的和。也就是说当第一个div的margin-bottom与第二个div的margin-top为一正数一负数时，它们会自动合成一个单独的外边距，取它们两者的相加的和，此时的margin值为30。

5、div+css的布局较table布局有什么优点？

TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。

div+css布局的好处：

①符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

②布局精准，网站版面布局修改简单。

③加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

④节约站点所占的空间和站点的流量。

⑤用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

①容易上手。

②可以形成复杂的变化，简单快速。

③表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

6、bootstrap有哪些常用组件？

官网上列出来的挺齐全的，还有js的我就没贴出来了，有兴趣的可以移步bootstrap中文官网。

7、css有哪些方式可以实现垂直居中？

①这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。 
content 清除浮动，并显示在中间。

优点：

• 适用于所有浏览器
• 没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点：

• 唯一我能想到的就是需要额外的空元素了
  
  

②这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto;会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

优点：

• 简单

缺点：

• IE(IE8 beta)中无效
• 无足够空间时，content 被截断，但是不会有滚动条出现

③这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

优点：

• 适用于所有浏览器
• 无足够空间时不会被截断

缺点：

• 只对文本有效(块级元素无效)
• 多行时，断词比较糟糕

这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。

④flex弹性盒子，只需要将父元素设为display：flex。然后给它一个垂直居中align-items：center即可。

优点：

• 适应性好，块级元素文本元素都可

缺点：

• 代码多，需要给父元素设置flex
• 在嵌套多个盒子时需注意继承关系i
• 兼容性不好，对iE浏览器对其不友好
  
  

8、margin负值在页面布局中有哪些应用？

①对于自身的影响

当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

②对文档流的影响

元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。

③对浮动元素的影响

负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。

④对绝对定位的影响

对于绝对定位元素，负margin会基于其绝对定位坐标再偏移。

9、如何使用bootstrap栅格系统？

真的要讲的话内容太多了，简单的说吧：

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

10、媒体查询如何使用？

响应式设计可以随着所显示的屏幕大小而改变。实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。

①设置meta标签:

<、    meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)

②具体媒体查询指令：

一个基本的媒体查询，即一个媒体属性与默认指定的 all媒体类型

@media (min-width: 700px) { ... }

and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型,只有当每个属性都为真时，结果才为真

@media and (max-width:600px) and (min-width: 800px;){......}

媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not键字应用于整个媒体查询，在媒体查询为假时返回真,not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。

@media not all (max-width:700px){......}

进度：task9

任务开始时间：2018.5.25

预计结束时间：2018.5.28

是否有延期风险：延期一天

禅道：http://task.jnshu.com/zentao/project-task-697.html