顶部右侧导航问题

顶部右侧导航问题

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
<!DOCTYPE html>
<html>
<head>
    <title>exercise</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/exercise.css">
     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
     <script type="text/javascript" src="../js/exercise.js"></script>
</head>
<body>
    <!--顶部-->
    <div class="top">
        <div class="top-hr">
            <!--登录注册部分-->
            <div class="top-left">
                <div><a href="javascript:void(0);" class="loginLink" id="loginLink">亲，请先登录</a></div>
                <div><a href="javascript:void(0);" class="registerLink" id="registerLink">免费注册</a></div>
                <div><a href="javascript:void(0);" class="top-left-3">手机逛慕课</a></div>
            </div>
            <!--顶部右侧相关菜单-->
            <div class="top-right">
                <div class="title">
                    <div class="words">我的慕课<img src="../素材/icon/22.png"></div>
                    <div class="sub-title">
                        <div>a1</div>
                        <div>b1</div>
                        <div>c1</div>
                    </div>
                </div>
                <div class="title">
                    <div class="words">收藏夹<img src="../素材/icon/22.png"></div>
                    <div class="sub-title">
                        <div>a2</div>
                        <div>b2</div>
                        <div>c2</div>
                    </div>
                </div>
                <div class="title">
                    <div class="words">商品分类<img src="../素材/icon/22.png"></div>
                    <div class="sub-title">
                        <div>a3</div>
                        <div>b3</div>
                        <div>c3</div>
                    </div>
                </div>
                <div class="title">
                    <div class="words">卖家中心<img src="../素材/icon/22.png"></div>
                    <div class="sub-title">
                        <div>a4</div>
                        <div>b4</div>
                        <div>c4</div>
                    </div>
                </div>
                <div class="title">
                    <div class="words">联系客服<img src="../素材/icon/22.png"></div>
                    <div class="sub-title">
                        <div>a5</div>
                        <div>b5</div>
                        <div>c5</div>
                    </div>
                </div>
            </div>
            <!--弹出层遮罩-->
            <div class="layer">
                <div class="layer-mask" id="layer-mask"></div>
                <div class="layer-pop" id="layer-pop">
                    <div class="layer-close" id="layer-close"></div>
                    <div class="layer-content" id="layer-content"></div>
                </div>
                <!--登录窗体-->
                <div class="loginHTML" style="display:none;" id="loginHTML">
                    <div class="login">
                        <div class="layer-content-login">
                            <div class="login-login-title">登录</div>
                            <div class="login-register-title">注册</div>
                        </div>
                        <div class="item">
                            <input id="username" class="input" name="username" type="text" placeholder="请输入登录邮箱或手机号" />
                            <div class="error-msg username-error-msg"></div>
                        </div>
                        <div class="item">
                            <input id="password" class="input" name="password" type="password" placeholder="6-16位密码，区分大小写，不能用空格"/>
                            <div class="error-msg password-error-msg"></div>
                        </div>
                        <div class="i-autolog">
                            <div class="autolog">
                                <input type="checkbox" name="autolog" id="autolog" />下次自动登录  
                            </div>
                            <div class="forgetpassword">
                                <a href="">忘记密码</a>
                            </div>
                        </div>
                        <div class="item">
                            <input type="button" name="button" value="登录" class="submit" id="loginsubmit" />
                        </div>
                        <div class="loginLink-foot">
                            <div class="loginLink-img">
                                <div><img src="../素材/icon/xinlang.png"></div>
                                <div><img src="../素材/icon/weixin.png"></div>
                                <div><img src="../素材/icon/QQ.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--注册窗体-->
                <div class="registerHTML" style="display: none;" id="registerHTML">
                    <div class="register">
                        <div class="layer-content-login">
                            <div class="register-login-title">登录</div>
                            <div class="register-register-title">注册</div>
                        </div>
                        <div class="item">
                            <input id="username" class="input" name="username" type="text" placeholder="请输入注册邮箱或手机号" />
                            <div class="error-msg username-error-msg"></div>
                        </div>
                        <div class="item">
                            <input id="yanzhengma" class="input" name="yanzhengma" type="text" placeholder="请输入验证码"/><img src="../素材/verify.png">
                            <div class="error-msg yanzhengma-error-msg"></div>
                        </div>
                        <div class="item">
                            <input type="button" name="button" value="注册" class="submit" id="registersubmit"/>
                        </div>
                        <div class="loginLink-foot">
                            <div class="loginLink-img">
                                <div><img src="../素材/icon/xinlang.png"></div>
                                <div><img src="../素材/icon/weixin.png"></div>
                                <div><img src="../素材/icon/QQ.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
*{
margin:0;
padding:0;
}
body{
font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
}
.top{
width: 100%;
height:50px;
text-align: center;
background:#f3f5f7;
}
.top-hr{
width:1200px;
height:50px;
margin:0 auto;
color:#333;
border-bottom:1px solid #bbb;
}
a{
color:#333;
text-decoration: none;
}
.top-left{
width:300px;
height:50px;
float: left;
line-height: 50px;
}
.loginLink{
color: red;
}
.loginLink,.registerLink,.top-left-3{
margin-left:10px;
float:left;
}
.registerLink:hover,.top-left-3:hover{
color: red;
}
.top-right{
width:500px;
height:50px;
line-height: 50px;
float:right;
}
.top-right .title{
margin-left:15px;
height: 50px;
line-height: 50px;
float：right;
display: inline-block;
cursor: pointer;
}
.sub-title{
position: absolute;
display: none;
border:1px solid grey;
width:70px;
margin-top: -14px;
}
.sub-title div{
width:70px;
height:20px;
border:1px solid grey;
margin-top: -1px;
}
.sub-title div:hover{
background: #f3f5f7;
}
.top-right .title:hover .sub-title{
display: block;
z-index:2;
}
.top-right .words:hover{
color:red;
}
.layer{
width:100%;
height:100%;
}
.layer-mask{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
opacity: 0.5;
z-index: 9999;
background-color:#000;
}
.layer-pop{
display:none;
text-align: center;
    z-index: 10000;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:400px;
height:300px;
background:#fff;
margin:auto;
}
.layer-close
{
float :right;
width: 34px;
height:34px;
border: 3px solid #fff;
text-align: center;
line-height: 34px;
border-radius: 50%;
background: url(../素材/icon/20.png);
    margin-right:20px;
    margin-top: 10px;
}
.layer-close:hover
{
cursor: pointer;
background: #ccc;
color: #fff;
}
.login{
width:400px;
height:350px;
}
.layer-content-login{
height:40px;
line-height: 40px;
font-size:16px;
font-weight: bold;
margin-left:20px;
}
.login-login-title{
color: red;
border-bottom:5px solid red;
float:left;
height: 40px;
cursor: pointer;
width: 32px;
}
.login-register-title{
float:left;
height:40px;
margin-right: 250px;
cursor: pointer;
width: 38px;
}
.register-login-title{
float:left;
height: 40px;
cursor: pointer;
width: 32px;
}
.register-register-title{
float:left;
height:40px;
margin-right: 250px;
cursor: pointer;
color: red;
border-bottom:5px solid red;
width: 38px;
}
.item .input{
height:40px;
width:350px;
padding-left:5px;
border:1px solid #ccc;
margin-bottom: 20px;
margin-left: 10px;
}
#yanzhengma{
width: 250px;
height:20px;
padding:10px 5px;
border:1px solid #ccc;
margin-left:12px;
margin-right:20px;
margin-bottom: 100px;
}
.item img{
width:80px;
height: 50px;
margin-top: 5px;
margin-bottom: -20px;
}
.i-autolog{
height: 40px;
line-height: 40px;
margin-top:-10px;
}
.autolog{
float:left;
margin-left:40px;
}
.forgetpassword{
float:right;
margin-right:40px;
}
.item .submit{
background: #e40;
border:1px solid #e40;
border-radius:5px;
padding:10px auto;
width:360px;
color:#fff;
height: 40px;
}
.loginLink-img{
width:300px;
height:60px;
line-height:60px;
margin-left:70px;
margin-top: 20px;
}
.loginLink-img div{
float:left;
background:#ddd;
width:30px;
height:30px;
border-radius:50%;
    line-height:30px;
   margin-left:40px;
}
.error-msg{
color:#e40;
text-align: left;
    padding-left: 30px;
}
.yanzhengma-error-msg{
margin-top:-90px;
}
.username-error-msg{
margin-top: -20px;
}
.password-error-msg{
margin-top: -20px;
}
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
$(function(){
     // 登录链接事件
    $("#loginLink").click(function(){
        // 获取登录窗体代码
        var loginHTML = $("#loginHTML").html();
        showLayer(loginHTML,400,300,closeCallback);
 
        // 登录表单校验
        $("#loginsubmit").click(function(){
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            if(username === 'imooc' && password === '123456'){
                alert("登录成功");
            }else if(username != 'imooc'){
                $(".error-msg").html("账号输入错误");
            }
            else if (password != '123456') {
                $(".error-msg").html("密码输入错误");
            }
        });
    });
 
    // 注册链接事件
    $("#registerLink").click(function(){
        // 获取注册窗体代码
        var registerHTML = $("#registerHTML").html();
        showLayer(registerHTML,400,300,closeCallback);
 
        // 注册表单校验
        $("#registersubmit").click(function(){
            var username = $("input[name='username']").val();
            var yanzhengma = $("input[name='yanzhengma']").val();
            if(username === 'imooc' && yanzhengma === 'gyyd'){
                alert("注册成功");
            }else if("username != 'imooc'"){
                $(".error-msg").html("账号输入错误");
            }
            else if (yanzhengma != 'gyyd') {
                $(".error-msg").html("验证码输入错误");
            }
        });
    });
    // 弹出层关闭回调函数
    function closeCallback(){
        $(".error-msg").html("");
    }  
 
 
    // 显示弹出层
    function showLayer(html,width,height,closeCallback){
        // 显示弹出层遮罩
        $("#layer-mask").show();
        // 显示弹出层窗体
        $("#layer-pop").show();
        // 设置弹出层窗体样式
        $("#layer-pop").css({
            width : width,
            height : height
        });
        // 填充弹出层窗体内容
        $("#layer-content").html(html);
        // 弹出层关闭按钮绑定事件
        $("#layer-close").click(function(){
            // 弹出层关闭
            hideLayer();
            // 关闭的回调函数
            closeCallback();
        });
    }
 
    // 隐藏弹出层
    function hideLayer(){
        // 弹出层关闭
        $("#layer-mask").hide();
        $("#layer-pop").hide();
    }
})

老师请问一下右侧顶部导航怎么实现呀，我的做法有问题，希望能明确指导一下
慕码人1565653 2018-05-21
源自：项目：JQ实现瀑布流   5-2 作业题
24
收起

正在回答

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

1回答
好帮手慕夭夭 回答被采纳获得+3积分 2018-05-22 10:11:49

经过测试 , 顶部右侧导航鼠标经过时可以出现下拉菜单哦. 可以把导航出现的问题在描述清楚一些呢 ,这样更好的进行测试哦 . 祝学习愉快 !

0
收起回答
  • 慕码人1565653 提问者 #1
    你是浏览器有问题吗，是可以出现下拉菜单，但是和要求完全不一样好吧，已经错位了，你没发现吗
    2018-05-22 10:17:45
  • 好帮手慕夭夭 回复 提问者 慕码人1565653 #2
    sub-title可以设置bottom:65 , 代码中.title和.top-right设置的行高影响到下拉菜单中的文本 ,所以需要导航中给需要设置行高的元素单独设置
    2018-05-22 10:46:41
  • 慕码人1565653 提问者 回复 好帮手慕夭夭 #3
    可以具体一点吗
    2018-05-22 11:10:06
点开查看后面1条评论
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

导航栏问题
17 0 3
顶部导航条问题
16 0 4
老师我的导航缩小后 右边的空隙怎么解决
0 0 3
还有好多问题，请老师指导怎么改进。
9 0 4
请老师看一下
10 1 3

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

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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