javascript - 带图标的全屏导航覆盖

标签 javascript html css

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 5 年前

我是初学者 HTML/CSS Coder,正在学习如何编码。我需要一些帮助来创建全屏导航。这是设计文件:Menu Design

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

谁能告诉我如何处理这个问题。图(2)中的白框是图标。我对图标应该如何放置以及菜单如何横跨整个屏幕有些困惑。

提前致谢!

最佳答案

我建议您通过玩游戏来检查 flex box flex froggy 您可以将中间部分链接包裹在一个 div 中,并使用 flex row 将其展开,然后使用 justify-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;
}

关于javascript - 带图标的全屏导航覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45518370/

上一篇:css - Wordpress 安装缺少样式/css

下一篇:javascript - 我无法更改段落的 'style.left' 属性

相关文章:

javascript - 在angularjs中,如何根据范围内的数据确定div的位置

javascript - 查找最后一次匹配出现的索引

javascript - 来自 iframe 的 Android WebView postMessage 和 Assets 中的页面

javascript - 如何制作像 amazon.com 上那样的下拉菜单?

css - 具有动态剩余高度和滚动条的 Div

html - 插入图像并使用窗口调整大小

css - 控制 CSS 立方体旋转(变换)并从 3d 矩阵中提取值

jquery - 在选中的复选框上,使用 css 和/或 jQuery 将父 DIV 包装为边框

javascript - jquery/javascript 手动换行文本

javascript - 背景 : none - how to enable with jQuery?