老师好，不知道怎么回事用html()方法后没有css样式了
<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> </label> <input id="loginSubmitBtn" type="submit" class="submit" value="填写好了" /> </div> </div> </body> </html>
CSS
@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
$(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();
})
}
})0
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星