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

我试图学习如何在我的页面上创建一个推荐部分，但不知何故，无论我写什么，它的上下文都没有显示出来

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

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

这是我的

index.html

页面

威廉森
网络开发者

Lorem ipsum dolor sit amet，奉献精英。在阿特克库帕的一个监狱
所有人都必须遵守法律，遵守法律
地点：vitae，圣殿骑士团，精英伊普萨姆。

乌鸦
道
黎明
D
克里斯蒂娜
网页设计师

Lorem ipsum dolor sit amet，奉献精英。在阿特克库帕的一个监狱
所有人都必须遵守法律，遵守法律
地点：vitae，圣殿骑士团，精英伊普萨姆。

$（文档）.ready（函数（）{
$（“#证明滑块”）.owlCarousel({
项目：1，
itemsDesktop:[1000,1]，
itemsDesktopSmall:[979,1]，
itemsTablet:[768,1]，
分页：正确，
过渡风格：“倒退”，
自动播放：对
});
});

style.css

这是

.demo{
背景#3d3d；
}
.证明{
填充：35px 50px；
利润率：0 20px 30px；
边界半径：0 70px 0 70px；
边框：5px实心#ffc33c；
左边界：无；
边界权：无；
文本对齐：居中；
}
.推荐图片{
显示：内联块；
宽度：100px；
高度：100px；
边界半径：50%；
边缘底部：20px；
溢出：隐藏；
}
.推荐性图片{
宽度：100%；
高度：自动；
}
.推荐书.头衔{
显示：块；
边际：0.7px 0；
字体大小：20px；
字号：600；
颜色：#ffc33c；
字母间距：1px；
文本转换：大写；
}
.推荐信{
显示：块；
字体大小：15px；
颜色：#fff；
文本转换：大写；
边缘底部：20px；
}
.推荐性描述{
字体大小：16px；
颜色：#fff；
线高：30px；
}
.owl主题.owl控件{
边际上限：0；
}
.owl主题.owl控件.owl页面跨度{
背景：#fff；
不透明度：0.8；
转换：所有0.3秒到0秒；
}
.owl主题.owl控件.owl-page.active span{
背景：#ffc33c；
}

您应该在使用库之前导入库。只需更改

标记的顺序即可

<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>

$（文档）.ready（函数（）{
$（“#证明滑块”）.owlCarousel({
项目：1，
itemsDesktop:[1000,1]，
itemsDesktopSmall:[979,1]，
itemsTablet:[768,1]，
分页：正确，
过渡风格：“倒退”，
自动播放：对
});
});

嘿，您没有将

脚本

标记放在

正文中

而且在执行您自己的代码之前，您还需要引导类似jQuery的库：

.demo{
背景#3d3d；
}
.证明{
填充：35px 50px；
利润率：0 20px 30px；
边界半径：0 70px 0 70px；
边框：5px实心#ffc33c；
左边界：无；
边界权：无；
文本对齐：居中；
}
.推荐图片{
显示：内联块；
宽度：100px；
高度：100px；
边界半径：50%；
边缘底部：20px；
溢出：隐藏；
}
.推荐性图片{
宽度：100%；
高度：自动；
}
.推荐书.头衔{
显示：块；
边际：0.7px 0；
字体大小：20px；
字号：600；
颜色：#ffc33c；
字母间距：1px；
文本转换：大写；
}
.推荐信{
显示：块；
字体大小：15px；
颜色：#fff；
文本转换：大写；
边缘底部：20px；
}
.推荐性描述{
字体大小：16px；
颜色：#fff；
线高：30px；
}
.owl主题.owl控件{
边际上限：0；
}
.owl主题.owl控件.owl页面跨度{
背景：#fff；
不透明度：0.8；
转换：所有0.3秒到0秒；
}
.owl主题.owl控件.owl-page.active span{
背景：#ffc33c；
}

文件
威廉森
网络开发者

Lorem ipsum dolor sit amet，奉献精英。这是一个令人震惊的事件，因为它是一个令人震惊的事件，因为它是一个非常重要的事件，所有的人都被安排在一个非常重要的位置。

哎呀，哎呀，哎呀
克里斯蒂娜
网页设计师

Lorem ipsum dolor sit amet，奉献精英。这是一个令人震惊的事件，因为它是一个令人震惊的事件，因为它是一个非常重要的事件，所有的人都被安排在一个非常重要的位置。

$（文档）.ready（函数（）{
$（“#证明滑块”）.owlCarousel({
项目：1，
itemsDesktop:[1000,1]，
itemsDesktopSmall:[979,1]，
itemsTablet:[768,1]，
分页：正确，
过渡风格：“倒退”，
自动播放：对
});
});

更改脚本标记的顺序。首先是jQuery，然后是owl，然后是您的