HTML & CSS 代码在我的实际项目中没有显示相同的 output，我已经在另一个单独的 html 文件中修复了

Question

我想像这样制作 Html 和 CSS 文件的 output (ss#1)； 我使用单独的 HTML 和 CSS 文件创建了它，但是当我将它放在我实际的 Html 和 CSS 文件中时，结果是这样的 (ss#2)。 我怎样才能解决这个问题？

这是 ss#1 的源代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Swiper demo</title>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
        />
        <!-- Link Swiper's CSS -->
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
        />

        <!-- Demo styles -->
        <style>
          html,
          body {
            position: relative;
            height: 100%;
          }

          body {
            margin: 0;
            padding: 0;
          }

          html,
          body {
            position: relative;
            height: 100%;
          }

          body {
            display: flex;
            justify-content:center;
            align-items:center;
          }

          .swiper {
            width: 200px;
            padding-top: 200px;
            padding-bottom: 0;
          }

          .swiper-slide {
            display: flex;
            align-items:center;
            justify-content: center;
            border-radius: 15px;
          }
          .swiper-slide img{
            display:flex;
            width: 100%;
          }
        </style>
      </head>

      <body>
        <!-- Swiper -->

        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img4.JPG" />
            </div>
            <div class="swiper-slide">
                <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img1.JPG" />
            </div>
            <div class="swiper-slide">
                <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img11.jpeg" />
            </div>
            <div class="swiper-slide">
                <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img7.jpeg" />
            </div> 
            <div class="swiper-slide">
                <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img10.png" />
            </div> 
          </div>
        </div>

        <!-- Swiper JS -->
        <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
          var swiper = new Swiper(".mySwiper", {
            effect: "cards",
            grabCursor: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
              delay: 2500,
              disableOnInteraction: false,
            },
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          });
        </script>
      </body>
    </html>

<!-- end snippet -->

这是 ss#2 的源代码

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
        />
        <title>Instant Resume Builder</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
        <script src="https://kit.fontawesome.com/f5ba79b0f3.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
        <link rel="stylesheet" href="style.css">

        <style>
            section{
    position: absolute;
    width: 100px;
    min-height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0.50%;
    padding: 0.50%;
}

.swiper {
  width: 100%;
  padding-top: 120px;
  padding-bottom: 0;
}

.swiper-slide {
  display: flex;
  align-items:center;
  justify-content: center;
  border-radius: 15px;
  width: 100%;
  height: 100%;
}
.swiper-slide img{
  display:flex;
  width: 100%;
}
        </style>
    </head>

    <body>
        <div class="main">
            <div class="logo">
                <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/logo.png">
            </div>

            <div class="section">
            
            <!-- Swiper -->

            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img4.JPG" />
                </div>
                <div class="swiper-slide">
                    <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img1.JPG" />
                </div>
                <div class="swiper-slide">
                    <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img11.jpeg" />
                </div>
                <div class="swiper-slide">
                    <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img7.jpeg" />
                </div> 
                <div class="swiper-slide">
                    <img src="/Users/megatron/Documents/Project/ResumeBuilder/images/img10.png" />
                </div> 
                </div>
            </div>
            </div>
            
            <!-- Swiper JS -->
            <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

            <!-- Initialize Swiper -->
            <script>
            var swiper = new Swiper(".mySwiper", {
                effect: "cards",
                grabCursor: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: {
                delay: 2500,
                disableOnInteraction: false,
                },
                pagination: {
                el: ".swiper-pagination",
                clickable: true,
                },
            });
            </script>
        </div>
    </body>
</html>

Answer 1

如果您使用的是 VS Code，我想我可以提供帮助。 首先，在粘贴样式代码之前，来到开头没有任何制表符的位置并将其粘贴到那里。 然后选择整个样式代码后，您可以通过按tab / shift + tab键进行调整。

另外，正如我开头所说，如果你使用的是VS code，你可以尝试安装和调整Prettier插件。 （必须在设置中打开保存格式功能）这也可能是一个解决方案。

HTML & CSS 代码在我的实际项目中没有显示相同的 output，我已经在另一个单独的 html 文件中修复了

问题描述

1 个解决方案

解决方案1
0 2022-10-01 23:22:31

HTML & CSS 代码在我的实际项目中没有显示相同的 output，我已经在另一个单独的 html 文件中修复了

问题描述

1 个解决方案

解决方案1 0 2022-10-01 23:22:31

解决方案1
0 2022-10-01 23:22:31