jquerymobile知识点六:实现toolbar下方显示,自定义图标!

   网上找了半天  ,找到了一截。。。。。。。。。。。。。。。。    

   css:

  

.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#chat .ui-icon { background:  url(images/ico_message_enter.png) 50% 50% no-repeat; background-size: 24px 22px; }
#email .ui-icon { background:  url(images/ico_business_enter.png) 50% 50% no-repeat; background-size: 24px 16px;  }
#login .ui-icon { background:  url(images/ico_order_enter.png) 50% 50% no-repeat;  background-size: 12px 26px; }
#beer .ui-icon { background:  url(images/ico_balance_enter.png) 50% 50% no-repeat;  background-size: 22px 27px; }
#coffee .ui-icon { background:  url(images/ico_recharge_enter.png) 50% 50% no-repeat;  background-size: 20px 24px; }
#skull .ui-icon { background:  url(images/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }

html:

<div data-role="footer" class="nav-glyphish-example" data-position="fixed">
  <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    <ul>
      <li><a href="baseInfo.html" id="chat" data-ajax="false" data-theme="e" data-icon="custom" data-id="baseInfo" class="next_btn" data-transition="slide">基本信息</a></li>
      <li><a href="yewuCheck.html" data-ajax="false" id="email" data-theme="e" data-icon="custom" data-id="yewuCheck" data-transition="slide">业务查询</a></li>
      <li><a href="yewuOrder.html" data-ajax="false" id="login" data-theme="e" data-icon="custom" data-id="yewuOrder" data-transition="slide">业务订购</a></li>
      <li><a href="yueCheck.html" data-ajax="false" id="beer" data-theme="e" data-icon="custom" data-id="yueCheck" data-transition="slide">余额查询</a></li>
      <li><a href="zhuanZhang.html" data-ajax="false" id="coffee" data-theme="e" data-icon="custom" data-id="zhuanZhang" data-transition="slide">转账充值</a></li>
   </ul>
  </div>
</div>

效果图1:


    

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值