初步学习 ionic css 布局

原创 2016年05月30日 11:15:23

 ionic.css 布局是基于flex的,虽然没有bootstrap那么丰富,但基本的布局还是满足的。提供了字体的图标,可以自定义颜色。还是能基本满足icon需求吧。。。当然还是需要自己定义很多css 或者 覆盖原来的。入门的写下,也不知道对不对。。。。。奋斗

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css"/>
    <link rel="stylesheet" type="text/css" href="bm.css"/>
</head>
<body>
    <header class="bar bar-header">
        <a href="javascript:;" class="icon-right ion-arrow-down-b button button-clear">成都</a>
        <label class="item item-input stable-dark icon ion-search">
            <input type="search" class="dark" placeholder="search"/>
        </label>
    </header>
    <div class="content has-header">
        <div class="list banner">
            <a class="item item-image">
                <img src="aa.jpg">
            </a>
        </div>
        <a href="#" class="addr list">
            <span class="item  item-icon-right">
                以父之名
                <i class="icon ion-navigate">店铺导航 </i>
            </span>
        </a>
        <div class="list play u-list">
            <div class="u-title"><em class="prefix">参</em>参加报名</div>
            <div class="item item-image">
                <img src="aa.jpg"/>
            </div>
        </div>
        <div class="list u-list">
            <div class="u-title"><em class="prefix">周</em>龙卷风</div>
            <div class="row item">
                <a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
                <a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
                <a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
            </div>
            <div class="row item">
                <a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
                <a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
                <a href="#" class="col-33"><img src="th.jpg"/><p>静静悄悄</p></a>
            </div>
        </div>
    </div>
    <div class="tabs tabs-icon-top">
        <div class="tab-item">
            <i class="icon ion-ios-home-outline"></i>首页
        </div>
        <div class="tab-item">
            <i class="icon ion-ios-keypad-outline"></i>
            分类
        </div>
        <div class="tab-item">
            <i class="icon ion-ios-cart-outline"></i>
            购物车
        </div>
        <div class="tab-item">
            <i class="icon ion-ios-person-outline"></i>
            会员
        </div>
        <div class="tab-item">
            <i class="icon ion-ios-more-outline"></i>
            更多
        </div>
    </div>
</body>
</html>

html, body {
    font-family: "SimHei","Helvetica Neue",Arial,"Droid Sans", sans-serif;
    background-color: #f0f0f0;
}
html{
  overflow: visible;
}
a{
  text-decoration: none;
}
.u-list{
  margin-top: 5px;
  margin-bottom: 0;
  background-color: #ffffff;
}
.u-title{
  padding: 4px 2.66666667%;
}
.u-list .row{
  padding: 0;
}
.u-list .col-33{
  margin: 0 0.5%;
}
.u-list .col-33 img{
  max-width: 100%;
}
.u-list .col-33{
  text-align: center;
}
.row.item{
  border: 0;
}
.prefix{
  display: block;
  font-size: 12px;
  height: 14px;
  width: 14px;
  color: #fff;
  text-align: center;
  line-height: 14px;
  float: left;
  margin: 3px 4px 0 0;
  background-color: #4198f7;
}

.bar-header{
  background-color: #ff332a;
}
.bar-footer{
  background-color: #333333;
}
.bar-header .button-clear.button{
  font-size: 13px;
  color: #ffffff;
}
.bar.bar-header .button.button-clear:before{
  font-size: inherit;
}
.bar-header .item-input{
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  width: 70%;
  margin-left: 5%;
}
.bar-header .ion-search:before{
  margin-right: 5px;
  color: inherit;
  color: #b2b2b2;
}
.banner.list{
  padding: 0;
  margin-bottom: 0;
}
.banner .item{
  border-width: 0;
}
.tabs{
  background-color: #333333;
  color: #ffffff;
}
.tabs-icon-top.tabs .tab-item{
  font-size: 12px;
  line-height: 11px;
}
.tab-item .icon:before{
  color: #inherit;
  font-size: 32px;
}
.addr .item .icon{
  font-size: 16px;
}
.addr .item{
  padding-top: 8px;
  padding-bottom: 8px;
}
.addr .ion-navigate:after {
  text-align: center;
  display: block;
  content: "\f2a3";
  font-family: Ionicons;
}
.addr .ion-navigate:before{
  display: none;
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

移动app之ionic框架css布局

声明:本文转自汇智网,转载只为传播更多信息,版权归原作者所有。Ionic简介ionic是一个强大的_混合式/hybrid_HTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScrip...
  • xyphf
  • xyphf
  • 2016年12月12日 13:22
  • 1938

Ionic基础——CSS布局

1)头部/Header、内容/Content、底部/Footer:   .bar .bar-header——声明元素为头部;   .bar .footer——声明元素为底部;   .content/....
  • bboyjoe
  • bboyjoe
  • 2016年01月11日 17:26
  • 8941

第十三讲 ionic css布局介绍

http://www.phonegap100.com/article-452-1.html 摘要: 学习要点: 1. ionic css基本布局 2. ionic css色彩、图标和边距3. i...
  • fangquan1980
  • fangquan1980
  • 2016年11月11日 10:03
  • 627

ionic grid(栅格) 九宫格

1、Html 腾讯新闻 {{i...
  • KingCruel
  • KingCruel
  • 2017年01月25日 11:32
  • 3863

Ionic Grid栅格布局居中实例

一、目录结构 二、引用指定 .responsive-sm .col { background: gray; } ...
  • u011127019
  • u011127019
  • 2017年02月02日 21:36
  • 4282

ionic css的样式操作 详细介绍

1.    ionic css基本布局  2.    ionic css色彩、图标和边距 3.    ionic css界面组件列表 4.    ionic css界面组件按钮 5.    i...
  • gujinapenggu5
  • gujinapenggu5
  • 2016年03月18日 18:08
  • 8011

ionic开发规范和参考资料

项目开发规范 使用sass作为CSS预编译工具进行开发,使用scss后缀名格式的sass文件 开发工具推荐统一使用PHPStorm,推荐使用最新版本PHPStorm 9以支持更多特性 PHPStorm...
  • yourlin
  • yourlin
  • 2015年08月26日 12:52
  • 2989

ionic2中的订单详情页面

这个订单详情页面大概长这样子:           html如下: 订单详情 订单金额:¥...
  • qq_15096707
  • qq_15096707
  • 2016年11月15日 09:39
  • 2826

根据屏幕宽度,设置rem的值

Document *{margin:0;padding:0;} //$(window).width(); function resize(){ $('html')...
  • summerkxy
  • summerkxy
  • 2016年09月14日 10:31
  • 1179

ionic的样式布局简单入门

ionic的样式布局主要依赖于 ionic.css 文件,该css文件框架主要提供预定义的CSS类,来帮助我们快速构建适用于手机端的UI。 ionic的预定义CSS类主要分以下四类: ...
  • canpark
  • canpark
  • 2015年04月17日 18:35
  • 2812
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:初步学习 ionic css 布局
举报原因:
原因补充:

(最多只允许输入30个字)