Почему, когда я добавляю следующий загрузчик, моя страница становится белой? - PullRequest
Новая
       3

Почему, когда я добавляю следующий загрузчик, моя страница становится белой?

0 голосов
/ 17 октября 2019

Я работаю над классным проектом, который требовал от меня написания кода для сайта, который что-то продает. Я пытаюсь создать корзину для покупок, чтобы при нажатии кнопки добавить в корзину она добавляла товар. Однако, когда я добавил ссылку для начальной загрузки, моя страница стала белой. Это проблема начальной загрузки или что-то не так с моим кодом?

Я впервые пользуюсь этим сайтом, поэтому я не уверен, что это все, что мне нужно опубликовать. Если требуется какой-либо другой код (например, js), просто спросите. Заранее спасибо. 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Printing Prime</title>
  <link rel="icon" type="image/png" href="img/favi.png">
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <script src="js/bootstrap/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
  <link rel="stylesheet" href="css\splitslick\style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    (problem***)
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>

<body>
    <section id="" class="container-fluid cart">
        <article id="" class="col">
            <span class="open-modal">
                <i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
            </span>
        </article>
    </section>

<section id="" class="container-fluid">
    <article id="" class="row">
         <div id="mask"></div>
            <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
              </div>
              <div class="modal-body">
                <table class="show-cart table">

                </table>
                <div>Total price: $<span class="total-cart"></span></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Order now</button>
              </div>
            </div>
          </div>
        </div>
    </article>
</section>

  <section id="" class="container-fluid">
    <article id="" class="row">
      <div id="" class="col col-md-12">
        <nav class="navi">
          <ul class="list">
            <li><a href="#products">PRODUCTS</a></li>
            <li><a href="#reviews">REVIEWS</a></li>
            <li style="padding: 10px; margin: 10px;"><a href="index.html"><img src="img/ppppp.png" id="logo"></a></li>
            <li><a href="#contact">CONTACT</a></li>
            <li><a href="#about">ABOUT US</a></li>
          </ul>
        </nav>
      </div>
    </article>
  </section>


  <section id="" class="container-fluid">
    <article id="" class="row">
      <div id="" class="col col-md-12">
        <div class="split-slideshow">
          <div class="slideshow">
            <div class="slider">
              <div class="item">
                <img src="img/banner1.png" />
              </div>
              <div class="item">
                <img src="img/banner2.png" />
              </div>
              <div class="item">
                <img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-blue-gradient-pattern-overlay-background-banner-image_50591.jpg" />
              </div>
              <div class="item">
                <img src="img/banner4.jpeg" />
              </div>
            </div>
          </div>
          <div class="slideshow-text">
            <div class="item"><a href="#" class="ss">PRINTING PRIME</a></div>
            <div class="item"><a href="#" class="ss">PRODUCTS</a></div>
            <div class="item"><a href="#" class="ss">THREE</a></div>
            <div class="item"><a href="#" class="ss">ABOUT US</a></div>
          </div>
        </div>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
        <script src="js/splitslick/js/index.js"></script>
      </div>
    </article>
  </section>

  <!-- <section id="" class="container-fluid">
  <article id="" class="row">
  <div id="" class="col col-md-12">
  <div class="col-md-6">

</div>
<div clas="col-md-6">
<div class="col-lg-12">

</div>
</article>
</section> -->

<section id="products" class="container-fluid">
  <article id="" class="row">
    <div id="" class="col col-md-12 product-grid">
      <div class="col col-md-4 grid-item">
        <div>
          <div>
            <div>
              <img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
              <h5 style="color:white;">Sad Face Cap</h5>
              <h5 style="color:white;">$12.99</h5>
              <div>
                  <input type="number" placeholder="# of items">
                  <a href="#" data-name="Sad Face Cap" data-price="12.99" class="add-to-cart btn btn-primary">Add to cart</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-md-4 grid-item">
        <div>
          <div>
            <div>
              <img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
              <h5 style="color:white;">Signature Tee</h5>
              <div>
                <input type="number" placeholder="# of items">
                <input type="submit" value="Add To Cart" id="submit">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class=" col col-md-4 grid-item">
        <div>
          <div>
            <div>
              <img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
              <h5 style="color:white;">VHS Hoodie</h5>
              <div>
                <input type="number" placeholder="# of items" >
                <input type="submit" value="Add To Cart" id="submit">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>



  </body>
  </html>

1 Ответ

1 голос
/ 17 октября 2019

Похоже, есть несколько проблем с файлами, на которые вы ссылаетесь:

  • Похоже, у вас есть четыре разных версии jQuery (3.4.1, 2.1.3, 3.1.0 иslim). Вам нужна только одна ссылка на jQuery (убедитесь, что на нее ссылаются до Bootstrap). Наличие нескольких ссылок приведет к ошибкам.

  • Вы также можете сослаться на Bootstrap дважды (один раз из CDN в конце вашего <head> и один раз в начале вашего <head>с местной ссылкой). Несколько ссылок Bootstrap также, скорее всего, приведут к ошибкам.

  • Похоже, что вам также не хватает ссылки на PopperJS , которая является обязательной зависимостью Bootstrap 4.

  • css\splitslick\style.css ссылается на обратную косую черту;вам понадобятся прямые слэши.

  • Ваши локальные script.js и style.css приходят до Bootstrap JS и CSS, что означает, что Bootstrap перезапишет ваш собственный код;вы хотите, чтобы ваш код загружался последний .

Удаление этих дополнительных ссылок и проверка того, что Bootstrap приходит после jQuery, PopperJSи Тетер должен решить твою проблему. Перемещение вашего собственного JavaScript и CSS в конец каждого соответствующего раздела должно привести к тому, что он переопределит любой конфликтующий код начальной загрузки.

Вот модифицированный <head>, который должен работать. Обратите внимание на следующий порядок:

  • Bootstrap 4 CSS -> Плагины -> Шрифты -> Пользовательский CSS
  • jQuery -> PopperJS -> Tether -> Bootstrap 4 JS -> ПользовательскийJS 

<head>
  <meta charset="utf-8">
  <title>Printing Prime</title>
  <link rel="icon" type="image/png" href="img/favi.png">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <link rel="stylesheet" href="css/splitslick/style.css">
  <link rel="stylesheet" type="text/css" href="css/home.css">

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <script src="js/script.js"></script>
</head>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...