今天完成的事情：

任务八的主页的学习。

今天收获

banner轮播图的写法

css编写banner轮播

一。先写两个div,把需要轮播的图片放进去

<div

　　<div

　　　　<img src="img/1.jpg" alt="">

　　　　<img src="img/2.jpg" alt="">

　　　　<img src="img/3.jpg" alt="">

　　</div>

</div>

二。外层div规定一块区域,让图片在这片区域显示；内层div把需要显示的图片并排合成一张大图片；主要属性overflow，hidden值使超出范围的内容不显示

.a{

　　position: absolute;

　　width: 480px;

　　height: 270px;

　　background-color: pink;

　　overflow: hidden;

}

.b{

　　position: absolute;

　　width: 1440px;

　　height: 100%;

}

.b img{

　　width: 480px;

　　height: 100%;

　　float: left;

}

三。使用animation创造一个动画，通过margin-left移动图片。

.play{

　　animation: ma 10s 3s infinite;

}

@keyframes ma{

　　0%{

　　　　margin-left: 0px;

　　}

　　16%{

　　　　margin-left: -480px;

　　}

　　32%{

　　　　margin-left: -480px;

　　}

　　48%{

　　　　margin-left: -960px;

　　}

　　64%{

　　　　margin-left: -960px;

　　}

　　80%{　　

　　　　margin-left: 0px;

　　}

　　100%{

　　　　margin-left: 0px;

　　}

}

.play:hover{

　　animation-play-state: paused;

}

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

1.背景介绍

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

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

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

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

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

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

2.知识剖析

animation: name duration timing-function delay

iteration-count direction fill-mode play-state;

对应：

animation:marginLeft 10s linear 2s infinite

100 reverse  paused

在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”。

下面我们就一起来看看这个“Keyframes”是什么东西。一个动画初始属性和最终属性，

一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，

如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作，

此时我们需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。

3.常见问题

@keyframes规则

兼容性该如何解决

4.解决方案

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

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

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

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

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

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

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

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

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

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

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

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

1 背景介绍

外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。2.知识剖析当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

2 外边距重叠的意义？

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

3.常见问题外边距重叠的意义？外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。解决外边距重叠？4.解决方案外层元素padding代替内层元素透明边框 border:1px solid transparent;内层元素绝对定位 postion:absolute:外层元素 overflow:hidden;内层元素 加float:left;或display:inline-block;内层元素padding:1px;

明日计划：继续任务八的学习