Question

目前我正在创建一个投资组合，并希望在我的网站上添加图片轮播。因为我无法找到任何方法来做到这一点，所以我决定将Bootstrap添加到我的网站。将Bootstrap CDN添加到我的网站标题后，我的一些文本也会改变大小和颜色。

这是什么问题？当我添加w3.css时会发生同样的事情。以下是添加Bootstrap之前和之后的图像：

这是我的网站代码：

<!DOCTYPE html>
<html>

<head>

  <link href="hover.css" rel="stylesheet" media="all">
  <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <title>Portfolio</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .back {
      background-image: url(https://media.giphy.com/media/26hisjGhYBD3dNbfa/giphy.gif);
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      width: 100vw;
      height: 100vh;
      z-index: 1;
    }



    .text {
      display: flex;
      justify-content: center;
      padding-top: 36vh;
      font-size: 9vh;
      z-index: 9999;
      color: #dadada;
      text-shadow: 6px 6px grey;
    }

    .pageone {
      font-family: 'Lato', Arial, sans-serif;
      ;

      letter-spacing: .75vh;
    }

    .scroll {
      display: flex;
      justify-content: center;
      vertical-align: middle;
      padding-top: 27vh;
    }

    .pagetwo {
      height: 100vh;
      font-family: 'Open Sans', Arial, sans-serif;
      background-color: #181818;
    }

    .about {
      display: flex;
      justify-content: center;

      font-size: 75px;
    }

    #about {
      margin-top: 7vh;
      color: white;
      font-family: 'lato', arial, sans-serif;
      text-shadow: 2.4px 2.4px grey;
    }

    html {
      background-color: #181818;
    }

    .abouttext {
      color: white;
      text-align: center;
      margin-left: 5vh;
      margin-right: 5vh;
      margin-top: 5vh;
      font-size: 3vh;
    }

    .seperated {
      margin-top: 5vh;
    }

    .scroll2 {
      display: flex;
      justify-content: center;
      margin-top: 8vh;
    }

    .threeheader {
      color: white;
      text-align: center;
      font-size: 50px;
    }

    .pagethree {
      font-family: 'Open Sans', Arial, sans-serif;
      height: 150vh;
    }

    #portabout {
      font-size: 3vh;
      text-align: center;
      color: white;
    }

    .work {
      display: flex;
      justify-content: center;
      font-size: 20px;
    }


    .css,
    .premiere,
    .ps {
      margin: 5vw;
      max-width: 100%;
      max-height: 20vh;
    }

    figcaption {
      display: flex;
      justify-content: flex-end;
    }

    .embed {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
    }

    .embed iframe,
    .embed object,
    .embed embed {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }

    iframe {
      box-shadow: 4px 4px 1px 1px grey;
    }

    .thanks {
      color: white;
      font-family: 'Open Sans', Arial, sans-serif;
      padding-top: 5vh;
      text-align: center;
      font-size: 2.5vw;
    }

    #subscribe {
      font-size: 1.5vw;
    }

    a {
      color: white;
      text-decoration: none;
      text-shadow: 2.4px 2.4px grey;
    }

    a:hover {
      color: white;
      text-shadow: 2.4px 2.4px blue;
    }

    .scroll3 {
      margin-top: 2vh;
    }

    #portfolioabout {
      margin-top: 7vh;
      color: white;
      font-family: 'lato', arial, sans-serif;
      text-shadow: 2.4px 2.4px grey;
    }

    .portheader {
      display: flex;
      justify-content: center;

      font-size: 5vh;
    }

    .portmore {
      color: white;
      text-align: center;

      font-size: 2.5vh;
    }



  </style>
</head>

<body>
  <div class="pageone">
    <div class="back">
      <div class="text">
        <h1 class="animated fadeInDown front" data-wow-duration="2s" data-wow-delay="5s">1080</h1>
      </div>

      <div class="scroll animated fadeIn">
        <a href="#aboutpage">
        <img src="scrolldown.png" alt="" id="down" class="hvr-float" /></a>
      </div>
    </div>
    <div id="aboutpage"></div>
  </div>
  <div class="pagetwo">

    <div class="aboutme">
      <h1 class="wow fadeInUp about" id="about">About Me</h1>
    </div>
    <div class="abouttext wow fadeIn">
      <p>I run a YouTube channel in which I benchmark the performance of computer hardware. I've been uploading content to YouTube for upwards of one year, and have amassed over 80 thousand views in that time period. While I'm not managing my channel I design
        graphics for others and myself. I design product advertisements, avatars and banners for YouTube, websites, company logos, and more. I am acquainted with a wide variety of softwares such as: Adobe Photoshop, Adobe After Effects, Adobe Premiere
        Pro, Adobe Lightroom and, Unreal Engine 4. I am also assimilating myself with HTML and CSS.<br>
        <div class="workcontainer">
          <div class="work hvr-grow"><img src="ps.png" alt="" class="ps"><img src="premiere.png" alt="" class="premiere"><img src="css.png" alt="" class="css"> </div>
        </div>
        <div class="seperated wow fadeInUp">To see my latest YouTube video scroll down.</div>
      </p>
    </div>
    <div class="scroll2 wow fadeIn">
      <a href="#portfolio">
        <img src="scrolldown.png" alt="" id="down2" class="hvr-float" /></a>

    </div>
    <h1 id="portfoliod"></h1>
  </div>

  <div class="pagethree" id="portfolio">
    <div class='embed'>
      <figure><iframe src='https://www.youtube.com/embed/videoseries?list=UUNETYZQrE6PEAjB0Pax6c3Q' frameborder='0' allowfullscreen></iframe>
        <figcaption>Test</figcaption>
      </figure>
    </div>
    <div class="thanks">
      <h2>Thanks for watching!</h2>
      <p id="subscribe">To subscribe click <a href="#">here.</a><br>Scroll down to see some of my work.</p>
      <div class="scroll3 animated fadeIn">
        <a href="#realportfolio">
    <img src="scrolldown.png" alt="" id="down" class="hvr-float" /></a>
      </div>
    </div>
  </div>
    <div class="pagethree" id="realportfolio">
      <div class="portheader wow fadeInUp">
      <h1 id="portfolioabout">Portfolio</h1>
      </div>
      <div class="portmore wow fadeIn">
        <p>Below are various works of mine all created within the last year.</p>
      </div>


    </div>


  <script src="wow.min.js"></script>
  <script>
    new WOW().init();
  </script>

  <script>
    //Not made by me credit w3schools
    $(document).ready(function() {
      // Add smooth scrolling to all links
      $("a").on('click', function(event) {

        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          // Store hash
          var hash = this.hash;

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function() {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        } // End if
      });
    });
  </script>


</body>

</html>

感谢您的帮助。

将Bootstrap添加到站点后出现文本问题

0 个答案: