jQuery mobile未正确显示_Jquery_Jquery Mobile

jQuery mobile未正确显示

jquery jquery-mobile

jQuery mobile未正确显示,jquery,jquery-mobile,Jquery,Jquery Mobile,我正在尝试使用jquery mobile，如中所述这是我的代码，我尝试将所有代码添加到一个文件中： <html> <head> <style type="text/css"> .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; } .nav-glyphish-example .ui-btn .ui-icon { width: 45p

我正在尝试使用jquery mobile，如中所述

这是我的代码，我尝试将所有代码添加到一个文件中：

<html>
<head>

  <style type="text/css">
.nav-glyphish-example .ui-btn .ui-btn-inner {
    padding-top: 40px !important; 
}

.nav-glyphish-example .ui-btn .ui-icon { 
    width: 45px!important; 
    height: 35px!important; 
    margin-left: -24px !important; 
    box-shadow: none!important; 
    -moz-box-shadow: none!important; 
    -webkit-box-shadow: none!important;
    -webkit-border-radius: none !important;
    border-radius: none !important; 
}

#favorite .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -345px -112px;
    background-repeat: no-repeat;
}

#recent .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -9px -61px;
    background-repeat: no-repeat; 
}

#contacts .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -9px -540px;
    background-repeat: no-repeat; 
}

#keypad .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -9px -783px;
    background-repeat: no-repeat; 
}

#voicemail .ui-icon { 
    background-image: url(http://glyphish.com/images/demo.png);
    background-position: -394px -733px;
    background-repeat: no-repeat; 
}
  </style>


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>

</head>

<body>

<div data-role="page">  
    <div data-role="content"> 
        <div data-role="footer" class="nav-glyphish-example"> 
            <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
            <ul> 
                <li><a href="#" id="favorite" data-icon="custom">Favorite</a></li> 
                <li><a href="#" id="recent" data-icon="custom">Recent</a></li> 
                <li><a href="#" id="contacts" data-icon="custom">Contacts</a></li> 
                <li><a href="#" id="keypad" data-icon="custom">Keypad</a></li> 
                <li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li> 
            </ul> 
            </div> 
        </div> 
     </div>
 </div> 

</body>
</html>


.nav glypish示例.ui btn.ui btn内部{
填充顶部：40px！重要；
}
.nav glypish示例.ui btn.ui图标{
宽度：45px！重要；
高度：35px！重要；
左边距：-24px！重要；
盒影：无！重要；
-莫兹盒影：无！重要；
-网络工具包盒阴影：无！重要；
-webkit边界半径：无！重要；
边界半径：无！重要；
}
#收藏夹.ui图标{
背景图片：url(http://glyphish.com/images/demo.png);
背景位置：-345px-112px；
背景重复：无重复；
}
#最近的.ui图标{
背景图片：url(http://glyphish.com/images/demo.png);
背景位置：-9px-61px；
背景重复：无重复；
}
#contacts.ui图标{
背景图片：url(http://glyphish.com/images/demo.png);
背景位置：-9px-540px；
背景重复：无重复；
}
#键盘.ui图标{
背景图片：url(http://glyphish.com/images/demo.png);
背景位置：-9px-783px；
背景重复：无重复；
}
#voicemail.ui图标{
背景图片：url(http://glyphish.com/images/demo.png);
背景位置：-394px-733px；
背景重复：无重复；
}

但输出未正确显示：

您可能应该包括：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

这就是答案。我在本地进行了测试，它通过包含CSS正常工作。