任务进展：

       1：完成了首页和合作企业页面的响应式布局。

       2：使用bootstrap响应式导航栏重写首页导航。

遇到问题：

       1：根据bootstrap栅格系统分界点的阙值，为各部分栅格div添加适当的col-xs-*，col-sm-*，col-md-*，col-lg-*等类名，便可适应显示根据阙值划分的各种屏幕宽度，然后使用媒体查询调整栅格内部元素的样式，具体可参考修真院官网首页的布局效果。首页中战略合作企业和友情链接部分无法用栅格来写，自己用flex写，企业为5个图像块，友情链接分为10个列表块，设置固定宽高，调整对齐，flex控制缩放，flex-wrap控制换行，完成。

       2：写企业页面响应式时，左栏企业列表将不能再使用前面的空col-xs-4栅格占位方法，因为当宽度变大时，列表栅格左边缘位置相对于上方“合作企业”标题超出，显示效果不佳。采用基本的div内嵌列表，文字左对齐，设置固定宽度（越接近文字宽度越好），利用margin：0 auto；实现居中。

       3：查看菜鸟教程bootstrap响应式导航栏，重写首页导航栏，添加技能树图标，然后使导航列表浮动居右，设置其中a元素的样式，加上悬浮显示下方白线效果，调整边距对齐，小屏幕时调整按钮位置，调整其下拉选项文字位置，完成。

明日计划：

       书写职业介绍页面响应式并调试。

收获：

       任务8页面内容比较多，实现各种细节对齐是很繁琐的事情，最好对需要调整样式的栅格div添加一个自己的类名，写媒体查询样式会方便很多，避免许多因类名而引起的样式冲突问题，但不要与bootstrap自带的类名重名。