我的学校为每个学生提供免费的网站空间。我创建了一个具有以下结构的网站

 - index.html
 - main-site/
  - css/
     - bootstrap.css
     - style.css
  - img/
  - js/
 - help-docs/
 - template/


当我在家用计算机上访问该站点时,一切正常,并且CSS应用于页面。

然后,我将该文件夹上载到学校的网站根目录。我将默认的index.html替换为我的777,然后将文件夹放置在与以前相同的结构中。但是问题是,当我从新端点打开页面时,没有应用css。没有图像被加载,网站看起来光秃秃。

我尝试更改文件夹和文件的权限以使其可访问,但这似乎不起作用。我什至将所有内容都更改为website.html,并且没有任何区别。
我有一个朋友可以在他的网页上尝试我的网站,对于他来说一切似乎都很好。因此,目前我不确定是什么问题。

我还应该补充一点,网络服务器是apache

到目前为止,在我的.htaccess文件中,我具有以下内容:

DirectoryIndex website.html


我也将index.html更改为website.html,现在除了无法加载css或js文件之外,使用index.html而不是.htaccess访问网站仍然可以正常工作。

使用文件可以解决此问题吗?如果是这样,我可以添加些什么来使它起作用?欢迎使用其他解决方案,尽管应注意,我没有root访问权限

Index.html



<!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">
          &copy; 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>

最佳答案

尝试在主站点之外创建一个新目录,然后将文件移至该目录。这可以解决您遇到的问题。

听起来文件或目录的所有权可能有问题,但是由于无法看到它,我不确定。

关于html - 无法在各自的文件夹中访问网站CSS和JavaScript,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35543882/

10-12 00:12
查看更多