Question

我目前有一个相当简单的页面，由于某种原因，没有应用maincss.css，它只是将背景设置为图像。我知道它有效，因为它在我为jquery样式添加另一个css文件之前工作。这有什么不对？

<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
  <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
  <title>Welcome to Jetty-9</title>
  <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
  <link href="css/maincss.css" rel="stylesheet">
  <script type='text/javascript' src='js/jquery.js'></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $( "#dialog" ).dialog({
      width: 400,
      buttons: [
        {
          text: "Ok",
          click: function() {
            $( this ).dialog( "close" );
          }
        },
        {
          text: "Cancel",
          click: function() {
            $( this ).dialog( "close" );
          }
        }
      ]
    });
    });
  </script>
</head>
<body>

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

</body>
</html>

Answer 1

看起来你可能会遇到问题，因为：

在CSS文件中，您未正确指定的图像路径。（你应该从CSS文件中提供相对路径而不是html）
在新的CSS文件中，body{}标记被覆盖为空。

解决方案：尝试通过将background-color配置为某种颜色来检查CSS并对其进行测试。所以这样你可以确保CSS工作正常并尝试其他选项。

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Script-Type" CONTENT="text/javascript">
  <title>Welcome to Jetty-9</title>
  <link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
  <link type="text/css" href="css/maincss.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $("#dialog").dialog({
      width: 400,
      buttons: [
        {
          text: "Ok",
          click: function() {
            $( this ).dialog( "close" );
          }
        },
        {
          text: "Cancel",
          click: function() {
            $( this ).dialog( "close" );
          }
        }
      ]
    });
    });
  </script>
</head>
<body>

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

</body>
</html>

CSS未应用于页面

2 个答案: