今天完成的事情：

1.任务八、任务九基本完成。

明天计划的事情：

1.看任务深度思考，并推进任务。

遇到的问题：

1.左边的导航栏主要是用bootstrap的胶囊导航实现的。开始想用列表，但调试了一会不是很成功。于是选择了这个。

默认是横轴排列，需要用flex-direction:column调整成纵向。再从细节上调整margin和padding。

.list-company-main {
    display: flex;
    flex-direction: column;
}

2.导航栏的下划线问题。

鼠标划过菜单时，使用hover，先前写入的border-bottom就会出现。

.distance-word .nav-4:hover {
    border-bottom: 5px solid #fff;
}

不过由于菜单文字上下都没有设置margin和padding，包裹文字的盒子高度是10rem，所以下划线出现时会出现文字跳动，

即文字会比旁边的文字高出一个下面边框的高度。鼠标移开则正常。

如果给hover上下都写进border，包裹文字的盒子高度设置9rem，

.distance-word .nav-4:hover {
    border-bottom: 5px solid #fff;
    border-top: 5px solid #fff;
}

则上下出现边框，并且文字不会跳动。把上面的边框颜色改成一样的背景色就看不出来了。

不过应该还能先把border写好，然后平时使用display：none隐藏，鼠标划过时使用hover，再让它显示出来，应该也是可行的。

多出一大片空白，仔细看是很多超出的文字。原来transition恢复到30%之后，文字过多而超出了边框，所以需要加一个overflow:hidden来修剪超出框外的文字。增加后正常。

收获：

1.媒体查询挺方便的。针对屏幕不同宽度可以对特定样式进行修改。比如

屏幕宽度小于768px时，logo和导航按钮调节至两边，不用留白导致不好看。

2.胶囊导航栏有active和fade的类名，active时内容显示，同时fade的类名下内容会隐藏。这样能实现点击按钮时，只出现按钮名对应的内容，而不出现不对应的内容。

<div class="content-company container tab-pane active" id="website-ali">

<div class="content-company container tab-pane fade" id="website-qq">