1.先确定html结构
2.定制样式
<div class="bg_fff"> <ul class="row"> <li class="item col-50" ng-click="prepaidCard('20020')"> <div class="img"><img src="img/main/home_ico1.png" alt=""></div> <span class="desc">预付卡</span> </li> <li class="item col-50" ng-click="eleTicket('20010')"> <div class="img"><img src="img/main/home_ico2.png" alt=""></div> <span class="desc">电子券</span> </li> </ul> </div>
框架默认样式(考虑兼容很全)
/* ionic */ .row { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; padding: 5px; width: 100%; } .col { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: block; padding: 5px; width: 100%; } .col-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 10%; -moz-box-flex: 0; -moz-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } .col-20 { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -moz-box-flex: 0; -moz-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .col-25 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -moz-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-33, .col-34 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333%; -moz-box-flex: 0; -moz-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } .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%; } .col-45 { -webkit-box-flex: 0; -webkit-flex: 0 0 45%; -moz-box-flex: 0; -moz-flex: 0 0 45%; -ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; } .col-50 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .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%; } .col-66, .col-67 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666%; -moz-box-flex: 0; -moz-flex: 0 0 66.6666%; -ms-flex: 0 0 66.6666%; flex: 0 0 66.6666%; max-width: 66.6666%; } .col-75 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -moz-box-flex: 0; -moz-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-80 { -webkit-box-flex: 0; -webkit-flex: 0 0 80%; -moz-box-flex: 0; -moz-flex: 0 0 80%; -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; } .col-90 { -webkit-box-flex: 0; -webkit-flex: 0 0 90%; -moz-box-flex: 0; -moz-flex: 0 0 90%; -ms-flex: 0 0 90%; flex: 0 0 90%; max-width: 90%; }
自定义样式
/*--预定义--*/ /* normal 1 大多数文字 小标题 模块描述 */ .font_n_1 { font-size: 0.14rem !important; } /* normal 2 大多数文字 表单 */ .font_n_2 { font-size: 0.13rem !important; } /*--文本色--*/ .font_norm { color: #0076c1 !important; } .font_fff { color: #fff !important; } .font_black { color: black; } /*--背景色--*/ .bg_norm { background: #0076c1 !important; } .bg_fff { background: #fff !important; } .bg_ccc { background: #ccc !important; } .bg_dark { background: #a4a4a4 !important; } .bg_red{ background: #d65f51 !important; } .bg_tp{ background: transparent !important; } /*--main--*/ /* 同意协议样式 */ .chkbox{ margin-top: 15px !important; padding: 0px; } .chk{ width: 45px; background: #f8f8f8; border: none; padding-left : 0px !important; height:18px; } .desc{ font-size: 0.14rem !important; } img { border: none; vertical-align: top } /* 首页卡券项目入口样式*/ .item{ border:none; text-align:center; } div.img img{ width:62px; height:62px; } span.desc{ display:inline-block; padding-top:10px; }