jQuery页面没有风格，看起来不正确

我试过了所有我能想到的，但我的页面加载奇怪。没有风格或形式，对我而言，我不知道为什么！这里是我的代码如下：并附上了运行代码时得到的结果图片。jQuery页面没有风格，看起来不正确

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery Mobile Demos</title> 
<link rel="shortcut icon" href="favicon.ico"> 
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> 
<link rel="stylesheet" href="_assets/css/jqm-demos.css"> 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> 
<script src="js/jquery.js"></script> 
<script src="_assets/js/index.js"></script> 
<script src="js/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> 
<link rel="stylesheet" href="_assets/css/jqm-demos.css">  

    <div data-role="header"> 
     <div class="ui-btn-active" data-role="navbar"> 
      <ul> 
       <li>  
        <a href="#">Find Us</a> 
       </li> 
       <li> 
        <a href="#">Call Us</a> 
       </li> 
      <ul> 
     </div> 
    </div> 
    <div class="ui-content" data-role="main"> 
     <ul data-filter="true" data-insert="true" data-role="listview"> 
       <li> 
        <a href="#">Brussels</a> 
       </li> 
       <li> 
        <a href="#">Dublin</a> 
       </li> 
       <li> 
        <a href="#">Cape Town</a> 
       </li> 
     </ul> 
    </div> 
     <div data-role="footer" style="text-align:centure;"> 
      <button class="ui-btn ui-icon-plus ui-btn-icon-left">Click 
       Me</button> 
     </div> 
    </div> 
</body> 
</html>

来源

2016-02-10 Theorist

删除'jqm-demos.css'。仅在'head'中加载css/js。 – Omar

这是一个简单的拼写错误。头部导航栏中的第一个<ul>未关闭。不知何故jQuery的手机不喜欢这个，并停止渲染一个错误。你应该在你的浏览器开发工具中看到这个错误。

如果您对jquery和jquery-mobile的引用是正确的。如果关闭<li>标签

<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>jQuery Mobile Demos</title> 
 
<link rel="shortcut icon" href="favicon.ico"> 
 
<!-- jQuery Mobile --> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 
 
<link rel="stylesheet" href="_assets/css/jqm-demos.css"> 
 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> 
 
<!-- jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script src="_assets/js/index.js"></script> 
 
<!-- jQuery Mobile --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 
 

 
<div data-role="page" data-theme="a"> 
 
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css"> 
 
    <link rel="stylesheet" href="_assets/css/jqm-demos.css"> 
 

 
    <div data-role="header"> 
 
    <div class="ui-btn-active" data-role="navbar"> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Find Us</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Call Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="ui-content" data-role="main"> 
 
    <ul data-filter="true" data-insert="true" data-role="listview"> 
 
     <li> 
 
     <a href="#">Brussels</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Dublin</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Cape Town</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div data-role="footer" style="text-align:center;"> 
 
    <button class="ui-btn ui-icon-plus ui-btn-icon-left"> 
 
     Click Me 
 
    </button> 
 
    </div> 
 
</div>

除此之外，它应该工作，你有别人的错误在你的代码。

你应该在jquery和jquery-mobile之后插入你的个人javascript代码<script src="_assets/js/index.js"></script>。如果你这样做，你可以肯定，所有的库都在你的“个人”JavaScript文件中使用之前加载。
没有必要两次包含相同的CSS文件。像你一样 css/themes/default/jquery.mobile-1.4.5.min.css和_assets/css/jqm-demos.css
在jquery-mobile中，可以在data-role =“page”容器中包含CSS和/或Javascript文件。但在这种情况下，它绝对没有意义。
在navbar <div>内部不需要类ui-btn-active。如果您想设置导航栏的按钮处于活动状态，则必须在<li>标签内包含此类
而且您的页脚内有错字。 centure

来源

2016-02-11 17:19:29 Ridrog

啧啧，我不能够感谢你。它的工作方式正是我想要的！我其实会复制并保存你的答案，并继续练习和阅读你的代码。我仍在学习，但是错字错误而不是结束标记是我必须努力并且精确的工作。 – Theorist

另外，感谢您解释我的其他错误，以及在哪里和哪里不要放置某些代码。我想知道我是否偶然得到了这些错误，但不知道我会把它们放在哪里。再次，非常感谢。我非常感谢帮助！ – Theorist

jQuery页面没有风格，看起来不正确

回答

相关问题