ionic CSS布局

最新推荐文章于 2021-08-04 08:21:00 发布
最新推荐文章于 2021-08-04 08:21:00 发布
阅读量678 收藏 3
点赞数 1
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lamenw/article/details/77508678
版权

1)头部/Header、内容/Content、底部/Footer:

  .bar .bar-header——声明元素为头部；

  .bar .footer——声明元素为底部；

  .content/.scroll-content——声明元素为内容区；

  .bar .bar-subheader——声明元素为二级导航栏；

  .bar .bar-subfooter——声明元素为二级底部栏；

  .bar-light等——设置bar的颜色；

  .title——声明元素为标题；

  .bar .item-input-inset——设置bar为条块元素并用于嵌入input；

  .item-input-wrapper——设置元素为input的包裹元素；

2)按钮/button：

  .button-bar——声明元素为工具栏，通常包含一组按钮；

  .button——声明元素为按钮；

  .button-light等——设置button的颜色;

  .button-clear——设置button为无边框背景透明样式;

  .button-block——设置button充满父元素，并保留边框半径及左右边框，保留padding，让元素有点呼吸空隙；

  .button-full——设置button完全充满父元素，无左右边框及边框半径。

  .button-small——小按钮;

  .button-large——大按钮；

  .button-outline——背景透明带边框按钮；

3)图标/icon

  .icon .ion-images等——获取ionic的内置图标；

  .icon-right——将icon图标放在元素的内部右侧；

4）样式

   .light等——设置字体的颜色；

   .light-border等——设置按钮等元素的边框；

   .light-bg等——设置元素的背景色；

   .padding等——设置元素的内边距；

   .has-header等——设置元素所处的位置;

  

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="bar bar-header bar-positive">  
  10.         <div class="button icon ion-ios-arrow-left"></div>  
  11.         <h1 class="title">今日头条</h1>  
  12.         <div class="button icon ion-gear-b"></div>  
  13.     </div>  
  14.     <div class="bar bar-subheader bar-dark">  
  15.   
  16.         <div class="button-bar">  
  17.             <a class="button button-balanced">新闻</a>  
  18.             <a class="button button-clear">国内</a>  
  19.             <a class="button button-clear">国际</a>  
  20.             <a class="button button-clear">体育</a>  
  21.             <a class="button button-clear">科技</a>  
  22.         </div>  
  23.     </div>  
  24.   
  25.     <div class="scroll-content has-header has-subheader padding">  
  26.         <div class="bar bar-energized item-input-inset">  
  27.             <a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>  
  28.             <label class="item-input-wrapper">  
  29.                 <input class="light-bg" type="text" placeholder="搜索内容">  
  30.             </label>  
  31.         </div>  
  32.         <h4 class="assertive royal-bg">IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。</h4>  
  33.         <button class="button button-block button-positive">  
  34.             Block Button  
  35.         </button>  
  36.         <button class="button button-full button-light">  
  37.             Full Button  
  38.         </button>  
  39.         <button class="button button-large button-assertive">  
  40.             Large Button  
  41.         </button>  
  42.         <button class="button button-small positive-border">  
  43.             Small Button  
  44.         </button>  
  45.         <button class="button button-outline button-positive">  
  46.             Outlined Button  
  47.         </button>  
  48.         <a class="button icon-left ion-gear-b calm">设置</a>  
  49.         <a class="button icon-left positive">  
  50.             <i class="icon ion-refresh"></i>刷新  
  51.         </a>  
  52.     </div>  
  53.     <div class="bar bar-subfooter bar-light">  
  54.         <div class="button-bar">  
  55.             <a class="button button-clear icon ion-images">新闻</a>  
  56.             <a class="button button-clear">国内</a>  
  57.             <a class="button button-clear">国际</a>  
  58.             <a class="button button-clear">体育</a>  
  59.             <a class="button button-clear">科技</a>  
  60.         </div>  
  61.     </div>  
  62.     <div class="bar bar-footer bar-dark">  
  63.         <h1 class="title">您关心的就是头条</h1>  
  64.     </div>  
  65. </body>  
  66. </html>  


效果如下：


5)列表/list

  .list——定义元素为列表容器；

  .list-borderless——设置样式为无边框;

  .list-inset——设置样式为边框缩进;

  .card——设置样式为边框缩进并在下方添加阴影。

  .item——定义元素为列表成员；


[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body class="stable">  
  9.     <div class="bar bar-header bar-balanced">  
  10.          <h1 class="title">城市列表</h1>  
  11.     </div>  
  12.     <div class="scroll-content has-header">  
  13.         <ul class="list">  
  14.             <li class="item">北京</li>  
  15.             <li class="item">上海</li>  
  16.             <li class="item">武汉</li>  
  17.         </ul>  
  18.         <ul class="list list-borderless">  
  19.             <li class="item">北京</li>  
  20.             <li class="item">深圳</li>  
  21.         </ul>  
  22.         <ul class="list list-inset">  
  23.             <li class="item">北京</li>  
  24.             <li class="item">深圳</li>  
  25.         </ul>  
  26.         <ul class="list card">  
  27.             <li class="item">北京</li>  
  28.             <li class="item">深圳</li>  
  29.         </ul>  
  30.     </div>  
  31. </body>  
  32. </html>  
效果：


 .item-borderless——设置该列表成员为无边框样式；

 .item-light等——设置列表成员元素的颜色；

 .item-divider——设置该列表成员所占行高减半，常用作分组；

 .item-button-left/right——设置按钮位置居左/居右；

 .item-icon-left/right——设置图标位置居左/居右；

 .item-thumbnail-left/right——设置缩略图位置居左/居右；

 .item-image——设置图像充满列表成员；

 .barge——徽章；

 

 

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body class="stable">  
  9.     <div class="bar bar-header bar-balanced">  
  10.          <h1 class="title">列表/list</h1>  
  11.     </div>  
  12.     <div class="scroll-content has-header">  
  13.         <ul class="list list-inset">  
  14.             <li class="item item-divider item-positive">直辖市</li>  
  15.             <li class="item">北京</li>  
  16.             <li class="item item-button-right">天津  
  17.                 <button class="button">修改</button>  
  18.             </li>  
  19.             <li class="item item-divider item-assertive">省会</li>  
  20.             <li class="item">武汉<i class="badge positive-bg light">15</i></li>  
  21.             <li class="item item-icon-left item-icon-right">  
  22.                 <i class="icon ion-location"></i>  
  23.                 <h2>深圳：当前位置</h2>  
  24.                 <i class="icon ion-ios-arrow-right"></i>  
  25.             </li>  
  26.             <li class="item item-thumbnail-right">  
  27.                 <img src="img/a-2.jpg">  
  28.                 <h2>美国男子为防妻分家产, <br/>将价值50万美元黄金扔垃圾桶</h2>  
  29.                 <p>新浪新闻</p>  
  30.             </li>  
  31.             <div class="item item-avatar-left">  
  32.                 <img src="img/a-1.jpg">  
  33.                 <h2>papa酱</h2>  
  34.                 <p>不是每个美女都爱钱...</p>  
  35.             </div>  
  36.             <div class="item item-image">  
  37.                 <img src="img/bmw.jpg">  
  38.             </div>  
  39.             <div class="item item-icon-left">  
  40.                 <i class="icon ion-thumbsup"></i>  
  41.                 <p>44 赞</p>  
  42.             </div>  
  43.         </ul>  
  44.     </div>  
  45. </body>  
  46. </html>  

6)表单/Forms

  .item-input——声明元素为输入框组件容器；

  .item-input-inset——设置输入框组件容器为内嵌样式；

  .item-stacked-label——设置为堆叠标签样式(分行)；

  .item-floating-label——设置为浮动标签样式；

  .item-checkbox——声明元素为多选框组件容器；

  .item-radio——声明元素为单选框组件容器；

  .item-select——声明元素为下拉框组件容器；

  .item-toggle——声明元素为开关按钮的容器；

  .toggle——声明元素为开关按钮；

  .range——声明元素为滑动条；

  

  

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="bar bar-header bar-balanced">  
  10.         <h1 class="title">表单输入</h1>  
  11.     </div>  
  12.     <div class="scroll-content has-header">  
  13.         <div class="list">  
  14.             <div class="item item-input">  
  15.                 <i class="icon ion-android-person positive"> 姓名 </i>  
  16.                 <input type="text" placeholder=" 周杰伦">  
  17.             </div>  
  18.             <label class="item item-input">  
  19.                 <i class="icon ion-ios-unlocked-outline positive"></i>  
  20.                 <input type="password" placeholder="请输入您的密码">  
  21.             </label>  
  22.             <label class="item item-input item-input-inset item-button-right">  
  23.                 <span class="input-label">年龄</span>  
  24.                 <input type="text" placeholder="25">  
  25.                 <a class="button button-clear icon ion-ios-arrow-right"></a>  
  26.             </label>  
  27.             <label class="item item-input item-floating-label">  
  28.                 <span class="input-label">个性签名</span>  
  29.                 <input type="text" placeholder="论一个程序员的自我修养">  
  30.             </label>  
  31.             <label class="item item-input item-stacked-label">评论  
  32.                 <textarea placeholder="请文明用语..."></textarea>  
  33.             </label>  
  34.             <label class="item item-checkbox">  
  35.                 <label class="checkbox">  
  36.                     <input type="checkbox" checked>  
  37.                 </label>  
  38.                 记住密码  
  39.             </label>  
  40.             <div class="item item-divider"><b>请选择支付方式</b></div>  
  41.             <label class="item item-radio">  
  42.                 <input type="radio" name="group">  
  43.                 <div class="item-content">支付宝客户端支付</div>  
  44.                 <i class="radio-icon ion-checkmark balanced"></i>  
  45.             </label>  
  46.             <label class="item item-radio">  
  47.                 <input type="radio" name="group">  
  48.                 <div class="item-content">支付宝网页支付</div>  
  49.                 <i class="radio-icon ion-checkmark balanced"></i>  
  50.             </label>  
  51.             <label class="item item-radio">  
  52.                 <input type="radio" name="group" checked>  
  53.                 <div class="item-content">一键支付（无需支付宝账户）</div>  
  54.                 <i class="radio-icon ion-checkmark balanced"></i>  
  55.             </label>  
  56.         </div>  
  57.   
  58.         <div class="list">  
  59.             <div class="item range range-positive">  
  60.                 <i class="icon ion-ios-sunny-outline"></i>  
  61.                 <input type="range" name="volume" min="0" max="100" value="33">  
  62.                 <i class="icon ion-ios-sunny"></i>  
  63.             </div>  
  64.             <div class="item item-toggle">  
  65.                 定位  
  66.                 <label class="toggle toggle-balanced">  
  67.                     <input type="checkbox" checked>  
  68.                     <div class="track">  
  69.                         <div class="handle"></div>  
  70.                     </div>  
  71.                 </label>  
  72.             </div>  
  73.         </div>  
  74.   
  75.         <div class="list">  
  76.             <label class="item item-input item-select">  
  77.                 <div class="input-label">  
  78.                     前端技术  
  79.                 </div>  
  80.                 <select>  
  81.                     <option>HTML</option>  
  82.                     <option selected>CSS</option>  
  83.                     <option>JavaScript</option>  
  84.                 </select>  
  85.             </label>  
  86.         </div>  
  87.     </div>  
  88. </body>  
  89. </html>  
效果：


7)切换标签组件/tabs:

  .tabs——声明元素为切换标签组件容器；

  .tabs-light等——设置切换标签组件的颜色；

  .tabs-top——设置切换标签组件在上部；

  .tabs-icon-top/left——设置切换标签组件内部的图标的位置；

  .tabs-icon-only——设置切换标签组件只显示图标；

  .tabs-item——声明元素为切换标签组件的子选项；

  .active/.tab-item-active/.activated——设置子选项为选中状态；

  .diasbled——设置子选项为禁用状态；

  .has-badge——设置子选项含有徽章；

  .tabs-striped——声明元素为条带风格的切换标签组件容器；

  

  

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="bar bar-header bar-dark">  
  10.         <h1 class="title">今日头条</h1>  
  11.         <a class="button button-clear icon ion-ios-plus-empty"></a>  
  12.     </div>  
  13.     <div class="tabs tabs-top tabs-positive">  
  14.         <a class="tab-item">要闻</a>  
  15.         <a class="tab-item active">上海</a>  
  16.         <a class="tab-item">房产</a>  
  17.         <a class="tab-item">财经</a>  
  18.         <a class="tab-item">娱乐</a>  
  19.     </div>  
  20.     <div class="scroll-content stable-bg has-header has-tabs-top has-tabs tabs-item-hide">  
  21.         <h4 class="positive">IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。</h4>  
  22.     </div>  
  23.     <div class="tabs tabs-stable tabs-icon-top">  
  24.         <a class="tab-item active">  
  25.             <i class="icon ion-ios-paper-outline"></i>新闻  
  26.         </a>  
  27.         <a class="tab-item disabled">  
  28.             <i class="icon ion-ios-book-outline"></i>订阅  
  29.         </a>  
  30.         <a class="tab-item has-badge">  
  31.             <div class="badge badge-assertive">12</div>  
  32.             <i class="icon ion-images"></i>图片  
  33.         </a>  
  34.         <a class="tab-item activated">  
  35.             <i class="icon ion-ios-videocam-outline"></i>视频  
  36.         </a>  
  37.     </div>  
  38. </body>  
  39. </html>  
效果：


[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="tabs-striped tabs-top tabs-light tabs-icon-only">  
  10.         <div class="tabs">  
  11.             <a class="tab-item active">  
  12.                 <i class="icon ion-ios-telephone"></i>  
  13.             </a>  
  14.             <a class="tab-item">  
  15.                 <i class="icon ion-ios-clock"></i>  
  16.             </a>  
  17.             <a class="tab-item">  
  18.                 <i class="icon ion-ios-person"></i>  
  19.             </a>  
  20.         </div>  
  21.     </div>  
  22.     <div class="tabs tabs-positive tabs-icon-only">  
  23.         <a class="tab-item">  
  24.             <i class="icon ion-ios-search"></i>  
  25.         </a>  
  26.         <a class="tab-item active">  
  27.             <i class="icon ion-ios-telephone"></i>  
  28.         </a>  
  29.         <a class="tab-item" href="#">  
  30.             <i class="icon ion-backspace"></i>  
  31.         </a>  
  32.     </div>  
  33. </body>  
  34. </html>  
效果：



8)网格布局/Grid:

  .row——声明元素为栅格系统的行容器；

  .row-top/center/bottom——设置行容器内的元素所处的位置；

  .responsive-sm/md/lg——设置行容器所适配的屏幕尺寸；

  .col——声明元素为栅格系统行内的列；

  .col-10等——设置列宽所占的行宽比；

  .col-offset-10等——设置列偏移量所占的行宽比；

  .col-top/offset/bottom——设置该列所处位置；

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7.     <style>  
  8.         .col-40{-webkit-box-flex:0;-webkit-flex:0 0 40%;-moz-box-flex:0;-moz-flex:0 0 40%;-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}  
  9.         .col-60{-webkit-box-flex:0;-webkit-flex:0 0 60%;-moz-box-flex:0;-moz-flex:0 0 60%;-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}  
  10.     </style>  
  11. </head>  
  12. <body>  
  13.     <div class="bar bar-header bar-stable">  
  14.         <h1 class="title">网格布局</h1>  
  15.     </div>  
  16.     <div class="scroll-content has-header">  
  17.         <div class="row">  
  18.             <div class="col col-offset-25 positive-bg">  
  19.                 col-offset-25  
  20.             </div>  
  21.             <div class="col calm-bg">  
  22.                 col  
  23.             </div>  
  24.         </div>  
  25.         <div class="row">  
  26.             <div class="col col-33 balanced-bg">  
  27.                 col-33  
  28.             </div>  
  29.             <div class="col col-67 energized-bg">  
  30.                 col-67  
  31.             </div>  
  32.         </div>  
  33.         <div class="row">  
  34.             <div class="col col-40 assertive-bg">  
  35.                 col-40  
  36.             </div>  
  37.             <div class="col col-60 royal-bg">  
  38.                 col-60  
  39.             </div>  
  40.         </div>  
  41.   
  42.         <div class="row">  
  43.             <div class="col col-top positive-bg">.col</div>  
  44.             <div class="col col-center calm-bg">.col</div>  
  45.             <div class="col col-bottom balanced-bg">.col</div>  
  46.             <div class="col energized-bg">1<br>2<br>3<br>4</div>  
  47.         </div>  
  48.   
  49.         <div class="row row-top">  
  50.             <div class="col energized-bg">.col</div>  
  51.             <div class="col assertive-bg">.col</div>  
  52.             <div class="col royal-bg">.col</div>  
  53.             <div class="col positive-bg">1<br>2<br>3<br>4</div>  
  54.         </div>  
  55.   
  56.         <div class="row responsive-sm">  
  57.             <div class="col positive-bg">.col</div>  
  58.             <div class="col calm-bg">.col</div>  
  59.             <div class="col balanced-bg">.col</div>  
  60.             <div class="col energized-bg">.col</div>  
  61.         </div>  
  62.     </div>  
  63. </body>  
  64. </html>  

Ailsa-show
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初步学习 ionic css 布局
好好学习
05-30 1972
 ionic.css 布局是基于flex的，虽然没有bootstrap那么丰富，但基本的布局还是满足的。提供了字体的图标，可以自定义颜色。还是能基本满足icon需求吧。。。当然还是需要自己定义很多css 或者 覆盖原来的。入门的写下，也不知道对不对。。。。。   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta char...
ionic的css文件
08-25
ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。与另外一个文件angularJS文件可以快速开发手机APP
移动app之ionic框架css布局
xyphf的博客
12-12 6497
声明：本文转自汇智网，转载只为传播更多信息，版权归原作者所有。Ionic简介ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用： ionic主要包括三个部分： CSS框架
Ionic Css简介与基本布局
Sean_css的博客
06-21 5571
@(Ionic)[ionic css]Ionic Css简介与基本布局Ionic简介　　Ionic属于hybrid开发模式，本质上是讲移动web应用与浏览器打包，优点是采用标准的web技术进行开发，避免了不同平台原声开发体系的学习，上手快、效率高。缺点是性能上有一定的损失 　　ionic是一个强大的混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、CSS、JavaScript
Ionic css组成（一）
weixin_33912638的博客
03-25 117
2019独角兽企业重金招聘Python工程师标准>>> ...
ionic css图片解读
08-09
Ionic CSS 基于Flexbox布局模型，这使得创建复杂的弹性布局变得简单。图片可能展示了Flexbox属性（如 `flex-direction`、`align-items` 和 `justify-content`）如何工作，帮助理解如何在Ionic中创建对齐和流式布局...
Ionic3实现图片瀑布流布局
08-29
在本文中，我们将深入探讨如何在Ionic3框架中实现图片瀑布流布局。瀑布流布局，又称Masonry布局，是一种常见的网页设计方式，它通过参差不齐的多列布局为用户提供一种富有视觉吸引力的浏览体验。在移动端，尽管不如...
Ionic Css-Prop-Cheat Sheet：Ionic Css属性备忘单
02-25
《Ionic CSS属性备忘单详解》 在移动应用开发领域，Ionic框架凭借其强大的功能和跨平台兼容性，成为开发者们的热门选择。特别是在构建响应式、高性能的混合应用程序时，理解并熟练运用Ionic的CSS属性至关重要。本文...
简单实现IONIC购物车功能
08-31
CSS部分提供了样式规则，定义了各个元素的外观，如字体、颜色、布局和边框等。例如，`.l-header`设置了一个固定在顶部的标题栏，`.l-cart-count`是购物车计数器的样式，而`.l-cart-items`定义了购物车列表的样式。 ...
ionic-Bloging-app
06-27
Ionic提供了丰富的UI组件和设计模式，使得开发者可以快速构建具有响应式布局和移动端优化的用户界面。 接着，我们关注**Drupal 7**。Drupal是一个强大的内容管理系统（CMS），支持创建和管理网站内容，包括文章、...
ionic css布局介绍(一)
weixin_33725722的博客
10-28 152
ionic css 布局介绍1. 基本布局2. 色彩、图标和边距3. 界面组件列表4. 界面组件按钮5. 界面组件 表单输入6. 界面组件选项卡7. 定制布局 栅格系统------------------------------------------------1． 基本布局1....
ionic css类总结
leeseean的博客
05-04 982
header，subheader，footer主要用bar，有ion-header-bar,ion-footer-bar，有align-title等API； content有ion-content，ion-refresher，ion-pane，赋予了多种API； Buttons的类比较多，分Block,Full Width,Different Sizes,Outlined,Clear,Icon
Ionic4—全局CSS变量
雷雨天的雷胖子
12-11 840
目录 一、概述 二、实例 一、概述 Ionic4中全局CSS变量一般在variables.scss文件的伪类root中定义，变量名以--开头。当然任意全局CSS文件的root伪类中都可以定义全局CSS变量。 二、实例 定义全局CSS变量 调用全局CSS变量 使用var函数调用CSS变量。 ...
ionic能自己写css吗,ionic2怎么写公共css样式
weixin_32205057的博客
08-04 1100
1.page.html文件里写ionic提供的控件，比如：ion-header,ion-content, ion-title,ion-toobar,经管如此，有时候满足不了项目的界面，我们需要结合HTML的基本命令来完成设计，比如：div，p， img，a，等。2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干...
ionic能自己写css吗,ionic2怎么写公共css样式?
weixin_36059638的博客
08-04 193
1.page.html文件里写ionic提供的控件，比如：ion-header,ion-content, ion-title,ion-toobar,经管如此，有时候满足不了项目的界面，我们需要结合HTML的基本命令来完成设计，比如：div，p， img，a，等。2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干...
Ionic css组成（四）
bwf_erg的博客
03-25 252
Ionic css组间界面类还包括以下元素。 7. 滑动条          volume">        8. 选择框   any class=item item-select”>                   ...         ...         ...        9. 选项卡 选项卡是一个可以包含多个按钮或链
ionic css的样式操作 详细介绍
热门推荐
午夜灬玫瑰焰钻的博客
03-18 1万+
1.    ionic css基本布局  2.    ionic css色彩、图标和边距 3.    ionic css界面组件列表 4.    ionic css界面组件按钮 5.    ionic css界面组件 表单输入 6.    ionic css界面组件选项卡 7.    ionic css定制布局 Grid布局 第十三讲免费视频教程下载地址：http://bbs
Ionic基础——CSS布局
bboyjoe的博客
01-11 1万+
1)头部/Header、内容/Content、底部/Footer:   .bar .bar-header——声明元素为头部；   .bar .footer——声明元素为底部；   .content/.scroll-content——声明元素为内容区；   .bar .bar-subheader——声明元素为二级导航栏；   .bar .bar-subfooter——声明元素为二级底部栏；
css下拉加载文档的箭头,下拉框等需要显示上下箭头切换的CSS样式
weixin_31767787的博客
08-03 659
1 .icon-right, .icon-down, .icon-up {2 display: inline-block;3 padding-right: 13rpx;4 position: absolute;5 /*组件内调整箭头的位置*/6 right: 20rpx;7 top: 10rpx;8 }910 .icon-right::after, .icon-down::after, .icon...
Ionic 1.1.1 混合移动开发实战教程
Ionic是一个基于AngularJS构建的开源框架，它允许开发者使用HTML、CSS和JavaScript来构建原生感观的移动应用。 ### 第一部分： Ionic 开发概述 1. **课程目标**：本教程的目标是教会读者如何使用前端技术和混合开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值