html-newb警报导航条问题，下面的部分将介绍导航条。还需要帮助学习如何窗体节限制-堆栈溢出

顺晟科技

2022-10-19 12:13:46

165

goodevening all。我在实现我的第一个引导导航条时遇到了困难。我已经让它成功地工作，但我的部分，即它的权利下是重叠的navbar（我只能看到navbar如果我使用的Z-索引为-1，但然后按钮在该部分不工作）。我曾尝试通过css更改heigh/width,但受限于我能使该节变得多小。

这就是我遇到的问题：https://imgur.com/a/3CWLNK3

第一个问题：你可以看到英雄部分如何进入下一个区域。此外，我如何限制空白/空白在英雄部分的左边和右边？我试图在css中进行调整，但它不允许。

第二个问题：您可以看到services部分中的img没有调整自身大小以保持在框（星）内

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>FullSite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
<!--Start of Bootstrap code-->
    <nav class="navbar navbar-expand-sm navbar-dark bg-info">
        <a href="#" class="navbar-brand">Astronomics</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <!--Data-toggle is used by bootstrap js to listen to clicks and open/close automatically. the data target has to matchet collapse target-->
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Users</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Products</a>
                </li>
            </ul>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <!--End of Bootstrap code-->

    <!-- Start Hero Section -->
    <main>
    <section id="hero">
        <div class="hero container">
            <div class="hero-text">
               <h1><span>Welcome</span><br> 
                <span>To J.P.A</span><br>
                <h1><span>Investments</span></h1>
                <a href="#" type="button" class="cta">DAO Portfolio</a>
        </div>
        <div class="hero-text2">
               <h1><span>Join</span><br> 
                <span>Our</span><br>
                <h1><span>Vision</span></h1>
                <a href="#" type="button" class="cta">DAO WhitePapers</a>
        </div> 
        </main>      
    </section>
    <!-- End Hero Section --> 
    <!--SERVICE SECTION-->
    <section id="services">
        <!--<div class="service container"></div>-->
         <div class="service-top">
             <h1 class="section-title"><span>$Astro</span>nomical Future</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="service-bottom">
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
            </div>
            <div class="service-item">
                <div class="icon"><img src="img/nebulas.jpg">
                    <h2>MetaVerse Professionals</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            </div>
                </div>

    </section>
</body>
</html>```


    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@200&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-size: 21px;
    line-height: 28px;
  }
  
  a {
    text-decoration: none;
  }
  html{
    line-height: 1.15;
    text-size-adjust: 100%;
  }
  body {
    background: whitesmoke;
    margin: 0;  
    display: block;
    margin: 8px;
  }
  
nav {
  display: block;
}
  .container {
    width: min(80%, 1200px);
    margin: auto;
    min-height: 102vh;
    text-align: center;
    position: relative;
    top: -49px;
    height: 76%;
  }
  #mainl{
    width: 200px;
    height: 300px;
  }
  
  .hero {
    background: linear-gradient(95.78deg, rgb(69, 70, 110) 28.23%, rgb(21, 22, 74) 52.12%, rgb(61, 21, 66) 100%);
    z-index: 1;
    border: 2px solid #800000;
    display: grid;
    height: 50px; 
    width: 50%
  }
  
  .hero-text {
    color: #800000;
    display: inline-block;
    line-height: 1;
    margin: 5em auto;
    z-index: 1;
  }
  .hero-text2 {
    color: #800000;
    position: relative;
    top: 5px;
    z-index: 1;
  }
  span {
    display: inline-block;
    margin-right: auto;
  
    position: relative;
    font-size: clamp(1.5rem, 5vw + 10px, 3rem);
    animation: reveal_anim 1s forwards;
  }
  #hero span::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  a {
    text-decoration: none;
  }
  
  .cta {
    display: inline-block;
    margin-right: auto;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    font-size: clamp(1rem, 5vw, 2rem);
    border: 2px solid blue;
    animation: reveal_anim 1s forwards;
    animation-delay: 500ms;
    opacity: 0;
  
  }
/* End Hero Section */
/* Servicesss Section */
#services{
    flex-direction: column;
    text-align: center;
    font-size: 15px;
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 100px 0;
    border-top: 5px;
    margin-top: 5px;
    /*this flex overrised the container style*/
}   
#services .section-title{
    font-size: 4rem;
    font-weight: 300;
    /*light weight*/
    color: #6f2a70;
    margin-bottom: 1px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}
#services .section-title span{
    color:#800000;
    font-size: 3rem;
}
#services .section-title{
  color: black;
  font-size: 3rem;
}
#services .service-top p {
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 300px;
    letter-spacing: .05rem;
}
#services .service-bottom {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
}
#services .service-item {
    flex-basis: 80%;
    display: fleq;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    background-image: url(./img/stars.jpg);
    background-size: cover;
    margin: 10px 5%;
}
#services .service-item::after{
  content:'';
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: .1;
  z-index: -1;
}
.icon img{
  position:relative;
  left: 425px;
}
#services .service-item p {
    color: #800000;
    font-size: 20px;
}
#services .service-item h2 {
  color: white;
  position: relative;
  font-size: 30px;
  top: -60px;
}
#services .service .container {
    margin: 10px;
}
/* End of Servicesss Section */
/*keyframes*/
@keyframes reveal_anim{
    0% {
        transform: translateX(50%);
    }
    50% {
        opacity:0.5;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

顺晟科技：

在您的代码中。容器有top:-49px只需注释它，然后。英雄Z-索引：1注释它。你的重叠问题就解决了。你有简单的设计，但通过编码与html和css你是复杂的。有一个简单的方法来接近它。如果您需要我的帮助，请与我联系。

代码很好，但请考虑更改以下样式

删除此将修复星形图像对齐问题
删除此将修复菜单重叠问题
删除

以下是更新后的代码

注意:由于某些原因，此代码段中的资源无法正确加载。您可以查看以下pen以供参考

上一篇：JavaScript:使用HTML文下一篇：HTML-如何悬停包含特定数据的<t

网站建设

Html

html-newb警报导航条问题，下面的部分将介绍导航条。还需要帮助学习如何窗体节限制-堆栈溢出