Блог

Главная - Вопросы по программированию - html страница теряет стиль после запуска с nginx

html страница теряет стиль после запуска с nginx

#html #css #nginx

#HTML #css #nginx

Вопрос:

У меня есть шаблон, который я тестировал. как только я открываю шаблон с помощью Chrome, перейдя в его папку, он работает. Но когда я даю nginx каталог, а затем набираю localhost/index.html файл открывается, но теряет весь стиль. как только я перехожу и открываю Chrome, он работает отлично и отображается в URL: file:///var/www/html/sidebar-09-1/sidebar-09/index.html

почему страница теряет стиль после запуска с nginx или apache2. Консоль показывает несколько ошибок:

 jquery.min.js:2 jQuery.Deferred exception: $.scrollUp is not a function TypeError: $.scrollUp is not a function
    at HTMLDocument.<anonymous> (http://localhost/js/main.js:15:11)
    at l (http://localhost/js/jquery.min.js:2:29567)
    at c (http://localhost/js/jquery.min.js:2:29869) undefined
w.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $.scrollUp is not a function
    at HTMLDocument.<anonymous> (main.js:15)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)
DevTools failed to load SourceMap: Could not load content for http://localhost/js/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

index.html код выглядит следующим образом:

 <!doctype html>
<html lang="en">
  <head>
    <title>Sidebar 09</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
        
        <div class="wrapper d-flex align-items-stretch">
            <nav id="sidebar">
                <div class="custom-menu">
                    <button type="button" id="sidebarCollapse" class="btn btn-primary">
            </button>
        </div>
            <div class="img bg-wrap text-center py-4" style="background-image: url(images/bg_1.jpg);">
                <div class="user-logo">
                    <div class="img" style="background-image: url(images/logo.jpg);"></div>
                    <h3>Catriona Henderson</h3>
                </div>
            </div>
        <ul class="list-unstyled components mb-5">
          <li class="active">
            <a href="#"><span class="fa fa-home mr-3"></span> Home</a>
          </li>
          <li>
              <a href="#"><span class="fa fa-download mr-3 notif"><small class="d-flex align-items-center justify-content-center">5</small></span> Download</a>
          </li>
          <li>
            <a href="#"><span class="fa fa-gift mr-3"></span> Gift Code</a>
          </li>
          <li>
            <a href="#"><span class="fa fa-trophy mr-3"></span> Top Review</a>
          </li>
          <li>
            <a href="#"><span class="fa fa-cog mr-3"></span> Settings</a>
          </li>
          <li>
            <a href="#"><span class="fa fa-support mr-3"></span> Support</a>
          </li>
          <li>
            <a href="#"><span class="fa fa-sign-out mr-3"></span> Sign Out</a>
          </li>
        </ul>

        </nav>

        <!-- Page Content  -->
      <div id="content" class="p-4 p-md-5 pt-5">
        <h2 class="mb-4">Sidebar #09</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
        </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Комментарии:

1. Какие ошибки вы видите в консоли браузера? Имеет ли файл CSS соответствующие разрешения на сервере?

2. @j08691 Я получаю несколько ошибок на консоли. Я обновил вопрос

3. Также проверьте вкладку «Сеть» инструмента разработки для файла CSS. В частности, столбец состояния

4. @j08691 статус 200 для всех перечисленных файлов