全屏导航覆盖图标

Question

我是一名初学HTML / CSS编码器，学习如何编码。我需要一些帮助才能创建全屏导航。这是设计文件：Menu Design

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

有人可以告诉我如何处理这个问题。图像（2）中的白框是图标。我对如何放置图标以及菜单如何跨越整个屏幕感到困惑。

提前致谢！

Answer 1

我建议您通过玩游戏flex froggy查看弹性框 您可以将div中的中间部分链接包装起来，然后使用flex行将其展开，然后使用flexy-content在每个元素之间添加空格。

看看这个 jsfiddle

<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;
}