本文将带你了解WEBAPP开发教程ionic—基于web的移动端app开发框架(CSS篇1)，希望本文对大家学WEBAPP有所帮助。

ionic是一款可以利用html5+css3+javascript搭建移动原生应用的一个工具。
    ionic CSS（1）
    1、header部分：
    1.1基本语法
      <div class=”bar bar-header”><h1 class=”title”>header</h1></div>
    给class添加不同的属性可以定义不同的颜色：
      bar-light bar-stable bar-positive bar-calm bar-balanced bar-energized bar-assertive
    bar-royal bar-dark
    2.2补充：头部代码示例
    <ion-view>
      <ion-content class=”no-header”>
          <div class=”bar bar-header bar-royal”>
      <a href=”#” class=”button button-icon icon ion-gear-a”></a>//设定左侧按钮及图标
    <h1 class=”title”>header</h1>
    `   <a href=”#” class=”button button-icon icon ion-heart></a>//ionic自动将最后一个图标放在最右侧，其他图标从左向右一次排列
    </div>
      </ion-content>
    </ion-view>
    2、sub header部分：
      <div class=”bar bar-header”><h1 class=”title”>header</h1></div>
      <div class=”bar bar-subheader”><h2 class=”title”>header</h1></div>
    3、footer部分：
    <div class=”bar bar-footer”></div>
    footer可以使用和header相同的颜色样式
    4、button部分
    4.1基本语法：<button class=”button”>button</button>
    button可以与header颜色使用相同颜色默认样式
    添加button-full 使button占满父元素宽度
    button-small和button-large为ionic中内置的大小设置
    添加button-outline，只显示框线的button
    4.1制作带icon的button：
    <button class=”button”>
    <i class=”icon ion-loading-c”></i>Loading...
    </button>
      4.3button组：<div class=”button-bar”><a class=”button”>first</a>......</div>
     
         

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WEBAPP频道！