NEWBALERT導航欄問題，下面的部分覆寫了導航欄。還需要幫助學習表格部分的限制 -有解無憂

大家好！我在實作我的第一個bootstrap導航條時遇到了麻煩。我已經讓它成功地作業了，但它下面的部分卻與導航條重疊（只有當我使用z-index為-1時，我才能看到導航條，但該部分的按鈕卻無法作業）。我曾試圖通過css來改變高度/寬度，但我只能將該部分變小。

這是我遇到的問題。https://imgur.com/a/3CwLnK3

第一個問題：你可以看到英雄部分是如何進入下一個區域的。另外，我如何限制英雄部分左右的padding/margin的邊距？我試圖在css中調整，但它不允許我這樣做。

第二個問題：你可以看到服務部分的圖片沒有調整自己的大小以保持在方框內（星星）

。

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

    <body> 
<!--Bootstrap代碼的開始->>
    <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被bootstrap js用來監聽點擊并自動打開/關閉。資料目標必須是matchet collapse target-->/span>
            <span class="navbar-toggler-icon"/span>> </span>>
        </button> 
        < div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">/span>
                <li class="nav-item">/span>
                    <a href="#" class="nav-link"/span>> Users</a>
                </li>/span>
                <li class="nav-item"> 
                    <a href="#" class="nav-link"/span>> 產品</a> 
                </li>/span>
            </ul>/span>
        </div>/span>
    </nav> 
    <script src="https://code.jquery.com/jquery-3.2.1. slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"。
        crossorigin="anonymous"></script>/span>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1. 12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">/span></script>/span>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0. 0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
        crossorigin="anonymous"></script>/span>
    <!-結束Bootstrap代碼->/span>

    <!--開始英雄部分-->
    <main> 
    <section id="hero"> 
        <div class=" hero container">
            <div class="hero-text">/span>
               <h1><span> 歡迎</span><br>/span> 
                <span>致J.P. A</span><br>
                <h1><span> 投資</span>/span></h1>
                < a href="#"/span> type="button" class="cta"> DAO組合</a> 
        </div>/span>
        <div class="hero-text2"> 
               <h1><span> 加入</span><br>/span> 
                <span>我們的< /span><br>
                <h1><span> Vision</span></h1>
                < a href="#"/span> type="button" class="cta"> DAO WhitePapers</a> 
        </div>/span> 
        </main>       
    </section>/span>
    <!--結束英雄部分--> 
    <!--服務部分-->
    <section id="services"> 
        <! --<div class="service container"></div>-->
         <div class="service-top"> 
             <h1 class="section-title">/span>< 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。在這一點上，我們可以看到，在我們的作業中，有很多人都在努力作業。在這里，我想說的是，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是。</p>
        </div>/span>
        <div class="service-bottom"> 
            <div class="service-item"/span>>
                <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. </p></div>>
        </div>/span>
            </div>/span>
            <div class="service-item"> 
                <div class="icon"> <img src="img/nebulas. jpg">。
                    <h2>MetaVerse Professionals</h2> 
                        <p>/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>/span>
        </div>/span>
            </div>/span>
            <div class="service-item"> 
                <div class="icon"> <img src="img/nebulas. jpg">。
                    <h2>MetaVerse Professionals</h2> 
                        <p>/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>/span>
        </div>/span>
            </div>/span>
            <div class="service-item"> 
                <div class="icon"> <img src="img/nebulas. jpg">。
                    <h2>MetaVerse Professionals</h2> 
                        <p>/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>/span>
            </div>/span>
            </div>/span>
                </div>/span>

    </section>/span>
</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;
    字體大小：21px。
    行高：28px。
  }
  
  a {
    文字裝飾：無。
  }
  html{
    行高: 1.15;
    文字大小調整：100%。
  }
  body {
    背景：Whitesmoke;
    margin: 0;  
    display: block;
    margin: 8px;
  }
  
nav {
  display: block;
}
  .container {
    width: min(80%, 1200px);
    margin: auto;
    min-height: 102vh;
    文字對齊：居中。
    位置：相對。
    top: -49px;
    高度：76%。
  }
  #mainl{
    寬度：200px。
    高度：300px。
  }
  
  .英雄{
    背景：線性梯度（95.78度，rgb（69，70，110）28.23%，rgb（21，22，74）52.12%，rgb（61，21，66）100%）。
    z-index: 1;
    邊界。2px solid #800000;
    顯示：網格。
    高度：50px。
    寬度：50%。
  }
  
  .hero-text {
    顏色。#800000;
    display: inline-block;
    line-height: 1;
    margin: 5em auto;
    z-index: 1;
  }
  .hero-text2 {
    color: #800000;
    位置：相對。
    top: 5px;
    z-index: 1;
  }
  span {
    display: inline-block;
    margin-right: auto;
  
    position: relative;
    字體大小: clamp(1.5rem, 5vw   10px, 3rem);
    animation: reveal_anim 1s forwards;
  }
  #hero span::before {
    內容。"";
    position: absolute;
    display: block;
    寬度：100%。
    height: 100%;
    z-index: -1;
  }
  
  a {
    文字裝飾：無。
  }
  
  .cta {
    display: inline-block;
    margin-right: auto;
    margin-top: 1em;
    padding: 0.2em 0.5em;
    字體大小: clamp(1rem, 5vw, 2rem);
    邊界。2px solid blue;
    影片: reveal_anim 1s forwards;
    animation-delay: 500ms。
    不透明度：0。
  
  }
/* 結束英雄部分 */
/* Servicesss部分 */
#services{
    flex-direction: column;
    text-align: center;
    字體大小: 15px;
    最大寬度：1500px。
    margin: 0 auto;
    padding-top: 100px 0;
    border-top: 5px;
    margin-top: 5px;
    /*此柔性設計覆寫了容器的樣式*/。
}   
#services .section-title{
    字體大小: 4rem;
    font-weight: 300;
    /*輕量級*/
    顏色。#6f2a70;
    margin-bottom: 1px;
    text-transform: uppercase;
    字母間距: .2rem;
    text-align: center;
}
#services .section-title span{
    color:#800000;
    字體大小: 3rem;
}
#services .section-title{
  顏色：黑色。
  字體大小: 3rem;
}
#services .service-top p {
    字體大小：1.4rem;
    margin-top: 5px;
    行高: 2.5rem;
    font-weight: 300px;
    字母間距: .05rem;
}
#services .service-bottom {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
}
#services .service-item {
    flex-base: 80%;
    display: fleq;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    background-image: url(./img/stars.jpg);
    背景尺寸：封面。
    margin: 10px 5%;
}
#services .service-item::after{
  內容:''。
  position:absolute;
  left: 0;
  top: 0;
  高度：100%。
  寬度：100%。
  背景色：黑色。
  opacity: .1;
  z-index: -1;
}
.icon img{
  位置：相對。
  左邊：425px。
}
#services .service-item p {
    color: #800000;
    字體大小: 20px;
}
#services .service-item h2 {
  顏色：白色。
  位置：相對。
  字體大小：30px。
  top: -60px;
}
#services .service .container {
    margin: 10px;
}
/*服務部分的結束 */
/*關鍵幀*/
@keyframes reveal_anim{
    0% {
        transform: translateX(50%);
    }
    50% {
        不透明度：0.5。
    }
    100% {
        transform: translateX(0%);
        不透明度：1。
    }

uj5u.com熱心網友回復：

代碼很好，但可以考慮改變以下樣式

洗掉left:425px的.icon img，這將解決星星影像的對齊問題

。

洗掉top:-49px的.container，這將解決選單重疊的問題

。

洗掉height: 50px的.hero

。

以下是更新后的代碼

。

 @import url('https://fonts.googleapis.com/css2?family=IBM Plex Serif:wght@200& display=swap'/span>) 。
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    字體大小: 21px;
    line-height: 28px;
  }
  
  a {
    text-decoration: none;
  }
  html{
    line-height: 1.15;
    文字大小調整。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. 78度, 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;
    /*高度: 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;
    字體大小: 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;
    字體大小。clamp（1rem, 5vw, 2rem）。
    border: 2px solid blue;
    animation: reveal_anim 1sforwards;
    animation-delay: 500ms;
    opacity: 0;
  
  }
/* End Hero Section */
/* Servicesss部分 */
#services{
    flex-direction: column;
    text-align: center;
    字體大小: 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;
    /*輕量級*/
    color: #6f2a70;
    margin-bottom: 1px;
    text-transform: 大寫字母。
    letter-spacing: .2rem;
    text-align: center;
}
#services .section-title span{
    color: #800000;
    字體大小。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（https://www.nasa.gov/sites/default/files/thumbnails/image/archives_m8_0.jpg）。
    background-size: cover;
    margin: 10px 5%。
}
#services .service-item::fter{
  content:''/span>。
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: 黑色。
  opacity: .1;
  z-index: -1;
}
.icon img{
  position: relative;
  /*left: 425px;*/
}
#services .service-item p {
    color: #800000;
    字體大小: 20px;
}
#services .service-item h2{
  color: white;
  position: relative;
  字體大小: 30px;
  top: -60px;
}
#services .service .container{
    margin: 10px;
}
/* Servicesss部分的結束 */
/*關鍵幀*/
@keyframes reveal_anim{
    0% {
        transform: translateX（50%）。
    }
    50% {
        opacity:0.5。
    }
    100% {
        transform: translateX（0%）。
        opacity: 1;
    }
}

.icon img {max-height: 200px;}

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

    <body> 
<!--Bootstrap代碼的開始->>
    <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被bootstrap js用來監聽點擊并自動打開/關閉。資料目標必須是matchet collapse target-->/span>
            <span class="navbar-toggler-icon"/span>> </span>>
        </button> 
        < div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">/span>
                <li class="nav-item">/span>
                    <a href="#" class="nav-link"/span>> Users</a>
                </li>/span>
                <li class="nav-item"> 
                    <a href="#" class="nav-link"/span>> 產品</a> 
                </li>/span>
            </ul>/span>
        </div>/span>
    </nav> 
    <script src="https://code.jquery.com/jquery-3.2.1. slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"。
        crossorigin="anonymous"></script>/span>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1. 12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">/span></script>/span>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0. 0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
        crossorigin="anonymous"></script>/span>
    <!-結束Bootstrap代碼->/span>

    <!--開始英雄部分-->
    <main> 
    <section id="hero"> 
        <div class=" hero container">
            <div class="hero-text">/span>
               <h1><span> 歡迎</span><br/>/span> 
                <span>致J.P. A</span><br/>
                <h1><span> 投資</span>/span></h1>
                < a href="#"/span> type="button" class="cta"> DAO組合</a> 
        </div>/span>
        <div class="hero-text2"> 
               <h1><span> 加入</span><br/>/span> 
                <span>我們的< /span><br/>
                <h1><span> Vision</span></h1>
                < a href="#"/span> type="button" class="cta"> DAO WhitePapers</a> 
        </div>/span> 
        </main>       
    </section>/span>
    <!--結束英雄部分--> 
    <!--服務部分-->
    <section id="services"> 
        <! --<div class="service container"></div>-->
         <div class="service-top"> 
             <h1 class="section-title">/span>< 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。在這一點上，我們可以看到，在我們的作業中，有很多人都在努力作業。在這里，我想說的是，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是，在這個世界上，我們要做的是。</p>
        </div>/span>
        <div class="service-bottom"> 
            <div class="service-item"/span>>
                <div class="icon"> <img src="https: //www. nasa.gov/sites/default/files/thumbnails/image/archives_helix.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. </p></div>>
        </div>/span>
            </div>/span>
            <div class="service-item"> 
                <div class="icon"/span>> <img src="https: //www. nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">。
                    <h2>MetaVerse Professionals</h2> 
                        <p>/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>/span>
        </div>/span>
            </div>/span>
            <div class="service-item"> 
                <div class="icon"/span>> <img src="https: //www. nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">。
                    <h2>MetaVerse Professionals</h2> 
                        <p>/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>/span>
        </div>/span>
            </div>/span>
            <div class="service-item"> 
                <div class="icon"/span>> <img src="https: //www. nasa.gov/sites/default/files/thumbnails/image/archives_helix.jpg">。
                    <h2>MetaVerse Professionals</h2> 
                        <p>/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>/span>
            </div>/span>
            </div>/span>
                </div>/span>

    </section>/span>
    
</body> 
</html>/span>

注意：由于某些原因，該片段中的資源無法正常加載。你可以看到這個pen作為參考

。

uj5u.com熱心網友回復：

在你的代碼中.container有頂部。-49 px的注釋就可以了，然后.hero z-index:1的注釋就可以了。你的設計很簡單，但用html和css編碼，你就變得很復雜了。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/333749.html

標籤：

上一篇：如何制作錨定標簽的保存檔案？

下一篇：為什么在這個程式中使用指標而不是普通的變數？