jQuery Mobile 自定义导航条图标

来源：互联网发布：秋冬日系男装搭配知乎编辑：程序博客网时间：2024/05/22 15:38

1、jQuery Mobile 自定义导航条图标

/*------------------------------------------------   自定义图标       --------------------------------------------------------*/ .ui-footer .ui-icon { /* 设置图标的大小，边框 */  width: 40px;  height: 40px;  box-shadow:none;  margin-top:0px;} .ui-footer .ui-btn-icon-top .ui-icon { /* 设置图标距导航栏距离 */  top: 0px;} .ui-footer .ui-btn-icon-top .ui-btn-inner .ui-icon { /* 设置图标距左边距离 */  position: absolute;  left: 50%;  margin-left: -18.6px;} .ui-navbar li .ui-btn-icon-top .ui-btn-inner {  /* 设置文字距上边距离 */  padding-top: 38px;} .ui-footer .ui-btn-text {/* 设置文字大小，及其宽度 */    font-size:14px;    font-weight: 100;}/*  设置自定义图标  */.ui-icon-custom_home_normal {      background: url(../image/home_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;}.ui-icon-custom_message_normal {      background: url(../image/message_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;}.ui-icon-custom_traffic_normal {      background: url(../image/traffic_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;}.ui-icon-custom_find_normal {      background: url(../image/find_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;}
/*   设置空白图标   */.ui-icon-none {
    
    filter:alpha(opacity=0);  
    -moz-opacity:0;  
    -khtml-opacity: 0;  
    opacity: 0;
}

0 0