CSS沒有應用到頁面

我目前有一個相當簡單的頁面，由於某種原因，maincss.css沒有被應用，它只是簡單地將背景設置爲圖像。我知道它的工作原理是在我爲jquery樣式添加另一個css文件之前工作。那麼這是錯誤的？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>

來源

2013-07-01 AggieDev

上面的代碼沒什麼問題，請使用chrome或firefox，看看你有沒有錯誤或警告，當你檢查元素或按F12。謝謝 – abc123

我不相信任何路徑是不正確的，因爲當我查看頁面源並單擊它們正確打開的每個.js和.css文件時 – AggieDev

圖像的路徑是否正確？ – Mathletics

看來，因爲你可能會面臨的問題：

在CSS文件中的圖片路徑你沒有正確的給出。（你應該給你的CSS文件而不是html的相對路徑）
在你的新CSS文件中，body{}標籤被覆蓋爲空。

對於分辨率：嘗試檢查CSS，將background-color設置爲某種顏色並進行測試。所以這樣你可以確保CSS工作正常，並嘗試其他選項。

來源

2013-07-01 19:16:34

最後，我將css文件從根目錄移動到css文件夾，並沒有改變相對圖像路徑。謝謝！！ – AggieDev

試試這個

<!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>

來源

2013-07-01 19:03:11 Enve

您是否願意解釋您所做的更改以及爲何可能有所幫助？ – Mathletics

我沒有改變任何東西。剛剛添加了<！DOCTYPE html>並轉換爲HTML5 – Enve

這是幹什麼的？ –

CSS沒有應用到頁面

回答

相關問題