《菜鸟教程》

作者: 前端  发布:2019-11-29

一,效果图。

9159.com 1

9159.com,二,代码。

9159.com 2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件,由 Cordova/PhoneGap 提供,(开发过程中显示 404) -->
    <script src="js/app2.js"></script>
    <script src="cordova.js"></script>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>

<body>
    <div class="range">
        <i class="icon ion-volume-low"></i>
        <input type="range" name="volume">
        <i class="icon ion-volume-high"></i>
    </div>
    <div class="list" style="margin-top:13px">
        <div class="ltem item-divider">
            Range In A List.
        </div>
        <div class="item range range-positive">
            <i class="icon ion-ios-sunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="12">
            <i class="icon ion-ios-sunny"></i>
        </div>
        <div class="item range range-calm">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="25">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
        <div class="item range range-balanced">
            <i class="icon ion-ios-bolt-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="38">
            <i class="icon ion-ios-bolt"></i>
        </div>
        <div class="item range range-energized">
            <i class="icon ion-ios-moon-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="50">
            <i class="icon ion-ios-moon"></i>
        </div>
        <div class="item range range-assertive">
            <i class="icon ion-ios-partlysunny-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="63">
            <i class="icon ion-ios-partlysunny"></i>
        </div>
        <div class="item range range-royal">
            <i class="icon ion-ios-rainy-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="75">
            <i class="icon ion-ios-rainy"></i>
        </div>
        <div class="item range range-dark">
            <i class="icon ion-ios-lightbulb-outline"></i>
            <input type="range" name="volume" min="0" max="100" value="88">
            <i class="icon ion-ios-lightbulb"></i>
        </div>
    </div>
</body>

</html>

9159.com 3

 

参谋资料:《生手教程》

本文由9159.com发布于前端,转载请注明出处:《菜鸟教程》

关键词:

上一篇:H5实现魔方游戏
下一篇:没有了