个人中心
gpt4 book ai didi

javascript - Bootstrap Carousel 幻灯片会扰乱网站的元素和内容

转载 作者：行者123 更新时间：2023-11-28 06:07:20 24 4
gpt4 key购买 nike

我决定在我的网站上实现引导轮播，我从 W3Schools website 获得了代码我按照有关如何在我的网站上应用幻灯片的说明进行操作，幻灯片效果很好，但它弄乱了我网站的元素。

一个例子是，当我在我的网站上应用幻灯片时，我的 Merriweather serif 字体变得比以前更轻，即使在 CSS 中字体粗细是粗体。这也发生在我的链接上。

另一件事是它增加了我的页脚和导航栏的宽度。

我试图对这个问题进行更多研究，但找不到任何人遇到类似问题。

这是我的网站的图片没有引导轮播幻灯片代码:

Website without slideshow

我真的希望我的网站有引导轮播幻灯片，因为它增加了交互性，但与此同时我不希望我的内容和元素发生巨大变化。

如果能帮助解决这个问题，我们将不胜感激。

这是 CSS 和 HTML(如果您想查看引导轮播幻灯片对我网站上的元素和内容的影响，请运行下面的代码片段)

html,
body {
  background-color: #09018a;
}
#container {
  width: 1200px;
  height: 1300px;
  border: 3px solid #ffbd1e;
  background-color: #FFFFFF;
  position: absolute;
  left: 140px;
  top: 8px;
}
#nav {
  width: 1200px;
  height: 75px;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background-color: #d7001f;
  position: absolute;
  top: 250px;
}
#footer {
  width: 1200px;
  height: 100px;
  position: relative;
  background-color: #d7001f;
  top: 570px;
  font-family: 'Merriweather', serif;
}
#footer a:hover {
  color: rgb(0, 0, 255);
  font-weight: bold;
}
#myCarousel {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 450px;
  left: 750px;
  padding: 10px;
  margin: 30px;
  z-index: 3;
  border: 3px solid #000000;
}
header img {
  position: relative;
  left: 500px;
}
#nav li {
  display: inline;
  font-family: 'Merriweather', serif;
}
#nav a {
  text-decoration: none;
}
#nav a:link {
  display: inline-block;
  width: 200px;
  color: #5c3205;
  border-radius: 8px;
  box-shadow: 1px 1px 2px 2px #f26522;
  background-color: #e79806;
  text-shadow: 3px 2px 3px #aaa;
  position: relative;
  top: 20px;
  left: 5px;
}
#nav a:hover {
  color: #ff0000;
}
#nav a:visited {
  color: #5c3205;
}
p {
  font-size: 18px;
}
h3 {
  font-size: 15px;
}
h4 {
  font-size: 15px;
  font-style: italic;
}
.story1 {
  width: 700px;
  height: 600px;
  position: relative;
  left: 50px;
  top: 300px;
  padding: 5px;
  font-family: 'Merriweather', serif;
  font-weight: bold;
}
.story3 {
  width: 450px;
  height: 200px;
  position: absolute;
  right: 700px;
  top: 900px;
  margin-top: 20px;
  font-family: 'Merriweather', serif;
  font-weight: bold;
}
.story3 li {
  margin-bottom: 15px;
  font-size: 18px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Course Outline</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="Testing.css" type="text/css">
</head>

<body>
  <div id="container">

    <header>

    </header>

    <div id="nav">

    </div>

    <div class="story1">

      <h1>Computer Science at Tawa College</h1>

      <h2>DITCS101</h2>
      <p>In DITCS101 you will learn programming languages such as Python, CSS3, HTML5 and Scratch, you will also learn to use Webflow to design your website without any coding. You will be tested on these programming languages by means of doing various assesments
        like using Python to construct a basic computer program for a specified task and using Notepad++ to make a prototype (like a website) to address a brief.

      </p>

      <h2>DITCS201</h2>

      <p>In DITCS201 your knowledge of programming languages like Python, CSS3, HTML5 will be expanded and you will be taught new techniques and features that you will be utilising in various assesments. You will also be taught PHP which is a server-side
        scripting language designed for web development and also MYSQL which is the world's second most used relational database management system.

      </p>

      <h2>DITCS301</h2>

      <p>In DITCS301, your knowledge of Python, CSS3, HTML5, PHP and MYSQL will be further expanded for you to use in various assesments as well as learning JQUERY to create animations for websites.

      </p>

    </div>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="images/Person1.jpg" alt="Masterchief">
        </div>

        <div class="item">
          <img src="images/Person2.jpg" alt="Tuna pasta bake">
        </div>

        <div class="item">
          <img src="images/Person3.jpg" alt="Chickpea and tomato curry">
        </div>

        <div class="item">
          <img src="images/Person4.jpg" alt="Asian beef and noodle salad">
        </div>

      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

      <h2>Bootstrap Carousel Slideshow</h2>

    </div>

    <div class="story3">

      <h2>Course booklets on E2Learn</h2>

      <ul>
        <li><a href="http://e2learn.school.nz/pluginfile.php/22162/mod_resource/content/0/2016%20-%20DITCS101.pdf">DITCS101 2016</a>
        </li>

        <li><a href="http://e2learn.school.nz/pluginfile.php/22163/mod_resource/content/0/2016%20-%20DITCS201.pdf">DITCS201 2016</a>
        </li>

        <li><a href="http://e2learn.school.nz/pluginfile.php/22164/mod_resource/content/0/2016%20-%20DITCS301.pdf">DITCS301 2016</a>
        </li>

      </ul>

    </div>

    <div id="footer">
      <h4>Website logo by Kyle Josef, used under <a href="http://creativecommons.org/licenses/by/2.0/">CC BY</a> /Forward slash,less than sign and shield outline resized. Shield outline colour                changed to yellow.
  			  </h4>

    </div>

  </div>

</body>

</html>

最佳答案

我正在使用 Bootstrap 中的标准旋转木马，但您应该能够像我一样解决这个问题:我已经通过在我的旋转木马类上放置高 z-index 来解决这个问题。

z-index: 1000;

关于javascript - Bootstrap Carousel 幻灯片会扰乱网站的元素和内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36379517/

24 4 0
文章推荐： javascript - 使用 jsPdf 从 div 创建 pdf
文章推荐： javascript - 将utf8内容 append 到html中
文章推荐： javascript - 从数据库检索坐标并转换为 OSM
文章推荐： css - 使用 CSS，当广告在源代码中最后出现时，如何将广告推送到语义结构化的 HTML5 页面上？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com