老师好，不知道怎么回事用html()方法后没有css样式了

老师好，不知道怎么回事用html()方法后没有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
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
<html>
<head>
    <meta charset="utf-8">
    <title>jquery弹出层课程代码</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript" src="../js/js.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
 
    <div class="header">
        <div class="banner">
            <img src="../images/003.png">
            <span><a href="http://coding.imooc.com/">实战</a></span>
            <span><a href="http://www.imooc.com/course/program">路径</a></span>
            <span><a href="http://www.imooc.com/wenda">猿问</a></span>
            <span><a href="http://www.imooc.com/article">手记</a></span>
        </div>
        <a id="loginLink" href="#">登录</a>
        <a id="regeLink" href="#">注册</a>
    </div>
 
    <div class="swipe">
        <div class="nav">
            <div class="item">
                <p class="title">前端开发</p>
                <p>
                    <span>Html / Css</span>
                    <span>Javascript</span>
                    <span>Html5</span>
                </p>
            </div>
            <div class="item">
                <p class="title">后端开发</p>
                <p>
                    <span>PHP / Nodejs</span>
                    <span>Java</span>
                    <span>C#</span>
                </p>
            </div>
            <div class="item">
                <p class="title">移动开发</p>
                <p>
                    <span>Android</span>
                    <span>iOs</span>
                    <span>Cocos2d-x</span>
                </p>
            </div>
            <div class="item">
                <p class="title">数据处理</p>
                <p>
                    <span>Mysql</span>
                    <span>Oracle</span>
                    <span>MongoDB</span>
                </p>
            </div>
        </div>
        <div class="ppt first"></div>
    </div>
 
    <div class="lessions">
        <p class="title">❤ 热门课程</p>
        <ul>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入门</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩转Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代码编写规范</p>
            </li>
 
            <li style="margin-right:0;">
                <img src="../images/004.jpg">
                <p>JavaScript快速入门</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩转Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代码编写规范</p>
            </li>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入门</p>
            </li>
            <li style="margin-right:0;">
                <img src="../images/005.jpg">
                <p>玩转Photoshop</p>
            </li>
        </ul>
    </div>
 
    <div class="lessions">
        <p class="title">☆ 最新发布</p>
        <ul>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入门</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩转Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代码编写规范</p>
            </li>
 
            <li style="margin-right:0;">
                <img src="../images/004.jpg">
                <p>JavaScript快速入门</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩转Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代码编写规范</p>
            </li>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入门</p>
            </li>
            <li style="margin-right:0;">
                <img src="../images/005.jpg">
                <p>玩转Photoshop</p>
            </li>
        </ul>
    </div>
 
    <div class="footer">
        <div class="site">
            <span>关于我们</span>
            <span>人才招聘</span>
            <span>讲师招募</span>
            <span>联系我们</span>
            <span>意见反馈</span>
            <span>友情链接</span>
        </div>
        <div class="author">
            © 2016 imooc.com  京ICP备13046642号
        </div>
    </div>
 
    <!-- 弹出层遮罩 -->
    <div class="layer-mask"></div>
    <!-- 弹出层窗体 -->
    <div class="layer-pop">
        <!-- 弹出层关闭按钮 -->
        <div class="layer-closer">X</div>
        <div class="layer-content">
             
        </div>
    </div>
        <!-- 登录窗体 -->
            <div class="loginHtml" style="display: none">
                <h4 class="title">登 录</h4>
                <div class="item">
                    <label>账号</label>
                    <input id="username" class="input" name="username" type="text"/>
                    <p class="error-msg"></p>
                </div>
                <div class="item">
                    <label>密码</label>
                    <input id="password" class="input" name="password" type="password"/>
                </div>
                <div class="item">
                    <label>&nbsp;</label>
                    <input id="loginSubmitBtn" type="submit" class="submit" value="填写好了" />
                </div>
            </div>
     
         
 
</body>
</html>

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
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
@charset "utf8";
*{margin:0;padding:0;}
body
{
    text-align:center;
    font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
    line-height:30px;
}
ul,li
{
    list-style:none;
}
/*弹出层遮罩*/
.layer-mask{
    display: none;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
}
/*弹出层窗体*/
.layer-pop{
    display: none;
    z-index: 2;
    width: 400px;
    height: 300px;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/*弹出层关闭按钮*/
.layer-closer{
    cursor: pointer;
    width: 24px;
    height: 24px;
    border: 3px solid white;
    float: right;
    background: #eee;
    border-radius: 50%;
    line-height: 24px;
    text-align: center;
    margin-right: -10px;
    margin-top: -10px;
}
.layer-close:hover{
    cursor: pointer;
    background: #ccc;
    box-shadow: 1px 1px  rgba(0,0,0,0.3);
}
/*登录*/
.loginHtml
{
 
}
.loginHtml h4
{
    font-size:20px;
    line-height:50px;
}
 
.loginHtml label
{
    margin-right: 5px;
    color: #888;
    display: inline-block;
    width: 60px;
    text-align: right;
}
 
.loginHtml .input
{
    border:1px solid #ccc;
    border-radius:3px;
    padding:10px 5px;
    width:250px;
}
 
.loginHtml .item
{
    margin:20px auto;
}
 
.loginHtml .submit
{
    background: #e40;
    border:1px solid #e40;
    border-radius:5px;
    padding:10px 5px;
    width:250px;
    color:#fff;
}
.loginHtml .error-msg
{
    color:#e40;
}
 
/*慕课网效果*/
/*顶部*/
.header
{
    height:80px;
    line-height:80px;
    text-align : right;
    margin: 0 20px;
    overflow:hidden;
}
.header .banner
{
    float:left;
}
.header .banner span
{
    font-size:18px;
    margin:0 15px;
    line-height:80px;
}
.header .banner img
{
    width:150px;
    vertical-align: middle;
    margin-right:40px;
}
.header a
{
    color:#666;
    text-decoration:none;
    margin-left:20px;
}
/*轮播*/
.swipe
{
    width: 1200px;
    height: 450px;
    margin : 0 auto;
    overflow:hidden;
}
.swipe .ppt
{
    width:100%;
    height:100%;
}
.swipe .ppt.first
{
    background:url(../images/001.jpg);
    background-size: cover;
}
.swipe .ppt.second
{
    background:url(../images/002.jpg);
    background-size: cover;
}
/*导航*/
.nav
{
    position:absolute;
    width : 280px;
    height:450px;
    background: #000;
    color:#fff;
 
    filter:alpha(opacity=50);  /*支持 IE 浏览器*/
    -moz-opacity:0.50; /*支持 FireFox 浏览器*/
    opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/
}
.nav .item
{
    margin: 5px 20px;
    padding: 10px;
    text-align:left;
    border-bottom:1px solid #aaa;
}
.nav .item:hover
{
    background:#666;
    cursor: pointer;
}
.nav .item .title
{
    font-size:16px;
    margin-bottom:10px;
}
.nav .item span
{
    margin-right : 9px;
}
/*课程排列*/
.lessions
{
    width : 1200px;
    margin : 0 auto;
}
.lessions .title
{
    text-align:left;
    line-height : 45px;
    color:#666;
    font-size:16px;
    margin-top:30px;
}
.lessions ul
{
    overflow:hidden;
}
.lessions li
{
    float : left;
    width : 23%;
    margin-right: 32px;
    margin-top: 32px;
}
.lessions li img
{
    max-width:100%;
}
/*页脚*/
.footer
{
    margin-top:50px;
    padding:50px 0;
    background: #eee;
    border-top : 1px solid #ddd;
}
.footer .site
{
    line-height:100px;
}
.footer .site span
{
    margin:0 20px;
    color :#888;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function(){
    //点击登录后弹出层出现
    $('#loginLink').click(function(){
        var loginHtml=$('.loginHtml').html();
        showLayer(loginHtml);
    })
    //弹出层出现函数
    function showLayer(html){
        $('.layer-mask').show();
        $('.layer-pop').show();
        $('.layer-content').html(html);
        $('.layer-closer').click(function(){
        $('.layer-mask').hide();
        $('.layer-pop').hide();
    })
    }
})
debug工程师 2018-09-30
源自：jQuery弹出层案例   3-1 弹出层通用函数封装（上）
0
收起

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

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

2回答
好帮手慕夭夭 2018-10-07 15:29:45

同学并没有给弹窗按钮设置样式啊 ，如下

http://img1.sycdn.imooc.com//climg/5bb9b531000159ae12620602.jpg

可把按钮选择器改为如下：

http://img1.sycdn.imooc.com//climg/5bb9b5680001166c08370418.jpg

同学检查一下其他没有作用的样式，使用正确的选择器 。另外css样式表引用要在js脚本引用上面 ，如下：

http://img1.sycdn.imooc.com//climg/5bb9b5dd000196e908040095.jpg

完善一下吧 ， 祝学习愉快 ，望采纳

0
收起回答
Miss路 2018-10-06 11:05:43

同学你说的是这里吗？

http://img1.sycdn.imooc.com//climg/5bb826510001ed3c11840552.jpg

我看弹出层是有样式的哦

http://img1.sycdn.imooc.com//climg/5bb826630001a53b11480704.jpg

如果不是的话，请你详细的描述清楚哪里有问题，老师好为你做准确的回答。

祝学习愉快！

0
收起回答
  • 提问者 debug工程师 #1
    hi老师，是设置的css显示不出来，html结构是有的。。比如说那个"填写好了"的按钮不应该是红色的大按钮吗，这里就一个小按钮，不知道是怎么回事o(╥﹏╥)o
    2018-10-06 19:43:00
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师那多个html分别不同的用外链方式添加css然后保存到dist文件夹里怎么弄
23 0 5
关于回调函数
19 0 4
链入外部样式和导入外部样式
1 3 5
老师们，能看下吗？？为什么CSS不能加载进来啊，打开页面是没样式的，问几次了没人回答！
39 0 8
为什么在后置通知里拿到返回值
21 1 5

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

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

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

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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