今天完成的事情：

任务8、9完成

了解了轮播图的原理，与用CSS做一个幻灯片差不多。都需要用到animation。同时还需要用到<label>进行关联。

主流浏览器的4中内核：

Trident内核（IE：-ms-）、WebKit内核（Google、Safari：-webkit-）、

Gecko内核（Firefox：-moz-）、presto内核（Opera：-o-）.

外边距的重叠概念

div+css的布局较table布局的优点

CSS的垂直居中

margin负值的应用

明天计划的事情： 

进行任务10.

至少把页面的一半布局完。

遇到的问题：

昨天下拉框的问题。

原因是因为我给

上面的导航条设置了高度。

因我想让导航条高一点，这样左边图片就不会显得太大。

虽然设置高度不行，但是设置内边距却是没问题的。

收获：

如何实现轮播图？

思路是设置两个盒子，一个大盒子包裹着小盒子，小盒子撑满大盒子。

然后在小盒子里放需要轮播的图片（图片高要跟盒子一样），然后给图片一个左浮动。

然后给大盒子设置 overflow: hidden;

大的结构设置完后，给图片所在的盒子(所在的盒子要设置所有图片加起来的宽度)设置animation属性。

@keyframes name 设置图片的滚动时间。

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

利用 animation属性。

animation-nanme、animaition-duration、animation-timing-function、animation-delay、animation-iteration-count、 animation-direction。

annimation:name duration timiing-function delay iteration-count direction。

使用@keyframes（关键帧）规则创建动画。

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

Trident内核（IE）、WebKit内核（Google、Safari）、Gecko内核（Firefox）、presto内核（Opera）.

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

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

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

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

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

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

一、div+css布局的好处：

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

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

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

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

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

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

1.容易上手。

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

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

table缺点：如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table套table，会害死维护人员的。

bootstrap有哪些常用组件？

1.轮播图

2.下拉菜单

3.响应式导航栏

此次任务中就都有用到。

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

1.display:table-cell;vertical-align:middle;

2.display: flex; align-items: center;

3.position:  absolute;  top: 50%; transform: translate(0,-50%);

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

左右列固定，中间列自适应

去除列表右边框

负边距加定位垂直水平居中

去除列表最后一个<li>的border-bottom

多列等高

了解到一个新概念

ZOOM:1

Zoom属性是IE浏览器的专有属性， 它可以设置或检索对象的缩放比例。

（重点）当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

在IE浏览器里可以解决很多东西

进度：task10

任务开始时间：2018.6.1

预计结束时间：2018.6.3

是否有延期风险：无

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