4.23

angularjs 修改选中样式
HTNL代码

div class="comTitStyle">
  

    推荐
  
  

    热点
  

控制器代码

.controller('newsCtrl', function($scope) {
  //定义要聚焦的索引
  $scope.focusIndex=0; //默认显示推荐板块
  $scope.recHide = false;
  $scope.hotHide = true;
  $scope.titleClick = function(index){
    $scope.focusIndex=index; //点击切换样式
    if(index == 0){
      $scope.recHide = false;
      $scope.hotHide = true;
    }else if(index == 1){
      $scope.recHide = true;
      $scope.hotHide = false;
    }
  }
})

css代码

.comTitStyle{
  width: 16rem;
  height: 2rem;
}
.comTitStyle > div{
  display: inline-block;
  width: 7.9rem;
  height: 2rem;
  vertical-align: middle;
  text-align: center;
  line-height: 2rem;
}
.comTitStyle > div > a{
  width: 2.5rem;
  height: 1.9rem;
  display: inline-block;
  vertical-align: middle;
  font-size: .8rem;
  color: #666666;
}
.comTitStyle > div > .selected{
  border-bottom: 1px solid #3BB4C1;
  font-weight: bold;
}

添加阴影效果
首先我们来看看css给图片添加阴影效果的第一种方法：设置box-shadow属性，通过一个简单的代码示例来看看box-shadow属性的实现方法。

box-shadow属性设置图片阴影是不是很简单，下面我们来看看box-shadow属性的是如何设置的：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需设置的值，定义水平阴影的位置。允许负值。

v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。

blur：可选设置的值，定义模糊距离。

spread：可选设置的值，定义阴影的尺寸。

color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。

inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。

接下来我们来看看css给图片添加阴影效果的第二种方法：使用css3的滤镜属性-----filter 属性设置图片阴影。

可以设置filter:drop-shadow(）;来给图片添加阴影，我们来通过一个简单的代码示例看看实现方法。

说明：

filter:drop-shadow(h-shadow v-shadow blur spread color);

h-shadow：设置阴影的水平方向偏移量；允许负值，负值会使阴影出现在元素左边。

v-shadow：设置阴影的垂直方向偏移量；允许负值，负值会使阴影出现在元素上方。

blur：设置阴影的模糊度，值越大，越模糊，阴影也就会变得更大更淡；不允许负值，若未设定，默认是0 (阴影的边界很锐利)。

spread：设置阴影的尺寸，正值会使阴影扩张和变大，负值会是阴影缩小；若未设定，默认是0 (阴影会与元素一样大小)。
注：在Webkit以及其他一些浏览器中不支持spread，如果加了也不会渲染。

color：设置阴影颜色；若未设定，颜色值基于浏览器，建议设置颜色。
angularjs点击展开更多
html代码

    
    



    

        
            {{text}}
        
    

js代码

var expanderModule = angular.module('expanderModule', [])
expanderModule.directive('expander', function() {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: {
            title: '=expanderTitle'
        },
        template: '
' + '
{{title}}
' + '
' + '
',
        link: function(scope, element, attrs) {
            scope.showMe = false;
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
            }
        }
    }
});
expanderModule.controller('SomeController', function($scope) {
    $scope.title = 'Click Title To Expand';
    $scope.text = 'Techbrood is a leading searching engine on creatives';
});
css代码
.expander {
    border: 1px solid black;
    width: 250px;
}
.expander > .title {
    background-color: black;
    color: white;
    padding: 0.1em 0.3em;
    cursor: pointer;
}
.expander > .body {
    padding: 0.1em 0.3em;
}