Question

我正在尝试学习如何在页面上创建推荐部分，并且某种程度上它的上下文都没有显示出来，我写的内容也没有。

我还尝试创建一个没有任何内容的空项目，导入所有文本，但仍然没有显示。只显示空白页。

我是HTML新手，所以我做错什么了吗？

所以这是我的return redirect('profile')页

index.html

<body> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-8"> <div id="testimonial-slider" class="owl-carousel"> <div class="testimonial"> <div class="pic"> <img src="images/img-1.jpg"> </div> <h3 class="title">Williamson</h3> <span class="post">Web Developer</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam. </p> awdawdaw daw dawdaw d </div> <div class="testimonial"> <div class="pic"> <img src="images/img-2.jpg"> </div> <h3 class="title">Kristina</h3> <span class="post">Web Designer</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam. </p> </div> </div> </div> </div> </div> </div> </body> <script> $(document).ready(function () { $("#testimonial-slider").owlCarousel({ items: 1, itemsDesktop: [1000, 1], itemsDesktopSmall: [979, 1], itemsTablet: [768, 1], pagination: true, transitionStyle: "backSlide", autoPlay: true }); }); </script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"> </script>是这个

style.css

Answer 1

在使用库之前，应先导入它们。只需更改<script>标签的顺序即可。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

<script>
$(document).ready(function(){
    $("#testimonial-slider").owlCarousel({
        items:1,
        itemsDesktop:[1000,1],
        itemsDesktopSmall:[979,1],
        itemsTablet:[768,1],
        pagination:true,
        transitionStyle:"backSlide",
        autoPlay:true
    });
});</script>

Answer 2

嘿，您没有将script标记放在body内，还需要在执行自己的代码之前引入jQuery之类的库：

.demo {
  background: #3d3d3d;
}

.testimonial {
  padding: 35px 50px;
  margin: 0 20px 30px;
  border-radius: 0 70px 0 70px;
  border: 5px solid #ffc33c;
  border-left: none;
  border-right: none;
  text-align: center;
}

.testimonial .pic {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
  overflow: hidden;
}

.testimonial .pic img {
  width: 100%;
  height: auto;
}

.testimonial .title {
  display: block;
  margin: 0 0 7px 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffc33c;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.testimonial .post {
  display: block;
  font-size: 15px;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 20px;
}

.testimonial .description {
  font-size: 16px;
  color: #fff;
  line-height: 30px;
}

.owl-theme .owl-controls {
  margin-top: 0;
}

.owl-theme .owl-controls .owl-page span {
  background: #fff;
  opacity: 0.8;
  transition: all 0.3s ease 0s;
}

.owl-theme .owl-controls .owl-page.active span {
  background: #ffc33c;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div class="demo">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <div id="testimonial-slider" class="owl-carousel">
            <div class="testimonial">
              <div class="pic">
                <img src="images/img-1.jpg">
              </div>
              <h3 class="title">Williamson</h3>
              <span class="post">Web Developer</span>
              <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
              </p>

              awdawdaw daw dawdaw d
            </div>
            <div class="testimonial">
              <div class="pic">
                <img src="images/img-2.jpg">
              </div>
              <h3 class="title">Kristina</h3>
              <span class="post">Web Designer</span>
              <p class="description">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#testimonial-slider").owlCarousel({
        items: 1,
        itemsDesktop: [1000, 1],
        itemsDesktopSmall: [979, 1],
        itemsTablet: [768, 1],
        pagination: true,
        transitionStyle: "backSlide",
        autoPlay: true
      });
    });
  </script>

</body>
</html>

div及其内容未显示在页面中

2 个答案: