今天完成的事情：

上午完善小课堂，开始任务10，完成切图和基本布局

下午听直播，完成小课堂，上传视频等相关事情。

明天计划的事情：

完成头部、底部

遇到的问题：

1 第一次讲小课堂，没有准备经验，上午先在小群里试讲，发现自己对有些内容没有理顺关系，组织好要讲的话。下午正式讲的时候还是出现一点问题。

2 小课堂之后要做的事情更多，上传视频，写博客，更新GitHub，还要更新Wiki的3个表格，有些手忙脚乱。只能吧Wiki关于小课堂的页面都翻完了。

收获：

为了准备小课堂，找了很多资料，发现自己的理解和使用存在欠缺，知识不系统，似是而非。前端的知识繁杂细碎而且分散，更需要自己整理形成自己的知识脉络。现在还仅仅是初级阶段，以后还有更多新知识，整合知识需要更下一番力气。

任务10

开始时间：5.7

预计结束时间：5.10

http://task.jnshu.com/zentao/project-task-629.html

任务8深度思考：

1.如何实现轮播图？

通过以下的5个过程，实现轮播图的轮播效果 

1.动态生成结构 

创建元素和插入元素的方法分别是什么？ 

创建元素：document.creatElement( tagName ) var li = document.creatElement(“li”)； 

插入元素：appendChild( element ) ol.appendChild(“li”); 

通过什么方法复制第一张图片元素？ 

通过cloneNode()方法来复制元素：eg . var firstImg = ulLis[0].cloneNode(true)； 其中cloneNode方法中，如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点 

2.鼠标经过按钮 

鼠标经过时如何改变按钮样式？

 a. 清除所有按钮的样式 for (var j = 0; j < olLis.length; j++) { olLis[j].className = “”; } 

b. 给当前鼠标所在按钮添加特殊样式 this.className = “current”; 

鼠标经过按钮时如何计算图片盒子移动的距离? 

通过按钮索引值（this.index）和图片的宽度（imgWidth）来计算图片盒子要移动的距离（target） `target = - this.index * imgWidth 

3.鼠标点击箭头 

通过什么属性改变左右箭头的隐藏和显示？ 

通过控制左右箭头盒子的display属性来控制左右箭头盒子的显示（block）和隐藏（none） 

通过什么机制来统一左/右箭头点击时图片切换为当前图片的上/下一张？ 

利用全局变量来统一左右箭头切换图片，在左右箭头点击时，通过pic来计算图片盒子移动的目标位置 var target = -pic * imgWidth; 

当点击左箭头时：pic– –这样target比当前位置数值大imgWidth 图片盒子向右移动一张图片的距离 显示出上一张图片 

当点击右箭头时：pic++ 这样target比当前位置数值小imgWidth 图片盒子向左移动一张图片的距离 显示出下一张图片 

4.按钮随之变化 

square的取值范围以及其与pic对应情况 

5.添加自动滚动 

图片自动播放下一张和点击右箭头的操作相同

图片轮播主要技术点为： 

一、<ul> <li> 来作导航栏； 

二、<div>通过设置其属性为overflow:none，使照片集部分隐藏； 

三、CSS3的transition 结合 transform 来做动画变换； 

四、JQUERY通过选择器，控制动画元素属性。 

动画描述 

一、鼠标放在图片上，会出现左右滑动箭头； 

二、点击箭头会使图片集左右移动，中间图片会旋转360度，并放大1.2倍； 

三、图片到边界时不能再滑动。

2.如何用css写一个简单的幻灯片效果页面？

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。Animation字面上的意思，就是“动画”的意思，我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。

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

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。浏览器最重要或者说最核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过一般习惯将之称为“浏览器内核”，负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

1.Trident/IE内核：该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这也导致了后面的两个后果： 一是Trident内核曾经几乎与W3C标准脱节（2005年） 二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览 器，Firefox和Opera就是这个时候兴起的。 Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、2345浏览器、腾讯TT、淘宝浏览器、阿云浏览器（早期版本）、瑞星安全浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器等等 

2.Gecko/Firefox内核：Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。事实上，Gecko引擎的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的 Netscape的一些员工一起创办了Mozilla，以当时的Mosaic内核为基础重新编写内核，于是开发出了Gecko。不过事实上，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。由于其本身Open Source。实际上是目前开发程度最好的浏览器。Firefox的扩展能够给浏览者带来完全不同的浏览体验。市面上Gecko内核的浏览器主要分两类，一类是以Mozilla Firefox为代表的，用XUL作为界面描述语言的浏览器：这类浏览器往往继承了Firefox扩展性好的优点，早前的Madfox和Albatross就是这一类型的浏览器。所以，Gecko内核也被称为Firefox内核。 Gecko内核常见的浏览器： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）等等 

3.WebKit内核：Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。2003年，Apple 宣布发布首款他们自主开发的 web 浏览器：Safari。它的呈现引擎叫 WebKit。它是 Linux 中的 web 浏览器 Konqueror 呈现引擎 KHTML 的一个分支，几年后，WebKit 的开源吸引了呈现引擎的开发人员。根据最新的浏览器调查表明，该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨，另外也是因为Safari 3终于推出了Windows版的缘故吧。Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核(在脚本理解方面，Chrome使用自己研发的V8引擎)。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。 WebKit内核常见的浏览器：傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

4.Presto内核：Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。实际上它是一个动态内核，与其它几个内核的最大的区别就在脚本处理上，Presto有着天生的 优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测 试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大）。由于Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。

5.Blink内核：2013 年 4 月 3 日，谷歌在 Chromium Blog 上发表 博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。其实Blink引擎就是也就是Webkit的分支，就像Webkit是KHTML的分支一样。Blink引擎现在是谷歌公司与Opera Software共同研发，

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

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

外边距重叠的意义 

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。 

防止外边距重叠解决方案： 

虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考： 

外层元素padding代替 

内层元素透明边框 border:1px solid transparent; 

内层元素绝对定位 postion:absolute: 

外层元素 overflow:hidden; 

内层元素 加float:left;或display:inline-block; 

内层元素padding:1px;

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

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

由于html文件中的table标签的浏览速度较慢，所以，使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢。因为table是中的内容是自适应的，为了自适应，它要计算嵌套最深的节点以满足自适应，所以有可能会有一断时间出现空白才显示。所以是会有问题的。 使用DIV的方法布局网页框架的优点：可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的css文件进行随意的修改和更新；缺点：每个div容器都需要定义css样式来控制，制作过程相比table方式要复杂。现在的网页越来越倾向于使用DIV的方法来布局网页了。

div+css布局的好处：

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

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

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

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

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

table布局的好处

1.容易上手。2.可以形成复杂的变化，简单快速。3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

6.bootstrap有哪些常用组件？

组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。

目前常用的bootstrap组件：1.轮播图2.下拉菜单3.响应式导航栏

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

 水平居中设置

 1、行内元素 设置 text-align:center 

2、定宽块状元素 设置 左右 margin 值为 auto 

3、不定宽块状元素 

a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto 

b:给该元素设置 displa:inine 方法 

c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%

垂直居中设置 

1、父元素高度确定的单行文本 设置 height = line-height 

2、父元素高度确定的多行文本 a

:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle 

b:先设置 display:table-cell 再设置 vertical-align:middle

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

一、左右列固定，中间列自适应布局 

此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。

二、去除列表右边框 

项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：

三、负边距+定位：水平垂直居中 

使用绝对定位将div定位到body的中心，然后使用负margin（content宽高的一半），将div的中心拉回到body的中心，已到达水平垂直居中的效果。

四、去除列表最后一个li元素的border-bottom 

列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。

五、多列等高 

此例关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切。