今日完成：任务八首页基本完成  

明日计划：争取完成任务八后两页 

今日遇到的问题：

1.hover企业图时，需要将包含它的"col-xs-，col-sm-"等去掉内边距 。这样hover时才能看起来像包含了整个图的外边距。

2.在火狐上打开和chrome,以及360浏览器上打开字体效果差异很大，但是之前的csstask从没有出现过这种问题。

3.在用bootstrapt实现响应式导航栏时，需要对boostrap组件的某一部分css代码重构，需要用F12一个一个查找需要改动的元素，感觉有点麻烦。

4.打开页面时，图片很久显示出来，怎么优先渲染一下呢？不然体验很差。

今日收获：

1.学到了css的响应式导航栏  -可折叠导航栏    确实用起来很好用

       为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

‍‍ 

<nav class="navbar navbar-default" role="navigation">    

   <div class="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>      

       <span class="icon-bar"></span>       

     <span class="icon-bar"></span>  <!--      导航栏小图标    -->

       <span class="icon-bar"></span>     

     </button>     

 </div>     

  <div class="collapse navbar-collapse" id="example-navbar-collapse">       

 <!--        根据实际需求修改 其自带样式         -->

   <ul class="nav navbar-nav">       

     <li class="active"><a href="#">iOS</a></li>        

     <li class="active"><a href="#">iOS</a></li>                                      <!--  具体的连接 ，此处链接还可以嵌套下拉菜单    -- 

      <li class="active"><a href="#">iOS</a></li>

   </ul>  

 </div>   

</div>

</nav>‍‍

2.今天陆陆续续给代码块上注释，不然越写越多查找修改工程量都很大。

3.学习使用了css3新的选择器

[attribute^=value]:

选择该属性以特定值开头的元素

[attribute$=value]:

选择该属性以特定值结尾的元素

[attribute*=value]:

选择该属性中出现了特定值的元素

这三个选择器挺好用的，可以批量选择一些元素。

进度：CSS-任务8

开始时间：2018.06.04

结束时间：2018.06.08

有无延期风险： 无。

禅道：http://task.jnshu.com/zentao/my/