今天完成的事情：

任务8首页的布局完成，第二页的布局有些地方相似直接搬了首页的布局代码，职业介绍页才开始写，

以下是看的一些相关属性知识。

看了一些关于nec的html规范：

• 结构上如果可以并列书写，就不要嵌套。

  如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>

• 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。

  比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>

• 一个标签上引用的className不要过多，越少越好。

  比如不要出现这种情况：<div class="class1 class2 class3 class4"></div>

• 对于一个语义化的内部标签，应尽量避免使用className。

  比如在这样一个列表中，li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

和昨天看的BEM 的说法相似，就是尽量保证一个CSS对应一个模块，不要重复应用过多的CSS样式，方便后期维护与调整。

bootstrap的栅栏网格：

class=“row”（行），然后在row 的子元素里添加class=“col”进行分配网格，其中可以通过class=“w-100”进行网格的换行操作。

class=“col-n”进行分配同行的网格大小。设置co1-md-auto（意味min width）使网格宽度按照内容大小分配。

col-lg一般用于大屏设备，
(min-width:1200px);

col-md一般用于中屏设备，
(min-width：992px);

col-sm一般用于小屏设备，
(min-width：768px);

col-xs用于超小型设备，
(max-width：768px);

后面跟数字是几，也就是占几份（每个占据12份中的几份，每行12份）,
比如是4，也就是一行可以显示3个;
或者12，就是一行可以显示1个。

关于使用，一般设置的话四个属性都用到会比较好，这样就可以在不同屏幕上很好的展示。

比如你有了12个section标签，你想让他们在不同屏幕大小的时候有不同的展示方式，大屏时一行显示6个，中屏时一行显示3个，小屏时一行展示2个，超小屏一行展示1个，你就可以在每一个section标签里面这样写:

<section class = “col-lg-2 col-md-4 col-sm-6 col-xs-12”></section>

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">                   

</div>

当屏幕尺寸

小于 768px 的时候，用 col-xs-12 类对应的样式；

在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；

在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；

大于 1200px 的时候，用 col-lg-3 类对应的样式；

border-images可以说也是CSS3中的重量级属性

从其字面意思上看，我们可以理解为“边框-图片”，通俗的说也就是使用图片作为(对象的)边框，这样一来边框的样式就不像以前那样只有实线、虚线、点状线...那样单调了

与border-image相关的一些属性，有border-image-source、border-image-slice、border-image-repeat

border-image-slice可以取1-4个值，它就像border-width一样，它的几个值遵循上、右、下、左(top、right、bottom、left)的原则，但这几个值是不能带单位的，可以取数字或百分比，当取数字时默认单位为像素(px)

border-image-repeat属性共有3个值：stretch(拉伸)、repeat(重复)、round(平铺)，其中stretch是默认值。在使用时可以取1到2个参数，比如：

就等同于

表示水平方向和垂直方向均使用stretch参数，即水平方向和垂直方向都拉伸。

如果是：

则边框图片在水平方向上平铺，在垂直方向上重复。

在修改大量重复的文字字体时，使用后代选择器会很方便比如这一部分的文字占据了20行。一行一行应用字体颜色和大小的时候太过繁琐，学会使用后代选择器：.父元素 li{样式=“”}一次性修改该父元素内的所有后代li元素。若使用>则是儿子选择器，虽然这部分知识早先看过但还没用过。

明天计划的事情：

明天完成任务8。

遇到的问题和收获：

在添加滚动图片上的文字的时候，不知道要把文字往哪个div里填，后面是想着把文字P属性定位absolute脱离文档流，直接悬浮在滚动的中间，但是相应的问题也出来了，在页面缩放大小的时候，文字使用的单位rem，或者vw导致文字出现的位置并不与我的预期相符。后面直接把图片文字一起切做图片来解决，算是暂时逃避了这个问题吧。

在修改轮播图的指示器样式（三个横杠改为三个小圆点）的时候，找到bootstrap的.carousel-indicators li属性，写个css覆盖宽高和圆角解决。

在写这个绿色图标的时候，采用的栅格，

虽然另外设定了样式flex盒子，使他们居中，但是因为图片的高度不同，导致图标和文字无法对其 。

思路目前是统一图标高度，看最高的图片高度，把矮于此图标的缺口使用margin-top添加上去，后面因为文字也有高度，所以也只能统一文字的高度，以此达到相对居中。

设定虚线密集程度的时候，知道了一个border-image属性，值为url（dashed.png）repeat，具体原理还没研究懂，但是确实有效的改变了虚线的密集度。

在写下面这个栅格的时候，把图片箭头放在了圆圈的左边，这样使上面的如何学习看起来并没有那么居中。

文字p自带属性是block，虽然改变成了inline-block，但是因为文字本身的宽度使他们产生了不一样的排列方式，以及箭头不居中的问题

：解决方案是设定文字统一的宽高，在把箭头放在字体的右边，而不是圆圈 的左边，在给栅格添加一个aline-items：center使箭头居中。

在布局首页的页脚的时候，如果把页脚的范围包进main的container的话，就会导致白色框和绿色框无法达到100%宽度，只能先在footer里建立一个div，

宽度100%，背景色白色，然后在这个div里建立一个div class={row，container}再设定margin：auto达到同等栅格效果。

在写首页的互动下标的时候，因为直接套用的bootstrap的导航栏

而他的文字是包在A标签里的，开始时尝试在A标签设定宽高，后面发现，A标签无法设定宽高，只能在A标签里建立p标签，把字填进去，然后转换为flex盒子设置居中，设置a:hover{}来覆盖掉原本的鼠标互动效果。因为鼠标移动到字体上会出现边框导致挤压到上面的盒子，又不能设定position脱离文档流的情况下，使用透明边框占据原本的位置，移动效果就变成了变色不会出现多余的挤压其他元素的后果。

设置雪碧图CSS的时候，之前没写注释，有时候切图切少了或者缺了点东西，修改代码还得去翻代码看到底是啥。。

算是在吃亏中成长吧,多写注释也能让自己和别人更容易读懂代码和维护代码。

在写职业介绍页的导航栏的时候，技能树图标 不能对其上面的客服热线，调整了几次，暂时没解决，思路是等明天写完主体在进行调整。