CSS未應用於頁面

Question

我目前有一個相當簡單的頁面，由於某種原因，沒有應用maincss.css，它只是將背景設置為圖像。 我知道它有效，因為在我添加另一個CSS文件進行jquery樣式之前它已經起作用了。 那怎么了？

<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 個解決方案

解決方案1
5 已采納 2013-07-01 19:16:34

解決方案2
0 2013-07-01 19:03:11

CSS未應用於頁面

問題描述

2 個解決方案

解決方案1 5 已采納 2013-07-01 19:16:34

解決方案2 0 2013-07-01 19:03:11

解決方案1
5 已采納 2013-07-01 19:16:34

解決方案2
0 2013-07-01 19:03:11