今天完成的事情：

    了解ui-bootstrap生成原理。

明天计划的事情：

    1.完成搜索部分样式

    2.完成轮播图功能。

遇到的困难：

     对于找职位左边类似侧边栏的搜索页。看了一下原型，是用hover效果实现的，但是原型不能移动到hover展示的部分，而实际需求中肯定需要点击hover展现的部分，然后跳转到职位搜索页面，这就是一个难题了。现在稍微有了一些思路，能不能弄个大的div把hover展示出的和已经显示的统一设置成有hover效果的标签，然后在未显示的部分设置成display:none;并分成3份；在其它的已显示的标签分别对应未显示的标签设置hover效果，当鼠标移到搜索页面时，相对应的标签的display属性为block；这样的话应该就能够实现可以点击到hover显示的页面。

收获：

今天的收获主要还是对于ui-bootstrap实现轮播图功能。首先需引入angular.js,angular-animate.js,angular-sanitize.js,ui-bootstrap-tpls.js,还有bootstrap.css这几个文件，然后html页面如图所示

<div style="height: 350px">
  <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
    <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
      <img ng-src="{{slide.image}}" style="margin:auto;">
    </div>
  </div>
</div>

    在这里面intercal控制banner图片停留时间，而no-wrap属性则是当轮播到最后一张图时，是否继续轮播。通过ng-repeat渲染出相对应的图像,所对应的js文件为

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', Carouse);
function Carouse($scope) {
$scope.myInterval = 3000;
   $scope.noWrapSlides = false;
   $scope.active = 0;
   /*var slides = $scope.slides = [];
   var currIndex = 0;*/

   $scope.addSlide = function() {
/*var newWidth = 600 + slides.length + 1;
       slides.push({
           image: '//unsplash.it/' + newWidth + '/300',
           /!*text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
            *!/                id: currIndex++
       });*/
   };

   for (var i = 0; i < 4; i++) {
        $scope.addSlide();
   }

通过设置$scope.noWrapSlides=3000来控制banner图每隔3秒轮换一次，然后使用for循环设定执行addSlide()函数的次数，然后通过addSlide获取相对应的图片，完成轮播效果