请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

Flexbox：响应式导航栏

第一张：图片描述
第二章：max-width：1022px
图片描述
第三张：
图片描述
第四张：按下绿色按钮，菜单隐藏
图片描述
第五张：
图片描述
第六张：按下绿色按钮，菜单隐藏
图片描述

用Flexbox做的布局，发现一个问题，就是第三张截图，随着宽度减少，About Us导航栏没办法覆盖在logo上面，尝试用position：absolute，但就会脱离文档流，没办法撑开父级header高度。尝试了很多方法，就是遇到一堆问题，想请教下老师，第三张截图效果，应该怎么实现？

以上截图是官网截取的，以下是我代码实现的：
图片描述
最多只能到这个宽度，如果继续缩小，就会出现下面这张截图样式：
图片描述
整个导航栏被挤下去了，无法像上面第二张截图，覆盖在logo上
慕后端1189009 2021-10-13 21:32:39
源自：1-1  课程导学
593
收起

正在回答 回答被采纳积分+3

1回答

西门老舅 2021-10-14 07:02:43

你好同学。简单写了一下，不知道是不是你希望的效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        li{

            list-style: none;

        }

        .head{

            display: flex;

            border-bottom:1px black solid;

        }

        .menu{

            display: flex;

            margin-left: auto;

        }

        .sub-menu{

            display: flex;

        }

        @media screen and (max-width: 1022px) {

            .head{

                flex-wrap: wrap;

            }

            .menu{

                width: 100%;

                order: 2;

                justify-content: flex-end;

            }

            .sub-menu{

                margin-left: auto;

            }

        }

        @media screen and (max-width: 768px) {

            .menu{

                display: block;

            }

        }

    </style>

</head>

<body>

    <div class="head">

        <div class="logo">LOGO</div>

        <ul class="menu">

            <li>xxx</li>

            <li>xxx</li>

            <li>xxx</li>

            <li>xxx</li>

            <li>xxx</li>

        </ul>

        <ul class="sub-menu">

            <li>icon</li>

            <li>icon</li>

            <li>icon</li>

        </ul>

    </div>

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复

相似问题

老师，如果要搭建一个后台管理系统，布局有什么技巧？用什么方式布局？大概的思路，就很普遍那种
1506 0 4
不是响应式的数据改变导致了页面的改变
1158 0 7
给导航列表添加背景
854 0 3
导航栏css样式被覆盖
1985 0 5
为什么没有使用toRefs 转为响应式，仍然可以实现响应式？
790 1 3

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
前端内功修炼 5大主流布局系统进阶
  • 参与学习       772    人
  • 提交作业       604    份
  • 解答问题       239    个

前端内功修炼：5大主流布局系统进阶

了解课程

本课精华内容

问答 作业

多个盒子，flex-shrink以为值的时候，该如何计算呢？

1.2k 8

为什么用p包裹news2-item-content不用div包裹

1.0k 8

SMACSS中基础的前缀是什么？

1.1k 7

为什么header-wrapper外面还要套个header-cotainer？

1.2k 7

更新全局变量能批量修改吗

1.0k 6

查看更多本课问答
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号