欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

從CSS和HTML中刪除網格布局中的導航項目

CSS
林國瑞1年前8瀏覽0評論

在尋找和測試了很多布局后，我選擇了一個非常好的布局，但我需要刪除導航項目。我試過了，但是不起作用。

這是一個沒有動過的密碼筆 https://codepen.io/familias/pen/WNYQeqQ

在這個代碼筆中，你可以看到標題，導航，主要，旁邊和頁腳。導航是紅色的，這是我需要讓它消失的。刪除導航項目后，主項目會變得更大

以下是HTML代碼:

<body>
    <div class="container">
    <header>
      this is the header
    </header>
    <nav>
      this red one must die in the CSS code and HTML
    </nav>
    <main>
      this is the main
    </main>
    <aside>
      this is the aside
    </aside>
    <footer>
      this is the footer
    </footer>
    </div>
    </body>

下面是CSS代碼:

body {
    margin: 0;
    padding: 0;
    }
    .container {
    display: grid;
    grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    height: 100vh;
    }
    header {
    grid-area: header;
    background: #baffc9;
    height: 100px;
    }
    nav {
    grid-area: nav;
    margin-left: 0.5rem;
    background: red;
    }
    main {
    grid-area: content;
    }
    aside {
    grid-area: side;
    margin-right: 0.5rem;
    background: #ffdfba;
    }
    footer {
    grid-area: footer;
    background: #bae1ff;
    height: 100px;
    }
    @media (max-width: 768px) {
    .container {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "side"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Header */
      minmax(75px, auto) /* Nav */
      1fr /* Content */
      minmax(75px, auto) /* Sidebar */
      auto; /* Footer */
      }
      nav,
      aside {
     margin: 0;
     }
     }

我嘗試了很多方法，但我不知道如何在網格中編碼，我只是來自舊的CSS學校。但是我正在學習

我需要以一種安全的方式從CSS代碼和HTML代碼中刪除這個導航項，而不損壞CSS代碼

您可以刪除& ltnav & gt元素和CSS中的nav元素。我還會改變主網格區自動。

這是熟悉css網格屬性的一個很好的參考。

body {
    margin: 0;
    padding: 0;
}
.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "content content side"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    height: 100vh;
}
header {
    grid-area: header;
    background: #baffc9;
    height: 100px;
}
main {
    grid-area: auto;
}
aside {
    grid-area: side;
    margin-right: 0.5rem;
    background: #ffdfba;
}
footer {
    grid-area: footer;
    background: #bae1ff;
    height: 100px;
}
@media (max-width: 768px) {
    .container {
        grid-template-areas:
            "header"
            "content"
            "side"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows:
            auto /* Header */
            1fr /* Content */
            minmax(75px, auto) /* Sidebar */
            auto; /* Footer */
    }
    aside {
        margin: 0;
    }
}

<body>
        <div class="container">
            <header>
                this is the header
            </header>
            <main>
                this is the main
            </main>
            <aside>
                this is the aside
            </aside>
            <footer>
                this is the footer
            </footer>
        </div>
    </body>