今天完成的任务

a.任务8的任务完成

b.深度思考

c,拓展知识

明天计划

a.任务9的环境配置和制作

b.拓展知识

遇到的问题

a.最大的问题，页面在手机端基本布局都凉了，乱成一匹马。没办法，只能用栅格式和媒体查询慢慢修改，虽然不是特别难，胜在繁琐，耐心即可。

b.在修改第二个页面合作公司页面的时候，思路错了，想做一个图片随着宽高而随着更改自适应的图片来。试过了background-size: cove; background-size: 100 auto;等无果，但是父级的div高度取固定值又不行，取百分比又得不到值。后来是孟晓师兄提醒我background-images的高度最好是用padding来撑起，不要用height来定值，于是换了方式，先给设置widht:100%;然后设置padding-top(botton也行）来撑起高度，因为需要自适应，所以取值为百分比，这里我的padding参考父级为body所以取的17%（多一点点比少好），达成自适应。

c.合作公司页面的表格也是开始用了百分比什么的弄傻了，虽然在PC页面上是好的布局，但是宽度缩小，2个表格肯定是不够宽度的，这个时候就与其强行拍成一排（毕竟字体有给固定最小值，宽度慢慢缩小一定是不够用的），不如直接栅格式了，设置col-xs-12，让其表格在宽度不够的时候占据一整行，这样好用又美观。

d.最后一个职业推荐页面有一个挺蛋疼的地方就是 首页>合作企业下面的那行方向文字：因为字体不能缩小的问题，所以缩到第二行的时候会在方向下面，只能把方向这2给字给包一个元素；然后那一边一行包一个div，然后运用媒体查询进行位置调节。

收获

1.如何实现轮播图？

目前轮播实现是直接套用的轮播模板，然后修改一些上传图和样式实现的~~~~真的，因为任务要求没有需求理解，所以并没有深入去学习，套用了就好。

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

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

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

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

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

Animation属性有给关键的属性，那就是"Keyframes",我们把他叫做“关键帧”。

定义：一个动画初始属性和最终属性，

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

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

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

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

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

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

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

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

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

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

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

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

 @-webkit-keyframes "loop"{

            0% { background: url("images/m15.jpg") no-repeat;}

            25% { background: url("images/m10.jpg") no-repeat;}

            50% { background: url("images/m11.jpg") no-repeat;}

            75% { background: url("images/m12.jpg") no-repeat;}

            100% {background:  url("images/m15.jpg") no-repeat;}

        }

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

目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。 

四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。五大浏览器采用的都是单内核。

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

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

1.正正取最大

2.负负取绝对值最大

3.正负取相和

5.bootstrap有哪些常用组件？

1.轮播图

2.下拉菜单

3.响应式导航栏

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

1、对于自身的影响

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

2、对文档流的影响

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

响应式导航栏

3、对浮动元素的影响

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

4、对绝对定位的影响

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

拓展知识：

HTML中       等6种空白空格的区别

HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（       ‌‍）在不同浏览器中宽度各异。

          

它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

         

它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

         

它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

         

它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

‌ 

它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌

‍

它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。

此外，浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（	）、换行（
）和回车（
）还有（　）等等。