任务十五

今天完成的事情

1. 1. 完成轮播图自动轮播，按钮切换等功能。
2. 2.完成响应式导航栏基本功能的实现。附上bootstrap响应式导航栏html结构和css样式，css只涉及布局部分。
3. 
   

4. <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" id="btn">
            <span class="nav-menu">菜单</span>
         </button>
      </div>
      <div class="collapse navbar-collapse" id="example-navbar-collapse" >
         <ul class="my-nav">
            <li><a>首页</a></li>
            <li><a>职业</a></li>
            <li><a>推荐</a></li>
            <li><a>关于</a></li>
         </ul>
      </div>
   </div>

css部分

*{
  margin: 0;
  padding: 0;
}
.main{
  width:100%;
  .container{
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    height: 100px;
    background-color: orange;
  }
}
.my-nav{
  transition: all 2s;
  &>li{
    list-style: none;
    text-align: center;
  }
}
.navbar-header{
  height: 40px;
  .navbar-toggle{
    float: right;
  }
}
@media (min-width: 768px) {
  .navbar-header {
    float: left;
    .navbar-toggle{
      display: none;
    }
  }
  .collapse{
    .my-nav {
      float: right;
      &>li{
      float: left;
      list-style: none;
    }
    }
  }
}
.navbar-collapse{
  display: none;
}
@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block ;
    height: auto !important;
    overflow: visible !important;
  }
}

布局方面bootstrap是利用块级元素独占一行和浮动元素一行排列的特性并加上媒体查询来实现的。大屏幕时，nav-header和nav-bar都浮动，小屏幕时不浮动，各自独占一行。

但是动画方面如何实现暂时没有头绪。

明天计划的事情

1. 1.完成响应式导航栏的实现。
2. 2.完成任务15。

1. 1了解了轮播图的基本实现方式。
2. 2.原生js动画函数的书写。
3. 3.小课堂上师兄讲解了如何使用git来托管博客，感觉比较麻烦，我是使用的自己的虚拟主机托管的。