Question

我决定在我的网站上实现bootstrap轮播，我从W3Schools website获得了代码我按照说明如何在我的网站上应用幻灯片，幻灯片显示效果很好，但它弄乱了我网站的元素。

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

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

我试图更多地研究这个问题，但我找不到有类似问题的人。

以下是我的网站没有引导轮播幻灯片代码的图片：

我真的希望我的网站能够进行bootstrap carousel幻灯片放映，因为它增加了交互性，但同时我也不希望我的内容和元素发生巨大变化。

非常感谢任何帮助以帮助解决此问题。

这是CSS和HTML（如果你想看看bootstrap carousel幻灯片对我网站上的元素和内容的影响，请运行下面的代码片段）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我使用Bootsrap的标准轮播，但您应该能够像我一样解决这个问题：我通过在我的轮播类上放置一个高z-index来解决这个问题。

z-index: 1000;

Bootstrap Carousel幻灯片模糊了网站的元素和内容

1 个答案: