/*輪播圖公共樣式*/
/*
一個頁面可能出現多個結構相同的輪播圖
把結構公共部分的代碼提取出來,
調用公共結構後,只需要另外自定義一個控制大小的類名引用即可;
*/
.banner-box {
  position: relative;
  overflow: hidden;
  /*
  同級定義一個控制大小的類
  big-banner {
    width: 810px;
    height: 325px;
  */
  .img-box {
    /*
    這裏需要控制圖片盒子ul的寬度
  .img-box {
      width: 1620px;
      height: 325px;
    }
    */
    li {
 

      float: left;
      width: 50%;
      height: 100%;
      a {
        display: block;
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .banner-indicator {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 30px;
 

    .indicator-btn {
      display: inline-block;
      margin: 0 3px;
      width: 30px;
      height: 5px;
      background-color: #fff;
    }
    .indicator-btn.active{
      background-color: #FF7700;
    }
  }
}
設置的單獨樣式
.mk-banner {
　　輪播圖的容器盒子
  .big-banner {
    width: 810px;
    height: 325px;
    margin-left: 189px;
 
　　　　放圖片的大盒子ul
    .img-box {
　　　　n張圖片就是最外層容器的n倍
      width: 200%;
      height: 325px;
    }
  }
}

輪播圖公共樣式提取