带有图标的全屏导航叠加

Question

我是一个初学者HTML/CSS编码员，学习如何编码。我需要一些帮助来创建全屏导航。这是设计文件：菜单设计

W3Schools给出了制作全屏覆盖的方法的想法，但我仍然有点困惑。

有人可以告诉我如何处理这个问题。图像 (2( 中的白框是图标。我有点纠结于图标应该如何放置以及菜单如何在整个屏幕上显示。

提前感谢！

Answer 1

我建议你通过玩游戏来查看弹性框 弹性青蛙 您可以将中间部分的链接包装在div 中，并使用 flex row 将其展开，然后对齐内容在每个元素之间添加空格。

看看这个 杰斯菲德尔。

<div class="links">
<a href="">Link 1</a>
<a href="">Link 2</a>
<section>
<a href="">Link 3</a>
<a href="">Link 4</a>
<a href="">Link 5</a>
<a href="">Link 6</a>
</section>
</div>
section {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}