无法在各自的文件夹中访问网站CSS和javascript [英] Website css and javascript are not accessible within their respective folders
问题描述
我的学校为每个学生提供免费的网站空间。我创建了一个具有以下结构的网站
My school offers a free website space for each student. I created a website with the following structure
- index.html
- main-site/
- css/
- bootstrap.css
- style.css
- img/
- js/
- help-docs/
- template/
当我在家用计算机上访问该站点时，一切正常，并且CSS应用于页面。
When I visit the site on my home machine, everything loads fine and the css is applied to the pages.
然后我将该文件夹上传到我学校的网站根目录。我将默认的 index.html 替换为我的文件夹，并将文件夹置于与以前相同的结构中。但是问题是，当我从新端点打开页面时，没有应用css。
I then upload the folder to the root of my website for the school. I replace the default index.html with mine and place the folders in the same structure as before. But the problem is that when I open the page from the new endpoint, the css is not applied. None of the images are loaded and the website just looks bare.
我尝试更改文件夹和文件的权限以使其可访问，但这似乎并没有。工作。我什至将所有内容都更改为 777 ，这没有什么区别。
我有一个朋友可以在他的页面上尝试我的网站，对于他来说一切似乎都很好。因此，在这一点上，我不确定是什么问题。
I've tried changing the permissions of the folders and files to make them accessible but this does not seem to work. I even changed everything to 777 and it does not make a difference.
I got one of my friends to try my website on his page and everything seems to be working well for him. So at this point I'm not sure what the problem is.
我还应该补充一点，网络服务器是apache
I should also add that the webserver is apache
到目前为止，在我的.htaccess文件中，我具有以下内容：
So far, in my .htaccess file, I have the following:
DirectoryIndex website.html
我也将index.html更改为website.html，现在通过使用 website访问该网站。 html 而不是 index.html 仍然可以正常工作，除了无法加载css或js文件。
I have also changed index.html to website.html and now accessing the website by using website.html rather than index.html still works fine apart from the inability to load css or js files.
可以使用 .htaccess 文件解决吗？如果是这样，我可以添加些什么来使它起作用？欢迎使用其他解决方案，尽管应注意，我没有root访问权限
Is this something that can be solved using a .htaccess file? If so, what could I add to it to make this work? Other solutions are welcome, although it should be noted that I do not have root access
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Light Wave Template | DesignBootstrap</title>
<!-- BOOTSTRAP CORE CSS -->
<link href="main-site/css/bootstrap.css" rel="stylesheet" />
<!-- CUSTOM CSS -->
<link href="main-site/css/style.css" rel="stylesheet" />
<!-- HTML5 Shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER SECTION START-->
<section id="header">
<div class="container">
<div class="row text-center">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
<h1>Light Wave Template </h1>
<p>
<strong>6 Style </strong> Versions
</p>
<h4>Click on the image to see demos</h4>
</div>
</div>
</div>
</section>
<!-- HEADER SECTION END-->
<!-- PREVIEW SECTION START-->
<section id="preview">
<div class="container">
<div class="row text-center">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 ">
<h1>SEE DEMOS</h1>
<h3> <a href="help-docs/index.html" target="_blank">See Document</a></h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/blue.html" target="_blank">
<img src="main-site/img/previews/1.png" class="img-responsive" alt="" />
<hr />
<p>
Blue Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/green.html" target="_blank">
<img src="main-site/img/previews/2.png" class="img-responsive" alt="" />
<hr />
<p>
Green Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/red.html" target="_blank">
<img src="main-site/img/previews/3.png" class="img-responsive" alt="" />
<hr />
<p>
Red Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/yellow.html" target="_blank">
<img src="main-site/img/previews/4.png" class="img-responsive" alt="" />
<hr />
<p>
Yellow Color Version ( With slider background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-black.html" target="_blank">
<img src="main-site/img/previews/5.png" class="img-responsive" alt="" />
<hr />
<p>
Black Background Version ( With solid background )
</p>
</a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="preview-wrapper">
<a href="template/solid-red.html" target="_blank">
<img src="main-site/img/previews/6.png" class="img-responsive" alt="" />
<hr />
<p>
Green Background Version ( With solid background )
</p>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- PREVIEW SECTION END-->
<!-- YES SECTION START-->
<section id="yes">
<div class="overlay">
<div class="container">
<div class="row text-center">
<div class="col-lg-12 col-md-12">
<span class="text-yes">Yes , You heard right !
<br />
its'free and with documentation</span>
</div>
</div>
</div>
</div>
</section>
<!-- YES SECTION END-->
<!-- BOTTOM SECTION START-->
<section id="bottom">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h3>Want Some More ?</h3>
<h4>EXPLORE : DesignBootstrap.com</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 ">
</div>
</div>
</div>
</section>
<!-- BOTTOM SECTION END-->
<!-- FOOTER SECTION START-->
<footer>
<div class="container">
<div class="row text-center">
<div class="col-md-12">
© 2015 <a href="http://www.designbootstrap.com/" target="_blank">DesignBootstrap.com </a>
</div>
</div>
</div>
</footer>
<!-- FOOTER SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY SCRIPTS -->
<script src="main-site/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="main-site/js/bootstrap.js"></script>
</body>
</html>
推荐答案
尝试在主站点之外创建一个新目录并将文件移动到该目录。这样可能可以解决您遇到的问题。
Try creating a new directory outside of main-site and moving the files to that directory. This may fix the problem that you are experiencing.
听起来像文件或目录所有权可能存在问题，但无法看到它，我不是完全确定。
Sounds like there may be a problem with file or directory ownership, but without being able to see it, I'm not exactly sure.
这篇关于无法在各自的文件夹中访问网站CSS和javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
