今天完成的事情：

做完了任务8，但还有很多要调整的自适应样式

主要用到的是bootstrap中的导航条、轮播图和栅格

导航条

.navbar用于设置导航条，通常是一个<nav>元素或者被指定了role=“navigation”的<div>元素

.navbar-default 和.navbar-inverse 分别是默认样式和默认样式的反色样式。

可以在导航条最前端添加logo，或者按钮表单等

bootstrap中的导航条在移动端可被隐藏，并显示一个按钮用于打开导航条组件

.navbar-toggle是导航条的按钮

.collapse 设置后默认导航组件被隐藏

.navbar-collapse 装载被折叠起来的导航条

任务8中，需要对导航条的默认样式进行修改。

.navbar-default {

  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);

}

bootstrap.theme.css样式表中的默认样式设置背景为白银色渐变。

将其改为绿色，如下（添加到自己的css文件中即可覆盖）

.navbar-default {

  background-image: linear-gradient(to bottom, #29b078 0%, #29b078 100%);

  border:none !important;

}

.navbar-default .navbar-nav>li>a { /*更改导航按钮颜色和背景色*/

    padding-bottom: 25px;

    color: #fff !important;

}

.navbar-default .navbar-nav > .active > a {  /*更改导航按钮被激活链接的颜色和背景色*/

  color: #fff !important;

  background-color: #29b078 !important;

}

.navbar-collapse { 

   right: 0;  

  position: absolute;

  padding: 0 50px;

  border: none !important;

  z-index: 100;

} /*调整导航组件的位置*/

小结：在bootstrap源样式表中找到对应的类进行针对性的修改就可以实现样式的更改。有时需用到！important强制更改。

栅格

bootstrap要求将网格布局放置在一个特定的容器中，这个容器通常是container或者container-fluid

container用于固定宽度并支持响应式的容器，自带一个边距

container-fluid用于占领viewport宽度的100%容器，没有边距，占满父元素宽度。

在容器内网格被分成一行12等分。

指定class=“row”来定义行，指定class=“col-xx-N”来定义单元格，其中xx可选择lg、md、sm、xs，对应不同的viewport；N在1~12之间，表示占据N等分。在一个div中添加不同viewport 对应得类就可以实现自适应。

row必须放在container或者container-fluid中，col-xx-N必须放在row中。

col-xx-N和row默认15px的左右内边距，外层容器默认－15px的左右外边距，抵消了接壤的内边距。

因此，最外层的单元格会紧贴上层容器的边框。

单元格的偏移：col-xx-offset-N 是通过设置margin-left实现单元格向又偏移。易出错。

单元格的排序，col-xx-push-N 和col-xx-pull-N push向左推，pull向右拉，可实现单元格交换位置，也可以用于偏移，是基于left和right的值实现的，相比offset更稳定。

bootstrap的网格系统也是支持嵌套的，嵌套时不需要再放在container或者container-fluid内。可再某一列中再次添加class=“row”增加行。

当单元格宽度在一行内超过了12时，会自动换行，但有时自动换行后，因为上一行单元格高度不一致，无法与上一行的第一列左对齐。

这时需要列重置，使用clearfix样式，并结合visible-xx，效果如下

小结：bootstrap的栅格布局可以解决大部分自适应的问题。

 @media媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式。

1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){

 .ads {

   display:none;

  }

}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3.多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){

  body {background-color:#f5f5f5;}

}

更多方式：https://www.runoob.com/cssref/css3-pr-mediaquery.html

明天计划的事情：

还有很多需要调整的细节，包括:

1、层次化的响应。

2、职业列表页中取消换行；

3、解决职业列表页hover效果不完全覆盖问题；

4、调整职业列表页中内部边框；

5、在首页学员展示部分在xs屏中添加间距；

6、要解决首页合作企业的品牌图标使用雪碧图难以自适应，宽度缩小后不能等分的问题

遇到的问题：

1、随着页面宽度缩短，当“高效”部分文字换行时“人脉”部分会被挤到右边，需要列重置。

添加<div class="clearfix visible-sm"></div>

2、首页隐藏的导航条展开后会被轮播图覆盖

分析错误原因，是轮播图遮挡住了导航条

把float：right改成 right：0，

并添加绝对位置和z-index更换轮播图和导航条的顺序。

但还存在的问题是导航条展开后不是把轮播图推下去，而是遮盖住。明天解决这个问题。

收获

bootstrap栅格的使用，和媒体查询