網站上banner對應的css程式碼

<!-- banner開始 -->
<section>
<div class="banner">
      <ul>
          <li style="background-color:#5CC9E0; text-align: center;">
            <img src="<{$site_info.s_url}>/theme/images/banner1.jpg" />
            <h1>企業逼格靠網站，網站逼格靠相容<br
 
 /><small>懶人出品的網站，在電腦、平板、手機、微信，都正常瀏覽！</small></h1>
          </li>
          <li style="text-align: center;">
            <img src="<{$site_info.s_url}>/theme/images/banner2.jpg" />
            <h1>企業400熱線電話<br /><small>一個號碼，一致對外！</small></h1
 
>
          </li>
        <!-- <{foreach from=$index_img item=con name=foo}>
          <li style="background-color:#333;">
           <a href="<{$con.link}>"  title="<{$con.title}>"><img src="<{$site_info.s_url}>/attached/<{$con.img}>" alt="<{$con.title}>" /></a>
          </li>
        <{/foreach}> -->
 

      </ul>
      <a href="javascript:void(0);" class="unslider-arrow prev">&#xe628;</a>
      <a href="javascript:void(0);" class="unslider-arrow next">&#xe627;</a>
</div>
<script type="text/javascript" src="//unslider.com/unslider.js"></script>
<script type="text/javascript">
      $(function() {
        var unslider = $('.banner').unslider({
          speed: 500,               // 動畫的滾動速度，數字越大越慢
          delay: 8000,              //  每個滑塊的停留時間
          complete: function() {},  //  每個滑塊動畫完成時呼叫的方法
          keys: true,               //  是否支援鍵盤
          dots: true,               //  是否顯示翻頁圓點
          fluid: true              //  支援響應式設計（有可能會影響到響應式）
        });

        // banner箭頭部分
        $('.unslider-arrow').click(function() {
          var fn = this.className.split(' ')[1];
          unslider.data('unslider')[fn]();
        });

      });
</script>
</section>
<!-- banner結束 -->

網站上banner對應的css程式碼

   .banner { position: relative; overflow: auto; }
    .banner ul { padding:0; margin:0; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }
  /*--banner中的圓點部分 --*/
  .banner .dot {
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  }

  .banner .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    width: 100%;
    text-align: center;
  }
    .banner .dots li {
      display: inline-block;
      *display: inline;
      zoom: 1;

      width: 10px;
      height: 10px;
      line-height: 10px;
      margin: 0 4px;

      text-indent: -999em;
      *text-indent: 0;

      border: 2px solid #fff;
      border-radius: 6px;

      cursor: pointer;
      opacity: .4;

      -webkit-transition: background .5s, opacity .5s;
      -moz-transition: background .5s, opacity .5s;
      transition: background .5s, opacity .5s;
    }
      .banner .dots li.active {
        background: #fff;
        opacity: 1;
      }

    /*用到了houweb.css裡的網路字型,讓左右箭頭顯示出來，注意下！*/
    .banner .unslider-arrow {
      font-family:"lanren2016";
      font-size:50px;
      font-style:normal;
      position: absolute;
      width: 60px; height: 60px;
      top:50%;
      margin-top: -30px;
      text-decoration: none;
    }
    .banner .prev {
      left: 15px;
    }
    .banner .next {
      right: 15px;
    }