我正在尝试使用jQuery加载动画。我为css文件尝试了不同的路径,如
<link href="css/animation.css" type="text/css" rel="stylesheet">
<link href="../css/animation.css" type="text/css" rel="stylesheet">
但仍然没有在html文件中加载CSS文件。当我将CSS文件保存在与html文件相同的文件夹中时,它可以正常工作。
我的文件夹结构 ...
的index.html
<html>
<head>
<title>Loading Animation using jQuery</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.backstretch.js"></script>
<link href="css/animation.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="loader">
</div>
<h2>Hi There</h2>
<script>
$(window).load(function(){
$("#loader").delay(10000).hide(0).fadeOut("slow");
});
</script>
</body>
</html>
animation.css
#loader{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
}
正在正确加载js文件,但css文件不是..不明白我哪里出错..
答案 0 :(得分:2)
加载CSS文件应该没有任何问题,
因为文件夹CSS与HTML文件位于同一目录级别。
但是CSS文件中使用的图像比CSS文件高一级。
尝试更改
background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
到
background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
答案 1 :(得分:0)
在编辑器中打开您的项目,转到您的css文件所在的文件夹。将css文件拖放到代码中。它会自动为您生成路径。 希望这会有所帮助。
答案 2 :(得分:0)
答案 3 :(得分:0)
我看到根据你的结构你的文件夹结构是你的外部CSS链接的右链接。
并检查animation.css在css文件夹中是否可用
答案 4 :(得分:0)
如果您在Chrome浏览器中运行此应用程序。只需按clt + shift + j或F12即可查看错误。Like the attached image you can see the error on console tab, just fix that
答案 5 :(得分:0)
您可以使用以下代码
来引用您的CSS文件<link href="css/animation.css" type="text/css" rel="stylesheet">
但你必须修改你的CSS文件
background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
答案 6 :(得分:0)
首先,您需要通过将网络选项卡检查为Yasser stated来确定是否实际未加载CSS文件。