初步学习 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;
}


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

相关文章推荐

Ionic基础——CSS布局

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

(补充)ionic js 指令布局的小技巧

ion-infinite-scroll {{item}} angular.mod

Ionic之基本布局

简介 Hybrid vs. OthersionicCSS框架 基本布局 布局模式定高条块:.bar.bar : 位置.bar : 嵌入子元素.bar : 嵌入input内容:.conte...

移动app之ionic框架css布局

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

第十三讲 ionic css布局介绍

http://www.phonegap100.com/article-452-1.html 摘要: 学习要点: 1. ionic css基本布局 2. ionic css色彩、图标和边距3. i...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

ionic css类总结

header,subheader,footer主要用bar,有ion-header-bar,ion-footer-bar,有align-title等API; content有ion-content,...

Ionic Css简介与基本布局

@(Ionic)[ionic css]Ionic Css简介与基本布局Ionic简介  Ionic属于hybrid开发模式,本质上是讲移动web应用与浏览器打包,优点是采用标准的web技术进行开发,避...

Android在自定义View(SurfaceView)中实现进度条Progress

ndroid本身带有Progress控件。可以在布局中灵活使用,但如果是在自定义的View或者SurfaceView中使用,就需要自己实现,其实不难,只要熟悉了android的PorterDuff,就...
  • strliu
  • strliu
  • 2012年05月30日 14:03
  • 1306

Android在自定义View(SurfaceView)中实现进度条Progress

http://www.havenliu.com/java/689.html Android本身带有Progress控件。可以在布局中灵活使用,但如果是在自定义的View或者SurfaceView...
  • daditao
  • daditao
  • 2014年06月20日 14:36
  • 2023
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:初步学习 ionic css 布局
举报原因:
原因补充:

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