如何使用HTML/CSS（网格和Flex）构建此主页？

我是新来的，但我感觉非常迟钝

谁能描述一下我是如何用HTML/CSS构建这个首页的？大多数人需要帮助了解箱子的结构以及它们的组织方式

提前谢谢

---

非常简单。您需要使用网格系统或flexbox

我画了一张带有网格容器的图片。只需研究网格几分钟，拿出一些纸，看看如何有效地组织网格

---

从问题陈述中推断，您需要为给定图像中的行和列设置html/css布局，因此我尝试实现一种可能有助于实现更广泛用途的布局。您也可以参考代码笔链接：

.container{
字体大小：24px；
字体系列：arial，无衬线，helvetica；
文本对齐：居中；
}
最上面的{
显示：网格；
网格模板列：50%50%；
}
.topmost>.left{
网格行：1/2跨；
背景色：天蓝色；
高度：150像素；
}
.topmost>。右上方{
背景颜色：橙色；
高度：75px；
}
.topmost>。右下{
背景颜色：橙色；
高度：75px；
}
导航>ul{
显示器：flex；
对正内容：空间均匀；
对齐项目：居中；
列表样式类型：无；
背景色：#eeeeee；
保证金：0；
高度：50px；
}
.低于导航{
显示：网格；
网格模板行：150px 150px；
}
.位于导航>上方下方{
背景色：#a4a4a4；
颜色：#ffffff；
}
.nav>下方.bottom{
背景颜色：黄花；
}
.卡片包装{
显示：网格；
网格模板列：自动；
网格模板行：100px 100px；
}
.卡片：第n个孩子（偶数）{
背景色：#中交；
}
.卡片：第n个孩子（单数）{
背景色：天蓝色；
}
.最底层{
高度：50px；
背景色：#A6；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.bottomest>a:链接，
.最底层>a{
文字装饰：无；
颜色：#ffffff；
}

我们掩护你了
了解更多
现在加入

家
关于
服务
接触

你的个人财务安全网在线
关于我们
01
02
03
04
05
06

两者都可以。甚至是两者的混合。很抱歉，堆栈溢出不是代码编写服务。我们总是很乐意帮助和支持新的程序员，但你需要先帮助自己。你应该试着自己写代码。我已经试着实现一些可能服务于你更广泛目的的东西，请检查答案@用户14300518