Question

我对编程非常陌生-我正在尝试使用HTML和CSS复制此网页布局>>> Desired look <<<到目前为止，我一直在使用CSS网格，我想我理解这个概念，但是我无法在我的网页上实现：

  .wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1.1fr 1.8fr 0.1fr;
  grid-template-areas: "header header" "content content" "footer footer";
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #fff;
}

.wrapper>div {
  padding: 1em;
}

.mainheader {
  grid-area: header;
  width: 70%;
  background-color: #fff;
}

.content {
  grid-area: content;
  width: 40%;
  font-family: Trebuchet MS;
  background-color: #fff;
  color: #000;
}

.mainfooter {
  grid-area: footer;
  background-color: #854242;
  width: 40%;
  border-radius: 25px;
  padding: 20px;
  width: 800px;
  height: 30px;
  li {
    display: inline;
  }
  #h1,
  h2 {
    color: #854242
  }
  #content {}
  #footer1 {
    background-color: #999999
  }
  #footer2 {
    background-color: #999999
  }

<body>

  <div class="wrapper">
    <div class="mainheader">
      <header>

        <h1>Webbutveckling för mobila enheter</h1>
        <h2>Responsiv webbdesign</h2>

        <img src="images/header.jpg" alt="Header-bild" width="960px" />

        <nav id="mainmenu">
          <ul>
            <li><a href="index.htm" title="Startsidan">Startsidan</a></li>
            <li><a href="#" title="Sida två">Sida 2</a></li>
            <li><a href="#" title="Sida tre">Sida 3</a></li>
            <li><a href="#" title="Sida fyra">Sida 4</a></li>
            <li><a href="http://www.miun.se" title="Mittuniversitetet">Miun</a></li>
          </ul>
        </nav>

        <div id="search">
          <form>
            <input type="text" name="searchstring" id="searchstring">
            <input type="submit" value="Sök" id="searchbutton">
          </form>
        </div>
        <!-- Slut på search -->

      </header>
    </div>

    <div class="content">
      <section>
        <h2>Box 1</h2>
        <p>
          Mauris dapibus consectetur neque commodo eleifend. Pellentesque interdum posuere mollis. Nunc dui libero, feugiat sed consectetur ac, eleifend fermentum nisl. Praesent felis ligula, interdum sit amet tortor in, eleifend vestibulum mi. Duis eu ultricies
          enim. Quisque blandit ligula vel odio adipiscing, et consectetur odio vestibulum. Nam sed lectus vulputate, posuere orci sit amet, eleifend massa. Nullam mi ante, faucibus vitae turpis sed, volutpat auctor orci.
        </p>
        <p>
          Aenean varius, sapien sed pharetra gravida, massa massa sodales mi, eu venenatis quam nunc sit amet ante. Praesent bibendum massa enim, vitae pulvinar odio imperdiet sed. Nam ac lacus ac nulla mollis blandit eu quis lectus. Nullam non tortor vel ipsum
          consectetur lacinia eget non nisi. Aliquam erat volutpat. Pellentesque eget dui bibendum, malesuada quam quis, consequat lacus. Ut tincidunt pharetra laoreet. Nullam sed sem et mauris luctus ullamcorper. Mauris ipsum velit, tincidunt eget quam
          convallis, cursus suscipit ante. Vivamus vitae massa id lorem interdum hendrerit. Duis suscipit elit eu tempor tincidunt. Suspendisse ut metus id magna aliquam posuere. Duis vulputate sit amet ipsum vel egestas. Ut rhoncus elementum augue.
        </p>
        <footer id="footer1">
          <p>
            Denna sektion är från start till vänster, sedan ovanpå.
          </p>
        </footer>
      </section>

      <section>
        <h2>Box 2</h2>
        <p>
          Vestibulum mollis mattis risus, feugiat iaculis massa suscipit vel. Aenean ultricies lorem nec dui pulvinar, quis scelerisque enim egestas. Morbi massa eros, tempus id dictum eget, facilisis lobortis arcu. Nulla ut blandit nunc, ut egestas massa. Duis
          a lorem et lorem commodo dictum nec a libero. Donec porta lectus a accumsan rhoncus. Nunc vitae est id tellus suscipit malesuada. Aenean eu arcu et quam laoreet auctor ac ut sapien. Fusce sed ligula quis felis vehicula tempor sed ut libero.
          Vestibulum hendrerit id libero eget dictum. Nulla augue erat, fringilla eget imperdiet non, sagittis vitae arcu.
        </p>

        <footer id="footer2">
          <p>
            Denna sektion är från start till höger, sedan under.
          </p>

        </footer>

      </section>
    </div>


    <div class="mainfooter">
      <footer>
        <p>Sidfot - Webbutveckling för mobila enheter</p>
      </footer>
    </div>

  </div>

</body>

我在做什么错？我是否应该以其他方式绕过引导程序？ <-请注意，这是一个非常粗糙的草稿->

Answer 1

例如，我将.wrapper显示设置为块，并使用2个内联块做框并添加边距，您只需要调整之前使用过网格属性的其他部分

.wrapper {
  display: block;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1.1fr 1.8fr 0.1fr;
  grid-template-areas: "header header" "content content" "footer footer";
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #fff;
}

.wrapper>div {
  padding: 1em;
}

.mainheader {
  grid-area: header;
  width: 70%;
  background-color: #fff;
}

.content {
  /*grid-area: content;*/
  width: 100%;
  font-family: Trebuchet MS;
  background-color: #fff;
  color: #000;
}
.content section {
width: calc(50% - 10px);/*for margin*/
display: inline-block;
vertical-align: top;
margin: 0px 3px;
}

.mainfooter {
  grid-area: footer;
  background-color: #854242;
  width: 40%;
  border-radius: 25px;
  padding: 20px;
  width: 800px;
  height: 30px;
  li {
    display: inline;
  }
  #h1,
  h2 {
    color: #854242
  }
  #content {}
  #footer1 {
    background-color: #999999
  }
  #footer2 {
    background-color: #999999
  }

<body>

   <div class="wrapper">
    <div class="mainheader">
      <header>

        <h1>Webbutveckling för mobila enheter</h1>
        <h2>Responsiv webbdesign</h2>

        <img src="images/header.jpg" alt="Header-bild" width="960px" />

        <nav id="mainmenu">
          <ul>
            <li><a href="index.htm" title="Startsidan">Startsidan</a></li>
            <li><a href="#" title="Sida två">Sida 2</a></li>
            <li><a href="#" title="Sida tre">Sida 3</a></li>
            <li><a href="#" title="Sida fyra">Sida 4</a></li>
            <li><a href="http://www.miun.se" title="Mittuniversitetet">Miun</a></li>
          </ul>
        </nav>

        <div id="search">
          <form>
            <input type="text" name="searchstring" id="searchstring">
            <input type="submit" value="Sök" id="searchbutton">
          </form>
        </div>
        <!-- Slut på search -->

      </header>
    </div>

    <div class="content">
      <section>
        <h2>Box 1</h2>
        <p>
          Mauris dapibus consectetur neque commodo eleifend. Pellentesque interdum posuere mollis. Nunc dui libero, feugiat sed consectetur ac, eleifend fermentum nisl. Praesent felis ligula, interdum sit amet tortor in, eleifend vestibulum mi. Duis eu ultricies
          enim. Quisque blandit ligula vel odio adipiscing, et consectetur odio vestibulum. Nam sed lectus vulputate, posuere orci sit amet, eleifend massa. Nullam mi ante, faucibus vitae turpis sed, volutpat auctor orci.
        </p>
        <p>
          Aenean varius, sapien sed pharetra gravida, massa massa sodales mi, eu venenatis quam nunc sit amet ante. Praesent bibendum massa enim, vitae pulvinar odio imperdiet sed. Nam ac lacus ac nulla mollis blandit eu quis lectus. Nullam non tortor vel ipsum
          consectetur lacinia eget non nisi. Aliquam erat volutpat. Pellentesque eget dui bibendum, malesuada quam quis, consequat lacus. Ut tincidunt pharetra laoreet. Nullam sed sem et mauris luctus ullamcorper. Mauris ipsum velit, tincidunt eget quam
          convallis, cursus suscipit ante. Vivamus vitae massa id lorem interdum hendrerit. Duis suscipit elit eu tempor tincidunt. Suspendisse ut metus id magna aliquam posuere. Duis vulputate sit amet ipsum vel egestas. Ut rhoncus elementum augue.
        </p>
        <footer id="footer1">
          <p>
            Denna sektion är från start till vänster, sedan ovanpå.
          </p>
        </footer>
      </section>

      <section>
        <h2>Box 2</h2>
        <p>
          Vestibulum mollis mattis risus, feugiat iaculis massa suscipit vel. Aenean ultricies lorem nec dui pulvinar, quis scelerisque enim egestas. Morbi massa eros, tempus id dictum eget, facilisis lobortis arcu. Nulla ut blandit nunc, ut egestas massa. Duis
          a lorem et lorem commodo dictum nec a libero. Donec porta lectus a accumsan rhoncus. Nunc vitae est id tellus suscipit malesuada. Aenean eu arcu et quam laoreet auctor ac ut sapien. Fusce sed ligula quis felis vehicula tempor sed ut libero.
          Vestibulum hendrerit id libero eget dictum. Nulla augue erat, fringilla eget imperdiet non, sagittis vitae arcu.
        </p>

        <footer id="footer2">
          <p>
            Denna sektion är från start till höger, sedan under.
          </p>

        </footer>

      </section>
    </div>


    <div class="mainfooter">
      <footer>
        <p>Sidfot - Webbutveckling för mobila enheter</p>
      </footer>
    </div>

  </div>
</body>

CSS网格布局的严重问题

1 个答案: