在粘性导航栏后面创建了“空间”，我找不到删除它的方法

问题描述 投票：0回答：1

我正在为自己创建一个投资组合网站，我添加的其中一件事是粘性导航栏，但问题是，当我添加它时，它在其后面创建了一个“空间”，并且随着该“空间”的创建它不允许我使用我的旋转木马作为背景。导航栏按其应有的方式工作，但如果我向下浏览页面，“空间”就会留在那里，我找不到解决方法。我看过一些关于与我有类似问题的人的帖子，我尝试了所提出的解决方案，但似乎都不起作用。我正在使用 Html 和 Css，并带有一些引导程序，因为我对编码相当陌生。如果提供的任何解决方案不使用 Javascript，我将不胜感激我试图删除的导航栏后面的空间（淡红色）

我尝试将导航栏位置设置为

top:0
，将轮播更改为
Position:absolute
，更改导航栏的宽度、清晰和浮动属性，但似乎没有任何效果，正如我上面提到的。

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flokki's Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="/Projeto Final/styles.css">
  </head>
<body>


<!-- Nav bar-->

<nav class="navbar navbar-expand-lg">
          <a class="navbar-brand" href="#">
            <img src="..." alt="Logo" width="30" height="30" class="d-inline-block align-text-top img-fluid">
            FlokkiFur </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list-nested"></i>
          </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto text-md-center text-left">
          <li class="nav-item">
              <a class="nav-link" href="#top">HOME</a> 
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#cartoes">PORTFOLIO</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">ABOUT ME</a> 
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a> 
          </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-twitter"></i></a> </li>
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-instagram"></i></a> </li>
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-tiktok"></i></a> </li>
      </ul>
</nav>

<!-- Bg carossel-->

    <div id="fotosCarousel" class="carouselslide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

样式.css：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #8b5656;
}

.navbar {
    --margin: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    position: sticky;
    top: 0;
    width: calc(100vw - 2 * var(--margin));
    z-index: 1000;
    border-radius: 80px;
    margin-left: var(--margin);
    margin-right: var(--margin);
    padding: 12px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.carouselslide{
    width: 100%; 
    height: 700px;
    overflow: hidden;
    position: relative;
    top: 0;
}

.carouselslide img {
    filter: blur(8px);
    filter:brightness(0.3);
}
html css bootstrap-5 navbar
1个回答
0
投票

首先，您应该将 

!important
添加到滑块样式中，然后您应该编写 
top: 0;
（
top: -59px !important;
是 
59px
的大小），而不是 
navbar
。

这是更正后的功能代码：

代码笔

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #8b5656;
}

.navbar {
    --margin: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    position: sticky;
    top: 0;
    width: calc(100vw - 2 * var(--margin));
    z-index: 1000;
    border-radius: 80px;
    margin-left: var(--margin);
    margin-right: var(--margin);
    padding: 12px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.carouselslide{
    width: 100%; 
    height: 700px;
    overflow: hidden;
    position: relative;
    top: -59px !important;
}

.carouselslide img {
    filter: blur(8px);
    filter:brightness(0.3);
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="/Projeto Final/styles.css">
<!-- Nav bar-->

<nav class="navbar navbar-expand-lg">
          <a class="navbar-brand" href="#">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fclipground.com%2Fimages%2Fstackoverflow-logo-9.png&f=1&nofb=1&ipt=0765153ba1b0a57a6befd023995864bfb1337b7daee2a4d8360747a2051096cc&ipo=images" alt="Logo" width="30" height="30" class="d-inline-block align-text-top img-fluid">
            FlokkiFur </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list-nested"></i>
          </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto text-md-center text-left">
          <li class="nav-item">
              <a class="nav-link" href="#top">HOME</a> 
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#cartoes">PORTFOLIO</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">ABOUT ME</a> 
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">CONTACT</a> 
          </li>
      </ul>
      <ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-twitter"></i></a> </li>
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-instagram"></i></a> </li>
          <li class="nav-item"><a class="nav-link" href="..." target="_blank"><i class="bi bi-tiktok"></i></a> </li>
      </ul>
</nav>

<!-- Bg carossel-->

    <div id="fotosCarousel" class="carouselslide carousel-fade" data-bs-ride="carousel" data-bs-pause="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpreview.redd.it%2Fzfohxnf8t3pa1.jpg%3Fwidth%3D1024%26format%3Dpjpg%26auto%3Dwebp%26v%3Denabled%26s%3D0f660e0a56476991ee3b97f2885d8c010fec5b97&f=1&nofb=1&ipt=abc443565a4307bf540effd4e35273c0e8a9c3242503f6956ce59029b3e53501&ipo=images" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://softauthor.com/wp-content/uploads/2021/08/CSS-Background-Image-Full-Screent-With-background-Image-1536x1355.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://wonderfulengineering.com/wp-content/uploads/2014/10/image-wallpaper-15.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.