今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

1、完成任务三个页面最后的调试内容。

昨天主要是完善一些小细节上的问题，例如导航栏标题的hover，还有第三个页面的圆点和文字的hover效果，再就是首页五张企业logo的阴影效果的问题等等。

    （1）有一些大问题，例如企业文化的logo图片是五张，怎么用栅格来写，或者是不用栅格怎么达到你想要的效果。

这里有一个我觉得很麻烦的问题，就是ps切图，必须保证每个图片的大小一致，这样在排列的时候至少比例上看着是一样的，后面切图的时候会比较注意每个尺寸的宽高差不多，然后在设置img的width和height的时候设置一样的px值。

如：   

      保证五个能在同一行排列。这里我没有用栅格来分布，我是用的row来嵌套的，然后通过媒体查询保证在我想要的屏幕分辨率下达到我想要的效果，就如我写完五个logo能排列在一起 ，但是在小于990px值的时候图片会挤到一起，后面我设了flex-flow：row wrap这个属性后图片就会被挤到下一列，布局上看着很奇怪，后面我想了下，我保证在990px以上五个logo图片排列是不变的，在小于990px值我就让每个单独展现一列，如下图：

这样写之后，然后就要调试在这个px值以下的样式发生改变，同时还有阴影效果的宽度的改变，前面是小图片的阴影，现在是变宽，这里用了媒体查询来写的：

hover的效果就是把hover需要的阴影效果的宽度改成一样的100%，这样在单独显示一个的时候不会那么奇怪。

   （2）再就是首页的友情链接那一块文字的问题，因为用的是ul和li标签来写，之前是分两个ul来嵌套，分成8个一列，但是后面发现在不同的px值下会不太好看，所以这里我就固定宽度然后文字的样式不会随着屏幕分辨率变小而发生移动，文字随着移动时会改变它发生的排列，我就在调试的过程中看在多少px下它会移动，然后再用媒体查询来固定它在改变的那个屏幕分辨率下的样式，保证它不会发生移动改变。然后让它保证居中。

网页效果：

    （3）再就是头部技能树logo和客服电话和主体内容的对齐，这里我发现一个很有趣的，因为我除了导航栏引用的组件用的绝对定位之外，我后面用的都是flex弹性盒子，所以就会出现在移动屏幕分辨率的时候，主体和客服那一列会随着拉伸网页而发生移动，但是导航栏是绝对定位是固定位置不变的，我就在找原因怎么解决，后面再调试的过程中发现了，原来我前面用的都是bootstrap的栅格来写的，所以就运用了一个栅格里主要的div类名：

这个是写栅格最主要的类名，因为它自带padding和margin的属性，每一个col的值在不同的屏幕宽度都是width：100%，所以在移动网页调试的屏幕分辨率时会发生移动位置的改变。找到原因就好解决了，然后我就在导航栏组件里<nav>中家里“container”的类名，然后在给nav的类名设置背景颜色，这样就能保证背景颜色的全部显示又能让文字logo对齐。

如图：不同分辨率下都能保持一致对齐。

2、完成提交任务8.9。

然后被师兄检查出的几个问题。

（1）header头部导航栏a标签的hover效果，在鼠标移动上去的时候会发生跳动，

在鼠标移动后下面的轮播图会因为hover的效果之后发生跳动，感觉像是a标签设的宽度与ul标签的宽度不一致，所以在hover效果过后本来通过a标签挤下来的空间又弹回去了，ul的border-bottom也有边框，我给ul设的hover，后面的解决方法是关师兄指导的，最简单方便的方法，直接给a标签的类名text设一个border-bottom：1px 和导航栏背景一样的颜色就解决了。开始我还摸不清是什么跳动，后面再自己去调试的时候就看到了，哈哈，对于hover选择器的理解还不是很熟悉。

（2）再就是一些div的宽度和hover效果的宽度不一致，修改下就好了。很多细节的问题自己会比较容易忽视，昨天一直都在调试布局上的媒体查询。

（3）在就是正文页面的小圆点和文字同时出发hover的效果难到我了，我是用的<span>标签套的圆点的div和文字，如下：

所以，我设了两个hover效果，一个是给span的类名“circle-text”设的hover，这里span嵌套了文字，所以我给它设的hover效果是改变文字的颜色，然后又给“circle”小圆点的类名设了hover效果，这里我就在hover里重新写了个实心的小圆点，然后再通过hover触发改变成实心的小圆点。如：

这时就发生了一个问题，因为span包含了文字和小圆点，所以我在触发小圆点的时候两个的hover是会同时发生改变的，但是单独点文字的时候小圆点就不会发生hover效果，后面就这个问题询问了下师兄，师兄说我的写法会增加代码量很麻烦，其实方法很简单，代码如下：

circle-text：hover是让文字颜色发生改变，下面的选择器的写法是.circle-text：hover是选择你要触发hover效果的条件因为这个类名是最大的。后面.circle这个类名是作用于小圆点的，所以同时设两个，一个给字体一个给小圆点，所以在不管是触发小圆点还是文字的时候都能发生改变。

    师兄说计算机语言其实只要理解了意思，写出来就能清楚很多，写之前想想你要起到什么作用在来写。

明天计划的事情：（一定要写非常细致的内容） 

1、开始进行任务10的代码编写。

遇到的问题：（遇到什么困难，怎么解决的）

完成的事情就是遇到的问题。

 
收获：（通过今天的学习，学到了什么知识）

媒体查询的运用设置改变不同分辨率下的样式。hover选择器写法的理解。