0x001 简述

系统：win10
IDE：WebStome
教程地址：http://www.hubwiz.com/class/5507ca5be564e51314f544e4

0x002 安装ionic

npm install -g ionic

0x003 初始化项目

空白项目：
```
ionic start myApp blank
```

Paste_Image.png

底部切换标签：
```
ionic start myApp tabs
```

Paste_Image.png

带侧滑菜单：
```
ionic start myApp sidemenu 
```

Paste_Image.png

Paste_Image.png

0x004 布局模式

Paste_Image.png

.bar.bar-header：声明元素为标题区
.bar.bar-footer：声明元素为页脚区
.content：声明元素为内容区

0x005 bar样式

Paste_Image.png

案例一：添加头部条和底部条
-代码：

标题栏

底部栏
- 效果：

Paste_Image.png

- 说明如果不加颜色样式，则为白色

案例二：添加颜色的头部条和底部条
- 代码：
```
标题栏


底部栏
```
- 效果：

Paste_Image.png

案例三：添加副标题和副底部

代码：


  腾讯新闻


  
    要闻
    财经
    娱乐
    体育
    科技
  


  
    要闻
    财经
    娱乐
    体育
    科技
  


  
    新闻
    图片
    话题
    热点

效果：

Paste_Image.png

0x006 content

Paste_Image.png

.content：流式定位，内容元素在文档流中按顺序定位
.scroll-content：绝对定位，内容元素占满整个屏幕

案例一：scroll-content

代码：


  header


  content
  content
  content
  content


  footer

效果：

Paste_Image.png

案例二： content

代码：


  header


  content
  content
  content
  content


  footer

效果：

Paste_Image.png

0x007 色彩样式：可以用在所有控件

Paste_Image.png

0x008 图标

.icon：将元素声明为图标
.ion-{icon-name}：声明要使用的具体图标

代码：

效果：

Paste_Image.png

0x008 边距

Paste_Image.png

代码：

.padding-top

.padding-bottom

.padding-left

.padding-right
效果：

Paste_Image.png

0x009 list

Paste_Image.png

案例一：
- 代码：
  - Battletoads
  - Contra
  - Duck Tales
  - Mega Man
  - Metroid
  - Mike Tyson's Punch-Out
- 效果：

Paste_Image.png

案例二：带item

Paste_Image.png

代码：

  
    列表成员
  
  
    
      Battletoads123
      Contra15
      Duck Tales
      Mega Man
      Metroid
      Mike Tyson's Punch-Out20

效果

Paste_Image.png

案例三：多种样式文字

代码：

  
    今日头条 
    
  
  
    
      
        国务院常务会议部署推进公司注册资本登记制度改革
        中国青年报
      
      
        大黄鸭在北京两个月创收超两亿元 今日离京
        中国经营报
      
      
        LinkedIn创始人：在见风投之前，我希望自己当时懂得这七件事...
        虎嗅网
      
      
        美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶
        新浪新闻

效果：

Paste_Image.png

-案例四：带图标

代码：

  
    
    酒店搜索
    
  
  
    
      
        
        入住城市：当前位置
        
      
      
        
        入住日期：7月27日 星期五
        
      
      
        
        价格范围：不限价格

效果：

Paste_Image.png

案例五：嵌入图片：
- 代码：
  
  Header
  
  Venkman
  
  我们周末去爬山吧！
  
  Ray
  
  真的好好吃啊...
  
  Egon
  
  什么时候去看演唱会啊，...
  
  Winston
  
  I love this game!
  
  Chat
  Address
  Discovery
  Profile
- 效果：

Paste_Image.png

案例六：略缩图

代码：

 
   今日头条 
   
 
 
   
     
       国务院常务会议部署推进公司注册资本登记制度改革
       中国青年报
     
     
       [站外图片上传中……(5)]
       大黄鸭在北京两个月创收超两亿元 今日离京
       中国经营报
     
     
       LinkedIn创始人：在见风投之前，我希望自己当时懂得这七件事...
       虎嗅网
     
     
       [站外图片上传中……(6)]
       美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶
       新浪新闻

效果：

Paste_Image.png

案例七：嵌入大图

Instagram

Thomasguy

[站外图片上传中……(8)]

44 likes
- 效果

Paste_Image.png

0x010 button

Paste_Image.png

-案例一：

代码：

按钮
效果：

Paste_Image.png

案例二：按钮嵌入图标
- 代码：
  
  图标按钮
  
  Learn More
  Back
  
  Reorder
- 效果：

Paste_Image.png

案例三：列表嵌入图标按钮
代码：

列表中使用按钮
- 新闻
- 邮件
- 电话
- 设置
- 云服务
- 在线帮助
- 效果：

Paste_Image.png

0x011 input
http://www.hubwiz.com/course/5507ca5be564e51314f544e4/img/0032.png

案例一：文本输入 : input[type="text"]
- 代码：
  
  表单输入
  
  账号
  
  口令
- 效果：

Paste_Image.png

案例二：文本输入：堆叠式标签
- 代码：
  
  Username
  
  Password
- 效果：
  
  Paste_Image.png
案例三：文本输入：使用占位符做标签
- 代码：
  
  记住密码
- 效果：

Paste_Image.png

案例四：文字输入框
- 代码：
  
  livio
  
  Email
  
  Password
- 效果：
  
  Paste_Image.png
案例五：toggle
- 代码：
  
  信息
  - iMessage
  - 短信/彩信
  - 字符计数
  - 黑名单
- 效果：
  
  Paste_Image.png
案例六：复选按钮
- 代码：
  
  Tasks
  - Shopping
    
    Due tommorow
  - Moving house checklist
  - Holiday destinations
  - App ideas
  All
  Done
  Completed
- 效果：
  
  Paste_Image.png

案例七：单选按钮

代码：

  
    
    确认订单
  
  
    
      请选择支付方式
      
        
        支付宝客户端支付
        
      
      
        
        支付宝网页支付
        
      
      
        
        一键支付（无需支付宝账户）

效果：

Paste_Image.png

案例八：滑动条
- 代码：
  
  声音
  
  铃声和提醒
  
  用按钮调整
- 效果：
  
  Paste_Image.png
案例九：下拉框
- 代码：
  
  选择框
  
  前端技术
- 效果：

Paste_Image.png

0x0012 tab

Paste_Image.png

案例一：选项卡
- 代码：
  
  选项卡
  - Chinese
  - English
  - Japanese
  - Russian
- 效果：
  
  Paste_Image.png
案例二：使用图标
- 代码：
  
  首页
  
  
  信息
  
  
  发微博
  
  
  发现
  
  
  我
- 效果：
  
  Paste_Image.png
案例三：使用徽章
- 代码：
  
  微信
  
  微信
  
  
  通信录
  
  
  发现
  12
  
  我
- 效果：
  
  Paste_Image.png
案例四：顶部选项卡
- 代码：
  
  要闻
   河南
   房产
   财经
   娱乐
  
  新闻
  
  
  订阅
  
  
  图片
  
  
  视频
- 效果：

Paste_Image.png

案例五：条带风格选项卡
- 代码：
- 效果：

Paste_Image.png

0x0013 栅格系统

Paste_Image.png

案例一：瀑布流
- 代码：
  
  POPULAR
  
  [站外图片上传中……(9)]
  
  [站外图片上传中……(10)]
  
  [站外图片上传中……(11)]
  
  [站外图片上传中……(12)]
  
  [站外图片上传中……(13)]
  
  [站外图片上传中……(14)]
  
  [站外图片上传中……(15)]
  
  [站外图片上传中……(16)]
  
  [站外图片上传中……(17)]
  
  [站外图片上传中……(18)]
  
  [站外图片上传中……(19)]
  
  [站外图片上传中……(20)]
  
  [站外图片上传中……(21)]
  
  [站外图片上传中……(22)]
  
  [站外图片上传中……(23)]
  
  [站外图片上传中……(24)]
- 效果：
  
  Paste_Image.png
案例二：列宽
.col-10 - 占据容器10%宽度
.col-20 - 占据容器20%宽度
.col-25 - 占据容器25%宽度
.col-33 - 占据容器33%宽度
.col-50 - 占据容器50%宽度
.col-67 - 占据容器67%宽度
.col-75 - 占据容器75%宽度
.col-80 - 占据容器80%宽度
.col-90 - 占据容器90%宽度
- 代码：
  
  指定列宽
  .col.col-50
  
  .col
  
  .col
```
    
      .col.col-75
      .col
    

    
      .col
      .col.col-75
    

    
      .col
      .col
    

  
```
- 效果：
  
  Paste_Image.png

案例三：Metro 效果

代码：

机票

火车票

用车

效果：

Metro 效果.png

案例四：指定列偏移
.col-offset-10 - 偏移默认位置10%容器宽度
.col-offset-20 - 偏移默认位置20%容器宽度
.col-offset-25 - 偏移默认位置25%容器宽度
.col-offset-33 - 偏移默认位置33%容器宽度
.col-offset-50 - 偏移默认位置50%容器宽度
.col-offset-67 - 偏移默认位置67%容器宽度
.col-offset-75 - 偏移默认位置75%容器宽度
.col-offset-80 - 偏移默认位置80%容器宽度
.col-offset-90 - 偏移默认位置90%容器宽度
- 代码：
  
  指定列偏移
  .col
  
  .col
```
    
      .col
      .col
    

    
      .col
    
  
```
- 效果：

指定列偏移.png

案例五：列纵向对齐

代码：

列纵向对齐

.col

1
2
3
4

    
      .col
      .col
      .col
      1
2
3
4
    

    
      .col
      .col
      .col
      1
2
3
4
    

    
      .col
      .col
      .col
      1
2
3
4
    

    
      .col
      .col
      .col
      1
2
3
4

效果：

列纵向对齐.png

0x001 Ionic CSS入门

0x001 简述

0x002 安装ionic

0x003 初始化项目

0x004 布局模式

0x005 bar样式

标题栏

底部栏

标题栏

底部栏

腾讯新闻

列表成员

今日头条

国务院常务会议部署推进公司注册资本登记制度改革

大黄鸭在北京两个月创收超两亿元 今日离京

LinkedIn创始人：在见风投之前，我希望自己当时懂得这七件事...

美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶

酒店搜索

入住城市：当前位置

入住日期：7月27日 星期五

价格范围：不限价格

Header

Venkman

Ray

Egon

Winston

今日头条

国务院常务会议部署推进公司注册资本登记制度改革

大黄鸭在北京两个月创收超两亿元 今日离京

LinkedIn创始人：在见风投之前，我希望自己当时懂得这七件事...

美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶

Instagram

Thomasguy

按钮

图标按钮

列表中使用按钮

新闻

邮件

电话

设置

云服务

在线帮助

表单输入

livio

信息

Tasks

Shopping

Moving house checklist

Holiday destinations

App ideas

确认订单

声音

选择框

0x0012 tab

选项卡

微信

0x0013 栅格系统

POPULAR

指定列宽

指定列偏移

列纵向对齐

你可能感兴趣的:(0x001 Ionic CSS入门)

大黄鸭在北京两个月创收超两亿元今日离京

美国男子为防妻分家产将价值50万美元黄金扔垃圾桶

入住日期：7月27日星期五

大黄鸭在北京两个月创收超两亿元今日离京

美国男子为防妻分家产将价值50万美元黄金扔垃圾桶