Jquery Mobile 自定义页脚 标签栏

1.css样式:

 .tabbar .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }

 .tabbar .ui-btn .ui-icon { width: 30px!important; height: 20px!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; }

#remen .ui-icon { background:  url(img/remen.png) 50% 50% no-repeat; background-size: 25px 20px; }

 #kongjian .ui-icon { background:  url(img/kongjian.png) 50% 50% no-repeat; background-size: 25px 20px; }

 #shangchuan .ui-icon { background:  url(img/shangchuan.png) 50% 50% no-repeat; background-size: 30px 20px; }

 #shezhi .ui-icon { background:  url(img/19-gear.png) 50% 50% no-repeat; background-size: 25px 20px; }

span.title { display:block; text-align:center; margin-top:10px; margin-bottom:20px; }

2.代码:
<div data-role="navbar" class="tabbar">
      <ul>
        <li><a href="index.html" id="remen" data-icon="custom" class="ui-btn-active">沃赛</a></li>
        <li><a href="upload.html" id="shangchuan" data-icon="custom" >上传</a></li>
        <li><a href="space.html" id="kongjian" data-icon="custom">空间</a></li>
        <li><a href="setup.html" id="shezhi" data-icon="custom">设置</a></li>
      </ul>
    </div>


注意点:
1.tabbar

2.id="remen"  #remen  一定要是唯一的。

3.data-icon="custom"
4.background  backgroud-size

5.

你可能感兴趣的:(Jquery Mobile 自定义页脚 标签栏)