zoukankan      html  css  js  c++  java
  • 【代码笔记】Web-ionic tab(选项卡)

    一,效果图。

    二,代码。

    复制代码
    <!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="tabs">
            <a class="tab-item">
        主页
    </a>
            <a class="tab-item">
        收藏
        </a>
            <a class="tab-item">设置</a>
        </div>
    
       <!--图标选项卡-->
    <div class="tabs tabs-icon-only">
        <a class="tab-item">
    <i class="icon ion-home"></i>
        </a>
        <a class="tab-item">
    <i class="icon ion-star"></i>
    
        </a>
        <a class="tab-item">
    <i class="icon ion-gear-a"></i>
        </a>
    </div>
    
     <!--顶部图标加文字选项卡-->
    <div class="tabs tabs-icon-top">
        <a class="tab-item" href="#">
            <i class="icon ion-home"></i>
            主页
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-star"></i>
            收藏
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-gear-a"></i>
            设置
        </a>
    </div>
    
     <!--左侧图标加文字选项卡-->
     <div class="tabs tabs-icon-left">
        <a class="tab-item">
            <i class="icon ion-home"></i>
            主页
        </a>
        <a class="tab-item">
            <i class="icon ion-star"></i>
            收藏
        </a>
        <a class="tab-item">
            <i class="icon ion-gear-a"></i>
            设置
        </a>
     </div>
    
    
    <!--条纹样式选项卡-->
    <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
        <div class="tabs">
          <a class="tab-item active" href="#">
            <i class="icon ion-home"></i>
            Test
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-star"></i>
            Favorites
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-gear-a"></i>
            Settings
          </a>
        </div>
      </div>
      <div class="tabs-striped tabs-color-assertive">
        <div class="tabs">
            <a class="tab-item active" href="#">
                <i class="icon ion-home"></i> Test
            </a>
            <a class="tab-item" href="#">
                <i class="icon ion-star"></i> Favorites
            </a>
            <a class="tab-item" href="#">
                <i class="icon ion-gear-a"></i> Settings
            </a>
        </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    </body>
    
    </html>
    复制代码

     

    参考资料:《菜鸟教程》

  • 相关阅读:
    如何获得浏览器localStorage的剩余容量
    按Enter键后Form表单自动提交的问题
    IE10 11的css hack
    text-transform设置单词首字母大写
    Jade模板引擎(一)之Attributes
    sql server之ROW_NUMBER() OVER()取每组的第N行数据
    CSS3之让背景图片全部显示
    摆脱npm的网络问题: 淘宝npm镜像
    MaskedTextBox的聚焦和光标位置
    将博客搬至CSDN
  • 原文地址:https://www.cnblogs.com/yang-guang-girl/p/9388932.html
Copyright © 2011-2022 走看看