ionic 教程尝试一下

安科网

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>安科教程(www.ancii.com)</title>
    <link href="https://img.s.ancii.com/tutorial/archive/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="https://img.s.ancii.com/tutorial/archive/static/ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
    angular.module('ionicApp', ['ionic'])

.controller('SlideController', function($scope) {
      
      $scope.myActiveSlide = 1;
      
    })
    </script>
    <style type="text/css">
    .slider {
      height: 100%;
    }
    .slider-slide {
      padding-top: 80px;
      color: #000;
      background-color: #fff;
      text-align: center;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
      font-weight: 300;
    }

.blue {
      background-color: blue;
    }

.yellow {
      background-color: yellow;
    }

.pink {
      background-color: pink;
    }
    </style>
  </head>

<ion-slide-box active-slide="myActiveSlide">
    <ion-slide>
      <div class="box blue"><h1>BLUE</h1></div>
    </ion-slide>
    <ion-slide>
      <div class="box yellow"><h1>YELLOW</h1></div>
    </ion-slide>
    <ion-slide>
      <div class="box pink"><h1>PINK</h1></div>
    </ion-slide>
  </ion-slide-box>
    
  </body>
</html>