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

Question

I would like to make my output of the Html and CSS file like this (ss#1);我想像这样制作 Html 和 CSS 文件的 output (ss#1)； I've created this using a separate HTML and CSS file, but when I'm putting it on my actual Html and CSS file it turns out to be like this (ss#2).我使用单独的 HTML 和 CSS 文件创建了它，但是当我将它放在我实际的 Html 和 CSS 文件中时，结果是这样的 (ss#2)。 How can I fix this?我怎样才能解决这个问题？

Here is the source code for ss#1这是 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 -->

here is the source code for ss#2这是 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

If you are using VS Code I think I can help.如果您使用的是 VS Code，我想我可以提供帮助。 First of all, before pasting the style code, come to the beginning without any tab space and paste it there.首先，在粘贴样式代码之前，来到开头没有任何制表符的位置并将其粘贴到那里。 Then after selecting the whole style code, you can adjust it by pressing the tab / shift + tab keys.然后选择整个样式代码后，您可以通过按tab / shift + tab键进行调整。

Also, as I said at the beginning, if you are using VS code, you can try to install and adjust the Prettier plugin.另外，正如我开头所说，如果你使用的是VS code，你可以尝试安装和调整Prettier插件。 (Format on save feature must be turned on in settings) This could also be a solution. （必须在设置中打开保存格式功能）这也可能是一个解决方案。

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