关闭

初步学习 ionic css 布局

标签: csshtml5css3ionic
1126人阅读 评论(0) 收藏 举报
分类:

 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;
}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:66798次
    • 积分:1004
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:0篇
    • 译文:0篇
    • 评论:14条
    文章分类
    最新评论