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没有应用到页面

回答

相关问题