今天完成的事情

继续修改任务八，做了动画，第三个页面整体看着还行，但感觉代码比较乱，还需优化 
明天计划的事情

完成任务八 
遇到的问题

第一个页面友情链接、合作企业和上面没对齐

收获

1.DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

2.常见的inline、inline-block、block元素

     inline：a,span,br,i,em,strong,label,q,var,cite,code

     inline-block：img,input

     block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form

 inline特点:

      (1)和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

      (2)元素的高度、宽度及顶部和底部边距不可设置

      (3)元素的宽度就是它包含的文字或图片的宽度，不可改变。

 block特点:

         (1)每个块级元素都从新的一行开始，并且其后的元素也另起一行。

         (2)元素的高度、宽度、行高以及顶和底边距都可设置。

         (3)元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

     inline-block特点:

     内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，

     代码display:inline-block就是将元素设置为内联块状元素。

     和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

inline-block元素的如何垂直居中

     方法1：设置上下padding值相等（要定高）

     方法2：设置vertical-align:middle;

     方法3：设置line-height大于font-size即可实现单行文本垂直居中，无需设置line-height和height值相等（不定高）

     方法4：设置line-height和height值相等

3.inline-block布局较float布局而言，有哪些优势呢？

float布局：每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，此原因是属于恶魔系的float属性破坏了inline box。

display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素。黑白通吃，左右逢源。inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。

4.过渡  过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

规定希望把效果添加到哪个 CSS 属性上；规定效果的时长。如果时长未规定，则不会有过渡效果，因为默认值是 0。效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开

样式：div{

width:100px;

height:100px;

background:yellow;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

若要旋转：div{

width:100px;

height:100px;

background:yellow;

transition:width 2s, height 2s;

-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */

-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

}

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4 */

-webkit-transform:rotate(180deg); /* Safari and Chrome */

-o-transform:rotate(180deg); /* Opera */

}

任务五/六/七总结

任务五总结

官方脑图

个人脑图：

任务总结：a.任务进度比较慢，刚过来学习，感觉还挺迷茫，不知道该干什么，要赶紧进入状态，多看多学

                  b.脑图对比，好多应该掌握的技能还没学会，有的技能自己用了但没深入了解

                  c.图片命名要规范，不能出现中文；vertical-align设置垂直对齐方式，值有top/middle/bottom，和text-align记岔了，text-align有三个值right/left/center；background-size属性，有四个值length percentage cover contain

任务六总结