响应式网页上banner使用，unslider

网站上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;
    }