导航栏不显示

导航栏不显示

Index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!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>页面结构布局</title>
    <!-- css -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/layout.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/slider.css">
    <link rel="stylesheet" href="./css/course.css">
    <link rel="stylesheet" href="./css/tabbar.css">
    <link rel="stylesheet" href="./css/responsive.css">
 
    <!-- 字体 -->
    <link rel="stylesheet" href="./icons/iconfont.css">
    <style>
        html {
            font-size: 1.333333vw;
        }
    </style>
    <!-- <script>
        const domEl = document.documentElement;
 
        const setHtmlFontsize = () => {
            const viewWidth = domEl.clientWidth;
            // 1rem =10px
            domEl.style.fontSize = `${viewWidth/75}px`;
        };
        setHtmlFontsize();
        window.addEventListener('resize', setHtmlFontsize, false);
    </script> -->
 
</head>
 
<body>
    <!-- 头部 -->
    <header class="header-layout common-style">
        <div class="header">
            <a href="./index.html" class="header-logo">
                <img src="./images/logo.png" alt="logo" class="header-logo-img">
            </a>
            <button class="header-toggle" id="header-toggle">
                <span class="header-toggle-bar"></span>
                <span class="header-toggle-bar"></span>
                <span class="header-toggle-bar"></span>
            </button>
        </div>
        <nav id="nav" class="nav-layout ">
            <ul class="nav-list">
                <li>
                    <a href="./index.html" class="nav-link">首页</a>
                </li>
                <li>
                    <a href="javascript:;" class="nav-link">免费课程</a>
                </li>
                <li>
                    <a href="javascript:;" class="nav-link">实战课程</a>
                </li>
                <li>
                    <a href="javascript:;" class="nav-link">专栏</a>
                </li>
                <li>
                    <a href="javascript:;" class="nav-link">慕课教程</a>
                </li>
            </ul>
        </nav>
    </header>
 
    <!-- 主体 -->
    <div class="main-layout">
        <!-- 幻灯片 -->
        <div class="slider-layout">
            <img src="./images/slider/1.jpg" alt="">
        </div>
 
        <!-- 免费课程 -->
        <div class="course-layout">
            <div class="course">
                <h2 class="course-title">免费课程</h2>
                <ul class="course-list">
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_free/1.jpg" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_free/2.jpg" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_free/3.jpg" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_free/4.jpg" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版</p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
 
        <!-- 实战课程 -->
        <div class="course-layout">
            <div class="course">
                <h2 class="course-title">实战课程</h2>
                <ul class="course-list">
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_coding/1.jpg" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版,加油加油加油加油加油加油</p>
                            <p class="course-price">￥328</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_coding/2.jpg" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版，加油加油加油加油加油加油</p>
                            <p class="course-price">￥298</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_coding/3.jpg" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版，加油加油加油加油加油加油</p>
                            <p class="course-price">￥348</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_coding/4.png" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版，加油加油加油加油加油加油</p>
                            <p class="course-price">￥299</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_coding/5.png" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版，加油加油加油加油加油加油</p>
                            <p class="course-price">￥499</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img src="./images/course_coding/6.png" alt="" class="course-img">
                            </p>
                            <p class="course-name">初识HTML(5) + CSS(3) - 2020升级版，加油加油加油加油加油加油</p>
                            <p class="course-price">￥348</p>
                        </a>
                    </li>
                </ul>
            </div>
 
        </div>
    </div>
 
    <!-- 标签栏 -->
    <div class="tabbar-layout common-style">
        <div class="tabbar">
            <a href="./index.html" class="tabbar-item tabbar-item-active">
                <i class="iconfont icon-home">&#xe64f;</i>
                <span>首页</span>
            </a>
            <a href="javascript:;" class="tabbar-item ">
                <i class="iconfont ">&#xe623;</i>
                <span>搜索</span>
            </a>
            <a href="javascript:;" class="tabbar-item ">
                <i class="iconfont ">&#xe610;</i>
                <span>我的</span>
            </a>
        </div>
    </div>
 
    <script>
        // 点击切换按钮，展开或收起导航菜单
        {
            const $toggleBtn = document.getElementById('header-toggle');
            const $nav = document.getElementById('nav');
 
            const navExtendedClassName = 'nav-layout-extended';
            const toggleBtnExtendedClassName = 'header-toggle-active';
            $toggleBtn.addEventListener('click', function() {
                // toggle 如果有toggleBtnExtendedClassName的样式就移除，如果没有就加上
                this.classList.toggle(toggleBtnExtendedClassName);
                $nav.classList.toggle(navExtendedClassName);
            }, false);
        }
    </script>
</body>
 
</html>

layout.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body {
    display: flex;
    height: 100vh;
    flex-direction: column;
}
 
.common-style {
    width: 100%;
    flex-shrink: 0;
    height: 9.6rem;
}
 
.header-layout {
    position: relative;
}
 
.nav-layout {
    overflow: hidden;
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    height: 0;
    transition: height .5s;
}
 
.nav-layout-extended {
    height: 200px;
}
 
.main-layout {
    flex-grow: 1;
    overflow: auto;
}
 
.tabbar-layout {
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
}
 
.slider-layout {
    margin-bottom: 20px;
}
 
.course-layout {
    margin-bottom: 10px;
}

responsive.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 576px 768px 992px 1200px */
 
.course-item {
    width: 100%;
}
 
@media screen and (min-width:576px) {
    .course-item {
        width: 50%;
    }
}
 
@media screen and (min-width:768px) {
    .course-item {
        width: 33.333333%;
    }
    .header-toggle {
        display: none;
    }
    .nav-layout {
        position: static;
        height: auto;
    }
    .nav-list {
        display: flex;
        justify-content: flex-end;
    }
}
 
@media screen and (min-width:992px) {
    .course-item {
        width: 25%;
    }
}
 
@media screen and (min-width:1200px) {
    .course-item {
        width: 16.666667%;
    }
}

header.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 20px;
    border-bottom: 1px solid gray;
}
 
.header-logo-img {
    height: 6rem;
}
 
.header-toggle {
    border: none;
    background-color: transparent;
    padding: 10px;
}
 
.header-toggle-bar {
    display: block;
    width: 4.8rem;
    height: .8rem;
    background-color: #363636;
    border-radius: 2px;
}
 
.header-toggle-active {
    background-color: #f1f1f1;
}
 
.header-toggle-active .header-toggle-bar {
    background-color: #1428a0;
}
 
.nav-list {
    background-color: #fff;
}
 
.nav-link {
    display: block;
    height: 40px;
    line-height: 40px;
    color: #363636;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 700;
}
 
.header-toggle-bar+.header-toggle-bar {
    margin-top: .8rem;
}
慕斯2168053 2021-11-29
源自：响应式布局   3-4 项目作业
33
收起

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

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕慕子 2021-11-29 17:36:28

同学你好，在源码中测试同学粘贴的这部分代码，导航栏可以正常显示，如下：

https://img1.sycdn.imooc.com//climg/61a49deb0988803b05740301.jpg

建议同学参考源码再测试下，如果还是不可以，可以将你的其他css代码全部粘贴过来，老师再帮助测试下，祝学习愉快~

0
收起回答
  • 提问者 慕斯2168053 #1

    尺寸变大后，就不显示了

    2021-11-29 21:54:38
  • 好帮手慕慕子 回复 提问者 慕斯2168053 #2

    将nav内容放在类名为header的div里面就可以了，如下：

    https://img1.sycdn.imooc.com//climg/61a584570976b90c08980893.jpg

    效果如下：

    https://img1.sycdn.imooc.com//climg/61a5847b094f15f610370493.jpg

    祝学习愉快~

    2021-11-30 09:55:16
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

导航栏回退
15 0 3
导航栏问题
17 0 3
鼠标离开导航栏以后，导航栏不会自动恢复，要点击了其他导航栏才恢复，怎么破？
29 0 5
2-7作业导航问题
20 0 3
导航栏不对字体显示不出
12 0 4

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

前端工程师
  • 参与学习           人
  • 提交作业       15697    份
  • 解答问题       17883    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码