一、今天完成的事情：

1.继续修改任务8

2.使用汉堡导航栏

3.使用新的垂直居中方法

二、明天计划的事情：

完成任务8的修改

三、遇到的问题：

1.使用Bootstrap制作汉堡导航栏，因为之前制作的导航栏在窗口缩小的时候不会折叠成汉堡导航栏，所以重新制作了一下。一开始是直接将Bootstrap汉堡导航栏的代码粘贴进html里，然后将不会折叠的导航栏选择性地放在汉堡导航栏里，这个部分花了一些时间，没有放对位置，还有不是十分清除汉堡导航栏的结构，导致要不样式有问题，要不导航栏弹出的折叠栏被下面的轮播图遮蔽。现在想想可能将之前写的样式全部删除，然后直接在汉堡导航图里添加修改样式可能速度会更快一些。还有本来想修改汉堡导航栏按钮的颜色的，修改的是button元素的background-color样式，可是没有变化，应该是要修改其他的元素，暂不清楚。

2.如何学习栏里，8个流程图的问题。当窗口缩小的时候，绿色箭头会被后面的元素挤压。一开始圆圈、文本、箭头都是使用的div块元素来布局，使用background-image雪碧图来插入图标。因为圆圈和箭头都是固定大小的，设置了文本width宽度为百分比。圆圈跟文本处于同一行，可是绿色箭头却跑到下面去了，所以使用了position:absolute来定位。然后就出现了当窗口缩到一定宽度的时候，绿色箭头被后面的元素挤压。后来尝试用了各种各样的方法都不能完好显示，要不文本无法居中，要不会被挤压。现在给父元素使用了display:table，然后子元素使用display:table-cell，vertical-align:middle。使得文本居中，但是与左右两边的图标有些远，还需要继续调整。

四、收获：

1.自定义Bootstrap汉堡导航栏样式

<nav class="row navbar navbar-default" role="navigation">     （ 使用导航栏 ）
    <div class="nav-cont container-fluid">
        <div class="navbar-header">
            
<button type="button" class="navbar-toggle" data-toggle="collapse"     （ 汉堡导航栏按钮组件 ）
data-target="#example-navbar-collapse">       
<span class="sr-only">切换导航</span>           （仅供屏幕阅读器，用于增强 accessbility（可访问性）
                <span class="icon-bar"></span>               （ 汉堡导航栏里的3条线 ）
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-cont collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">                （ 导航内容区  ）
                <li class="home">
                    <a href="index.html">首页</a>
                    <div class="border"></div>
                </li>
                <li class="job">
                    <a href="index2.html">职业</a>
                    <div class="border"></div>
                </li>
                <li class="recommend">
                    <a href="index3.html">推荐</a>
                    <div class="border"></div>
                </li>
                <li class="about">
                    <a href="#">关于</a>
                    <div class="border"></div>
                </li>
            </ul>
        </div>
    </div>
</nav>

.header .navbar {
    font-size: 0.19rem;
    font-weight: bold;
    text-align: center;
    background-color: #29b078;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}
. header .navbar .navbar-toggle {
    background-color: #ffffff;               更改折叠导航栏图标的背景颜色
}
.header .navbar .navbar-nav {
    width: 100%;                         定义折叠导航栏内容区宽度占一行
    margin: 0;
}
.header .navbar li {
    height: 0.98rem;                      折叠内容的高度
    padding-top: 0.25rem;
}
.header .navbar li a {
    color: #ffffff;                       折叠内容的字体颜色
}
.header .navbar li a:hover {
    
color: #ffffff;                      折叠内容hover的字体颜色
}
.header .navbar .home {
    margin-left: 60%;                     未折叠时第一个导航项的定位
}
.header .navbar .border {               
    margin-top: 0.18rem;
    height: 0.05rem;
    background-color: #ffffff;
    visibility: hidden;
}
.header .navbar .home .border {
    
visibility: visible;                  当前选择的导航项显示border
}
.header .navbar .home:hover .border {       hover效果
    visibility: visible;
}
.header .navbar .job:hover .border {
    visibility: visible;
}
.header .navbar .recommend:hover .border {
    visibility: visible;
}
.header .navbar .about:hover .border {
    visibility: visible;
}

2.使用新的垂直居中方法

当块元素跟内联元素在同一行的时候，并且内联元素时多行文本其高度会变化，不知道怎么让其一起垂直居中。今天找到了一个方法就是外包一个div，然后使用display:table样式，再在内联元素使用display:table-cell和vertical-align:middle，这样就使得文本居中，即使其高度会变化，但是会出现个小问题，就是距离块元素距离好像会过远，明天寻找看下有什么解决办法。

<div class="study container-fluid">
    <div class="hstudy">如何学习</div>
    <div class="rstudy row">
        <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                <div class="study-num">1</div>
                <span class="study-text">匹配你现在的个人情况寻找适合自己的岗位</span>
                <img class="study-arrow" src="img/icon-dec.png"/>
        </div>

.study {
    margin-top: 0.2rem;
}
.study .hstudy {           
    font-size: 0.21rem;
    font-weight: bold;
    
text-align: center;             如何学习 标题居中
   margin-bottom: 0.5rem;
}
.study .cstudy {
    display: table;                父元素变为table
    position: relative;
    height: 0.9rem;
    width: 20%;
}
.study .cstudy .study-num {
    margin-top: 0.1rem;
    background: url("img/icon.png") no-repeat -1rem -3rem;
    height: 0.72rem;
    width: 0.72rem;
    text-align: center;
    line-height: 0.72rem;
    color: #1db176;
    font-weight: bold;
    float: left;
}
.study .cstudy .study-text {
    width: 25%;
    color: #9e9e9e;
    font-size: 0.14rem;
    padding-left: 0.1rem;
    display:table-cell;                    子元素变为table-cell
    vertical-align:middle;                  垂直居中效果
}
.study .cstudy .study-arrow {             调整绿色箭头的位置，使之居中对齐
position: absolute;
top: 35%;
}

进度：任务8

任务开始时间：06.07

预计demo时间：06.16

是否有延期风险：有

禅道：http://task.ptteng.com/zentao/project-task-729.html