如何使用 HTML/CSS（Grid 和 Flex）构建这个主页？答案

【问题标题】：How to build this homepage with HTML/CSS (Grid and Flex)?如何使用 HTML/CSS（Grid 和 Flex）构建这个主页？
【发布时间】：2021-01-05 10:15:52
【问题描述】：

我是新手，但我感觉非常迟钝。

谁能描述一下我是如何用 HTML / CSS 构建这个首页的？主要需要有关盒子结构及其组织方式的帮助。

提前致谢！

Page structure to build

【问题讨论】：

w3schools.com/html/default.asp w3schools.com/css/default.asp
两者都可以。甚至两种混合。抱歉，Stack Overflow 不是代码编写服务。我们总是乐于帮助和支持新的编码员，但您需要先帮助自己。您应该尝试自己编写代码。
我已经尝试实现一些可以服务于您更广泛目的的东西，请检查答案。 @user14300518

标签： html css flexbox css-grid

【解决方案1】：

从问题陈述中推断，您需要对给定图像中的行和列进行 html/css 布局，因此我尝试实现可能有助于实现更广泛目的的布局。也可以参考codepen链接：https://codepen.io/Gritika190694/pen/vYGVNPM

.container{
  font-size: 24px;
  font-family: arial,sans-serif,helvetica;
  text-align: center;
}
.topmost{
  display: grid;
  grid-template-columns: 50% 50%;
}
.topmost > .left{
  grid-row: 1 / span 2;
  background-color: skyblue;
  height: 150px;
}
.topmost > .right-top{
  background-color: orangered;
  height: 75px;
}
.topmost > .right-bottom{
  background-color: orange;
  height: 75px;
}
nav > ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style-type: none;
  background-color: #eeeeee;
  margin: 0;
  height: 50px;
}
.below-nav{
  display: grid;
  grid-template-rows: 150px 150px;
}
.below-nav > .top {
  background-color: #a4a4a4;
  color: #ffffff;
}
.below-nav > .bottom{
  background-color: goldenrod;
}
.cards-wrapper{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 100px 100px;
}
.card:nth-child(even){
  background-color: #cccccc;
}
.card:nth-child(odd){
  background-color: skyblue;
}
.bottommost{
  height: 50px;
  background-color: #a6a6a6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottommost > a:link,
.bottommost > a{
  text-decoration: none;
  color: #ffffff;
}

<html>
  <body>
    <div class="container">
      <div class="topmost" id="topmost">
        <div class="left">We got you covered</div>
        <div class="right-top">Learn More</div>
        <div class="right-bottom">
          Join now
        </div>
      </div>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
      </nav>
      <div class="below-nav">
        <div class="top">Your Personal Finnancial safety net online</div>
         <div class="bottom">About Us</div>
      </div>
      <div class="cards-wrapper">
        <div class="card">01</div>
        <div class="card">02</div>
        <div class="card">03</div>
        <div class="card">04</div>
        <div class="card">05</div>
        <div class="card">06</div>
      </div>
      <div class="bottommost"><a href="#topmost">Scroll To Top</a></div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

非常简单。您需要使用网格系统或弹性盒。

我用引出的网格容器绘制了图像。只需花几分钟研究一下网格，拿出一些纸，看看如何有效地组织网格。

【讨论】：