今天完成的事情： 

解决导航栏显示问题。

<div class="header-bottom">
    <div class="container">
        <ul class=" row header-bottom-nav ">
                <li class="nav-bar-item">
                        <a class="item-link" href="task08.html">首页</a>
                    </li>
                <li class="nav-bar-item">
                        <a class="item-link" href="task08.html">职业</a>
                    </li>
                <li class="nav-bar-item">
                        <a class="item-link" href="task08.html">推荐</a>
                    </li>
                <li class="nav-bar-item">
                    <a class="item-link" href="task08.html">关于</a>
                </li>
        </ul>
        <div class=" row header-bottom-btn ">
            <nav class="col-xl-12 navbar navbar-dark">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" >
                    <span class="navbar-toggler-icon"></span>
                </button>
            </nav>
            <div class="collapse" id="navbarToggleExternalContent">
                <ul class="nav-bar-nav">
                    <li class="nav-bar-item">
                        <a class="item-link" href="task8.html">首页</a>
                    </li>
                    <li class="nav-bar-item">
                        <a class="item-link" href="task8.html">职业</a>
                    </li>
                    <li class="nav-bar-item">
                        <a class="item-link" href="task8.html">推荐</a>
                    </li>
                    <li class="nav-bar-item">
                        <a class="item-link" href="task8.html">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

.header-bottom {
    background-color: #26a26f;
}
.header-bottom-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center
}
.header-bottom-nav,
.nav-bar-nav {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
}
.item-link {
    display: block;
    height: 6rem;
    line-height: 6rem;
    padding: 0 .5rem;
    font-size: 20px;
    text-decoration: none;
    color: white;
}
.nav-bar-item :hover {
    border-bottom: 2px solid #f0f0f0
}
.item-link:hover {
    text-decoration: none;
    color: white;
}
.header-bottom-btn {
    display: none;
    vertical-align: middle
}
.navbar-dark {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 6rem;
}
@media screen and (max-width:780px) {
    .header-box,
    .header-bottom-btn {
        display: block;
    }
    .header-top,
    .header-bottom-nav {
        display: none;
    }
    .item-link {
        text-align: center;
    }
}

遇到的问题：

友情链接子项目无法水平居中，若直接使li水平居中，项目符号仍然留在左侧。对ul使用margin： 0 auto；无效。

明天计划的事情： 

解决ul水平居中问题，完成页面轮播图。

使用flex： 1；进行的五列等分布局，还要使用bootstrap完成。

收获： 使用垂直居中时内容无法居中是因为bootstrap自带的margin-bottom值。使用margin-bottom： 0；正常显示。

           bootstrap中无margin-top值，且官方不建议使用。