在线测试工具 | 千木教程

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>千木教程(qianmu.net)</title>
    <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/ionic/1.3.2/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 {
      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;
    }
		.box{ 
      height:100%; 
    } 
    .box h1{
      position:relative; top:50%; transform:translateY(-50%); 
    }
    </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>