首先cs样式布局都是按照老师讲解的课程一步一步写完

*{margin: 0;padding: 0;list-style: none;text-decoration: none;}
/* topNode */
.topNode{height: 56px;background: #303440;
}
.topNode .topNodeContent{width: 1206px;height: 100%;margin: 0 auto;
}.topNode .topNodeContent .logo{float: left;margin-top:14px;
}
.topNode .searchNode{width: 357px;height: 36px;border: 1px solid #191e2b;background: #fff;float: left;border-radius:19px;margin:9px 0 0 17px;  overflow: hidden;
}.topNode .searchNode .searchNodeLeft{height: 100%;float: left;width: 44px;line-height: 36px;font-size: 14px;background: url(../image/jt-b.gif) no-repeat right 14px;margin-left:18px;
}
.topNode .searchNode .searchNodeInput
{width: 198px;height: 36px;line-height: 36px;border: none;float: left;outline: none;font-size: 15px;margin-left:14px;color: #a2a2a2;
}
.topNode .searchNode .searchNodeRight{width: 80px;height: 100%;float: right;background: url(../image/search.gif) no-repeat 10px center,#4aaf4f;color: white;line-height: 36px;text-indent: 29px;font-size: 15px;}.topNode .bannerTop{height: 100%;float: left;margin-left:31px;
}
.topNode .bannerTop li{height: 100%;float: left;margin:0 9px; color: #f4f4f5;cursor: pointer;line-height: 56px;text-shadow: 0 0 1px #000312;font-size: 14px;
}
.topNode .bannerTop li.downloadApp{padding-left: 18px;background:url(../image/download.gif) no-repeat left center;
}
.topNode .bannerTop li.see{padding-left: 20px;background:url(../image/lw.gif) no-repeat left center;
}
.topNode .bannerTop li.line{width: 5px;background: url(../image/sg.gif) no-repeat 0 19px;cursor: default;
}
.topNode .bannerTop li.bell{width: 17px;background: url(../image/tx.gif) no-repeat 0 center;
}
.topNode .bannerTop li.shoppingCart{width: 18px;background: url(../image/gwc.gif) no-repeat 0 center;
}
.topNode .bannerTop .user{height: 100%;float: left;
}
.topNode .user img{width: 34px;height: 34px;border: 1px solid #1c2535;border-radius:50%; float: right;margin-top:11px;
}
.topNode .user span{height: 100%;float: left;line-height: 56px;font-size: 14px;color: white;margin-left:9px;cursor: pointer;
}
/*topNode end*/
/*topBanner*/
.topBanner{width: 1208px;height: 56px;margin: 0 auto;}
.topBanner li{float: left;height: 56px;line-height: 66px;overflow: hidden;font-size: 16px;margin-right:66px;position: relative;font-family: "Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif" }
.topBanner li a {color: #424242;}
.topBanner li.active a{color: #43ac49;}
.topBanner li .greenLine{width: 24px;height: 3px;position: absolute;left: 50%;margin-left:-12px;bottom: 0px;background: #33a841; display: none;}
.topBanner li.active .greenLine{display: block;
}
.topBanner li:hover a{color: #43ac49;
}
.topBanner li:hover .greenLine{display: block;
}
.topBanner li.right{margin-right: 0;
}
.topBanner li.right a{float: left;margin-top: 29px;width: 18px;height: 4px;line-height: 0;}/*silder-content*/
.silder-content{height: 360px;background: #f15c5a;
}
.silder-content .silder-content-outerNode{width: 1208px;height: 100%;margin: 0 auto;position: relative;
}
.silder-content .silder-content-outerNode .silder-content-UlNode{width: 100%;height: 100%;position: relative;
}
.silder-content .silder-content-outerNode .silder-content-UlNode li{width: 100%;height: 100%;position: absolute;opacity: 0;display: none;transition: 0.49s;
}
.silder-content .silder-content-outerNode .silder-content-UlNode li.active{width: 100%;height: 100%;position: absolute;opacity: 0;display: block;
}.silder-content .silder-content-outerNode .silder-content-UlNode img{float: left;
}
.silder-content .silder-content-outerNode .silder-content-button{width: 280px;height: 320px;position: absolute;right: 0;top: 20px;background: rgba(0,0,0,0.4);border-radius:3px;
}
.silder-content .silder-content-outerNode .silder-content-button li{text-indent: 20px;font-size: 16px;height:40px;float: left;line-height: 40px;
}
.silder-content .silder-content-outerNode .silder-content-button li a:hover{color:  #30e043;
}
.silder-content .silder-content-outerNode .silder-content-button li a{height: 100%;float: left;color: #aaa;
}.silder-content .silder-content-outerNode .silder-content-button li.first{margin-top:22px;}
.silder-content .silder-content-outerNode .silder-content-button li.active a{color: #30e043;
}
.silder-content .silder-content-outerNode .silder-content-button li.active{background: url(../image/slider-jt.png) no-repeat 8px center;
}
/*silder-content end*//*open-content*/
.open-content{width: 1206px;height: 213px;margin:35px auto 0;position: relative;
}
.open-content h2{font-size: 24px;float: left;line-height: 24px;height: 24px;
}
.open-content .more{font-size: 14px;color: #696969;position: absolute;right: 1px;top: 5px;padding-right: 27px;background: url(../image/more-jt.png) no-repeat right center;
}
.open-content .open-content-slider{width: 1120px;height: 164px;float: left;margin-left:38px;margin-top :15px; overflow: hidden;position: relative;
}
.open-content .open-content-slider .open-content-slider-card{width: 1612px;height: 100%;position: absolute;left: 10px;top: 10px;
}
.open-content .open-content-slider .open-content-slider-card li{width: 351px;border: 1px solid #f1f1f1;border-radius: 6px;height: 141px;float: left;margin-right:25px;
}
.open-content .open-content-slider .open-content-slider-card li>a{float: left;width: 100%;height: 100%;
}
.open-content .open-content-slider .open-content-slider-card li:hover{box-shadow: 0 0 10px #ccc;
}
.open-content .open-content-slider .open-content-slider-card li .card-user{width: 112px;height: 100%;float: left;
}
.open-content .open-content-slider .open-content-slider-card li .card-user img{float: left;margin: 12px 0 0 12px;
}
.open-content .open-content-slider .open-content-slider-card li .time{float: left;height: 14px;font-size: 14px;line-height: 14px;color: #333333;margin-top: 16px;width: 239px;
}
.open-content .open-content-slider .open-content-slider-card li .content{font-size: 16px;height: 16px;line-height: 16px;color: #2a2a2a;width: 239px;float: left;margin-top: 14px;
}
.open-content .open-content-slider .open-content-slider-card li .user-name{height: 23px;width: 239px;float: left;font-size: 14px;line-height: 23px;color: #3d3d3d;margin-top: 11px;
}
.open-content .open-content-slider .open-content-slider-card li .user-name .title-box{float: left;width: 56px;height: 21px;border: 1px solid #fadfa9;border-radius:3px;background: #fefaf2; color: #f19400;text-align: center;line-height: 21px;font-size: 12px;
}
.open-content .open-content-slider .open-content-slider-card li .user-name .title-user{float: left;height: 100%;margin-right:17px;
}
.open-content .open-content-slider .open-content-slider-card li .bottom-title{font-size: 12px;color: #575757;line-height: 12px;height: 12px;margin-top: 8px;float: left;width: 239px;
}
.open-content .card-left{width: 14px;height: 23px;cursor: pointer;position:absolute;background: url(../image/l-jt.png);left: 3px;top: 110px;
}
.open-content .card-right{width: 14px;height: 23px;cursor: pointer;position:absolute;background: url(../image/r-jt.png);right: 3px;top: 110px;
}/*live-model*/
.live {margin-top: 22px;height: 287px;}
.live .live-model{width: 1254px;height: 248px;float: left;margin-top: 15px;margin-left:-12px;
}
.live .live-model li{float: left;width: 394px;height: 124px;border-radius: 3px;margin-right:24px;margin-bottom:4px; }
.live .live-model li.no-right{margin-right:0;}
.live .live-model li:hover{box-shadow: 0 0 5px #ccc}
.live .live-model li a{float: left;width: 100%;height: 100%;}
.live .live-model li a .teacher-pic{float: left;width: 112px;height: 100%;
}
.live .live-model li a .teacher-pic img{border-radius:50%;float: left;margin-top: 12px;margin-left: 12px; }
.live .live-model li a .time{float: left;width: 282px;height: 13px;font-size: 13px;line-height: 13px;margin-top: 14px;color: #070707;
}
.live .live-model li a .time span{float: left;}
.live .live-model li a .time span.g{color: #00a94e;}
.live .live-model li a .time span.live-l{padding-right: 13px;background: url(../image/line-l.png) no-repeat right center;margin-right:9px; }
.live .live-model li a .live-name{float: left;width: 266px;color: #2e2e2e;line-height: 24px;font-size: 16px;margin-top: 11px;padding-right: 16px;
}
.live .live-model li a .live-teacher-name{float: left;width: 282px;font-size: 11px;color: #606060;line-height: 11px;margin-top: 11px;
}/*system 系统化学习路径*/
.system{width: 1206px;height: 164px;margin: 32px auto 0;}
.system h2{font-size: 24px;float: left;line-height: 24px;height: 24px;
}
.system .system-title{font-size: 14px;line-height: 14px;height: 14px;float: left;color: #575757;margin-top: 9px;margin-left: 13px;
}
.system .system-ul{width: 100%;height: 120px;float: left;margin-top: 20px;
}
.system .system-ul li{float: left;height: 100%;width: 180px;margin-right:25px; border-radius: 3px; overflow: hidden;}
.system .system-ul li a{width: 100%;height: 100%;float: left;}
.system .system-ul li a img{width: 100%;height: 100%;}
.system .system-ul li.no{margin-right:0px; }/*technology 微专业模块*/
.technology{margin-top:43px;height: 260px; }
.technology .technology-ul{width: 1206px;height: 223px;float: left;margin-top: 15px;}
.technology .technology-ul li{height: 100%;float: left;width: 286px;margin-right: 20px;}
.technology .technology-ul li a{float: left;width: 100%;height: 100%;}
.technology .technology-ul li a .technology-image{float: left;width: 100%;height: 161px;border-radius:3px 3px 0 0;
}
.technology .technology-ul li a .technology-content{width: 284px;height: 61px;border: 1px solid #f0f0f0;float: left;border-radius: 0 0 3px 3px;
}
.technology .technology-ul li a .technology-content .technology-content-name{font-size: 16px;line-height: 16px;height: 16px;color: #0b0b0b;text-indent: 10px;margin-top: 10px;
}
.technology .technology-ul li a .technology-content .technology-content-title{color: #656565;font-size: 13px;line-height: 13px;height: 13px;text-indent: 10px;margin-top: 8px;
}
.technology .technology-ul li.no{margin-right:0px; }/*seckill 限时秒杀模块*/
.seckill{margin-top: 51px;height: 311px;}
.seckill .seckill-tab-top{width: 100%;height: 40px;float: left;margin-top: 21px;}
.seckill .seckill-tab-top li{float: left;height: 100%;width: 200px;margin-right:1px;background: #edf7ee; font-size: 13px;text-align: center;line-height: 40px;cursor: pointer;color: #444344;text-shadow: 0 0 1px #fff;}
.seckill .seckill-tab-top li.first{border-radius: 2px 0 2px 0;}
.seckill .seckill-tab-top li.no{margin-right:0; }
.seckill .seckill-tab-top li.active{background: #4aaf4f;color: #fafdfa;}
.seckill .seckill-tab-content{width: 100%;height: 216px;float: left;margin-top: 12px;}
.seckill .seckill-tab-content .seckill-tab-content-ul{width: 100%;height: 100%;display: none;}
.seckill .seckill-tab-content .show{display: block;}
.seckill .seckill-tab-content .seckill-tab-content-ul li{float: left;height: 100%;position: relative;width: 225px;margin-right:20px; }
.seckill-tab-content .seckill-tab-content-ul li a{float: left;width: 100%;height: 100%;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li img{float: left;height: 125px;border-radius: 3px;}
.seckill .seckill-tab-content .seckill-tab-content-ul li .seckill-tab-content-ul-name{height: 13px;line-height: 13px;float: left;width: 100%;font-size: 13px;color: #4a4a4a;margin-top: 10px;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .seckill-tab-content-ul-user{float: left;font-size: 12px;height: 12px;line-height: 12px;color: #6b6b6b;margin-top: 13px;width: 100%;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .seckill-tab-content-ul-money{float: left;color: #ff291e;margin-top: 19px;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .seckill-tab-content-ul-money .seckill-tab-content-ul-money-l{float: left;height: 13px;line-height: 13px;font-size: 13px;margin-top: 7px;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .seckill-tab-content-ul-money .seckill-tab-content-ul-money-true{font-size: 24px;line-height: 24px;height: 24px;float: left;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .last{color: #7c7c7c;margin-left:12px;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .last span{text-decoration: line-through;}
.seckill .seckill-tab-content .seckill-tab-content-ul li .last .seckill-tab-content-ul-money-true{font-size: 13px;line-height: 13px;font-size: 13px;margin-top: 7px;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .seckill-tab-content-ul-time{width: 60px;height: 20px;border-radius: 3px;border: 1px solid #ff5319;position: absolute;right: 0;bottom: 0;color: #ff0000;text-align: center;line-height: 20px;font-size: 13px;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li .active{color: #999;border: 1px dashed #999;
}
.seckill .seckill-tab-content .seckill-tab-content-ul li.no{margin-right:0; }/*mask 遮罩层*/
.mask{width: 100%;height:100%;background: rgba(0,0,0,0.3);position: fixed;left: 0;top: 0;z-index:10;display: none;}
/*alertNode 兴趣弹窗模块*/
.alertNode{width: 990px;height: 470px;position: fixed;left: 50%;top: 50%;margin:-235px 0 0 -495px;background: #fff;z-index: 11;border-radius:2px; display: none;}
.alertNode .alertNode-topName{width: 100%;height: 19px;float: left;margin-top: 43px;}
.alertNode .alertNode-topName span{float: left;}
.alertNode .alertNode-topName span.alertNode-topName-choose{line-height: 19px;height: 19px;font-size: 19px;color: #1c1c1c;margin-left:40px;margin-right:26px;  }
.alertNode .alertNode-topName span.alertNode-topName-title{line-height: 14px;height: 14px;font-size: 14px;color: #616161;margin-top: 5px;
}
.alertNode .alertNode-ul{width: 910px;height: 40px;border-bottom:1px solid #e0e0e0;float: left;margin: 26px 0 0 40px; }
.alertNode .alertNode-ul li{float: left;height: 100%;line-height: 40px;font-size:16px;color: #666;position: relative;cursor: pointer;margin-right:32px;
}
.alertNode .alertNode-ul li.active div{width: 100%;height: 3px; position: absolute;left: 0;bottom: -1px;background: #37a43e;}
.alertNode .alertNode-ul li.no{margin-right:0; }
.alertNode .alertNode-content{width: 910px;float: left;height: 150px;border-bottom:1px solid #e0e0e0;margin: 0 0 0 40px;
}
.alertNode .alertNode-content ul{width: 100%;height: 100%;float: left;
}
.alertNode .alertNode-content ul li{height: 32px;padding: 0 20px;border: 1px solid #d1d1d1;float: left;font-size: 13px;line-height:32px;color: #4e4e4e;border-radius:16px;cursor: pointer; margin: 20px 20px 0 0 ; }
.alertNode .alertNode-content ul li.active{background: #4eae54;color: #f5fbf5;border-color:  #4eae54;
}
.alertNode .alertNode-ol{width: 910px;float: left;margin-left:40px;height: auto; }
.alertNode .alertNode-ol li.text{float: left;height: 30px;line-height: 28px;color: #666666;font-size: 13px;border: none;padding: 0;margin-right:14px;
}
.alertNode .alertNode-ol li{font-size: 13px;line-height: 28px;height: 28px;padding: 0 16px;float: left;color: #666;border: 1px solid #d1d1d1;border-radius:14px; margin-top:19px;margin-right:16px;
}
.alertNode .alertNode-ol li img{cursor: pointer;margin-left:9px; }
.alertNode .alertNode-closed{position: absolute;right: 20px;top: 20px;background: url(../image/bg-closed.gif);width: 14px;height: 14px;cursor: pointer;}/*interest 更改兴趣模块*/
.interest{width: 1206px;height: 60px;background: #edf7ee;border-radius: 2px;margin: 40px auto 0;line-height: 60px;}
.interest .interest-l{font-size: 18px;font-weight: bold; margin-left:20px;float: left; }
.interest .interest-r{font-size: 13px;color: #60ba65;margin-left:21px;background: url(../image/in-jt.gif) no-repeat right center; float: left;padding-right:15px; cursor: pointer;}/*web-model 下面内容模块*/
.web-model{height:216px ;margin-top: 23px;}
.web-model .seckill-tab-content-ul{width: 100%;height: 173px;float: left;margin-top: 19px;}
.web-model .seckill-tab-content-ul li a{float: left;width: 100%;height: 100%;}
.web-model .seckill-tab-content-ul li{float: left;height: 100%;position: relative;width: 225px;margin-right:20px; }
.web-model .seckill-tab-content-ul li img{float: left;height: 125px;border-radius: 3px;}
.web-model .seckill-tab-content-ul li .seckill-tab-content-ul-name{height: 13px;line-height: 13px;float: left;width: 100%;font-size: 13px;color: #4a4a4a;margin-top: 10px;
}
.web-model .seckill-tab-content-ul li .seckill-tab-content-ul-user{float: left;font-size: 12px;height: 12px;line-height: 12px;color: #6b6b6b;margin-top: 13px;width: 100%;
}
.web-model .seckill-tab-content-ul li.no{margin-right:0px; }
.mt{margin-top: 47px;}/*series 系列课程模块*/
.series{height: 212px;}
.series .series-ul{width: 100%;height: 170px;float: left;margin-top: 19px;}
.series .series-ul li{width: 286px;float: left;height: 100%;border-radius: 3px;overflow: hidden;margin-right:20px; }
.series .series-ul li a{width: 100%;height: 100%;float: left;position: relative;}
.series .series-ul li a .series-border-out{width: 238px;height: 68px;border: 4px solid #fff;position: absolute;z-index: 2;left: 20px;bottom: 18px;}
.series .series-ul li a .series-border-inner{width: 236px;height: 66px;background: rgb(255,255,255,0.94);position: absolute;z-index: 3;left: 25px;bottom: 23px;}
.series .series-ul li a .series-border-inner h3{height: 17px;float: left;width: 100%;font-size: 17px;line-height: 17px;margin-top: 17px;text-align: center;color: #0c0c0c;}
.series .series-ul li a .series-border-inner .series-border-inner-title{font-size: 13px;line-height: 13px;height: 13px;float:left;width: 100%;margin-top: 10px;text-align: center;color: #666666;}
.series .series-ul li.no{margin-right: 0;}
.mt43{margin-top: 43px;}/*advertisement 广告模块*/
.advertisement{width: 1206px;height: 130px;margin: 59px auto 0;}
.advertisement a{float: left;height: 100%;}
.advertisement-l{margin-right:20px; }/*footer 尾部模块*/
.footer{height:184px ;margin-top:26px;background: #474443; }
.footer .footer-content{width: 1206px;height: 100%;margin: 0 auto;}
.footer .footer-content .footer-content-l{width: 972px;float: left;height: 100%;font-family: "Arial","Hiragino Sans GB", \5fae\8f6f\96c5\9ed1, "Helvetica", "sans-serif"}
.footer .footer-content .footer-content-l .footer-content-l-text{font-size: 13px;height: 13px;line-height: 13px;float: left;width: 100%;color: #ffffff;margin-top:34px; }
.footer .footer-content .footer-content-l .footer-content-l-ul{float: left;height: 13px;line-height: 13px;font-size: 13px;width: 100%;margin-top:18px; }
.footer .footer-content .footer-content-l .footer-content-l-ul li{float: left;height: 100%;margin-right:22px; }
.footer .footer-content .footer-content-l .footer-content-l-ul li a{color: #fff}
.footer .footer-content .footer-content-l .footer-content-l-ul li a:hover{text-decoration: underline;}
.footer .footer-content .footer-content-l .footer-content-l-last-text{height: 13px;font-size: 13px;line-height: 13px;float: left;width: 100%;color: #9d9d9d;margin-top:24px; }
.footer .footer-content .footer-content-l .footer-content-l-last-text span{float: left;margin-right: 21px; }
.footer .footer-content .footer-content-l .footer-content-l-last-text a{color: #9d9d9d;float: left;margin-left:3px; }
.footer .footer-content .footer-content-l .footer-content-l-last-text a:hover{color: #fff;text-decoration: underline;}.footer .footer-content .footer-content-r{width: 234px;height: 100%;float:left;}
.footer .footer-content .footer-content-r .footer-content-r-download{height: 34px;width: 100%;float: left;margin-top:28px;
}
.footer .footer-content .footer-content-r .footer-content-r-download a{float: left;margin-right:7px; }
.footer .footer-content .footer-content-r .footer-content-r-download a.no{margin:0; }
.footer .footer-content .footer-content-r .footer-content-r-app{height: 30px;line-height: 30px;font-size: 13px;width: 100%;float: left;margin-top: 20px; }
.footer .footer-content .footer-content-r .footer-content-r-app span{float: left;height: 100%;margin-left:92px;color: #ffffff; margin-right:7px; }
.footer .footer-content .footer-content-r .footer-content-r-app a{float: left;margin-right:16px;position: relative; }
.footer .footer-content .footer-content-r .footer-content-r-app a.no{margin: 0;}
.footer .footer-content .footer-content-r .footer-content-r-app .footer-content-r-app-wx:hover .footer-content-r-app-show{display: block;
}
.footer .footer-content .footer-content-r .footer-content-r-app .footer-content-r-app-wx .footer-content-r-app-show{width: 240px;height: 247px;background: url(../image/ewm.gif) no-repeat center 87px,#fff;position: absolute;top: -256px;left: -113px;display: none;border-radius:3px;box-shadow: 0 0 5px #ccc;
}
.footer .footer-content .footer-content-r .footer-content-r-app .footer-content-r-app-wx .footer-content-r-app-show .footer-content-r-app-show-sc{width: 17px;height: 9px;position: absolute;background: url(../image/sjx.gif) no-repeat;left: 50%;margin-left:-8.5;bottom: -9px;
}
.footer .footer-content .footer-content-r .footer-content-r-app .footer-content-r-app-wx .footer-content-r-app-show .footer-content-r-app-show-text{width: 100%;float: left;height: 13px;font-size: 13px;line-height: 13px;text-align: center;color: #000000;margin-top:19px;
}
.footer .footer-content .footer-content-r .footer-content-r-app .footer-content-r-app-wx .footer-content-r-app-show .footer-content-r-app-show-title{font-size: 11px;height: 11px;line-height:11px;float: left;width: 100%;color: #474747;text-align: center;margin-top:16px;
}/*window-show 右侧广告窗*/
.window-show{width: 61px;height: 327px;position: fixed;right: 18px;top: 320px;}
.window-show .window-show-top{position: absolute;top: 0;}
.window-show .window-show-ul{width: 47px;height: 220px;border: 1px solid #d1d1d1;position: absolute;left: 0;bottom: 0;background: #fff;border-radius:5px; }
.window-show .window-show-ul .window-show-ul-text{width: 100%;height: 58px;float: left;cursor: pointer;}
.window-show .window-show-ul .window-show-ul-line{width: 100%;height:23px;float: left;position: relative;}
.window-show .window-show-ul .window-show-ul-line .line{width: 39px;height: 1px;background: #cecece;position: absolute;left: 4px;top: 11px;}
.window-show .window-show-ul .show-m{background: url(../image/show-m.gif) no-repeat center center;border-radius:5px 5px 0 0; }
.window-show .window-show-ul .show-mobile{background: url(../image/show-mobile.gif) no-repeat center center;position: relative;}
.window-show .window-show-ul .show-t{background: url(../image/show-t.gif) no-repeat center center;border-radius:0 0 5px 5px;}
.window-show .window-show-ul .window-show-ul-text:hover .window-show-ul-text-name{display: block;}
.window-show .window-show-ul .window-show-ul-text .window-show-ul-text-name{float: left;width: 25px;height:49px;background: #359c2e;color: #f8fbf7;font-size: 12px;line-height: 21px;padding-top:9px; padding-left:11px;padding-right:11px; display: none;
}
.window-show .window-show-ul .show-mobile:hover .show-alert{display: block;}
.window-show .window-show-ul .show-mobile .show-alert{width: 212px;height: 133px;border: 1px solid #d9d9d3;left: -215px;top:-30px;background: #fff;position: absolute;display: none;}
.window-show .window-show-ul .show-mobile .show-alert .show-alert-jt{width: 5px;height: 14px;background: url(../image/alert-jt.png);right: -5px;top: 50%;margin-top:-7px;position: absolute; }
.window-show .window-show-ul .show-mobile .show-alert .show-alert-node{float: left;height: 110px;width: 85px;margin-top:12px;margin-left: 14px;  }
.window-show .window-show-ul .show-mobile .show-alert .ml15{margin-left:15px; }
.window-show .window-show-ul .show-mobile .show-alert .show-alert-node img{float: left;}
.window-show .window-show-ul .show-mobile .show-alert .show-alert-node p{float: left;height: 13px;font-size: 13px;line-height: 13px;color: #4c4c4c;margin-top: 11px;text-align: center;width: 100%; }

然后是页面的html代码：

<!doctype html>
<html>
<head> <meta charset="utf-8"> <title>网易云课堂</title><link rel="stylesheet" type="text/css" href="css/index副本.css">
</head>
<body><div class='topNode'><div class='topNodeContent'><a href="#" class="logo"><img src="data:image/logo.gif"></a><div class='searchNode'><div class='searchNodeLeft'>课程</div><input type="" name="" class='searchNodeInput' value="零基础学JavaScript"><a class='searchNodeRight' href="#">搜索</a></div><ul class='bannerTop'><li class='downloadApp'>下载APP</li><li class='see'>关注领福利</li><li>会员中心</li><li class='line'></li><li>管理后台</li><li>我的学习</li><li class='bell'></li><li class='shoppingCart'></li><li class='line'></li></ul><div class='user'><span>李游Leo</span><img width="34" height="34" src="data:image/F07F9E9C63CDA35AB0E00DA054402EC2.png"></div></div></div><ul class='topBanner'><li class='active'><a href="#">首页</a><div class='greenLine'></div></li><li><a href="#">实用英语</a><div class='greenLine'></div></li><li><a href="#">兴趣技能</a><div class='greenLine'></div></li><li><a href="#">职场提升</a><div class='greenLine'></div></li><li><a href="#">编程与开发</a><div class='greenLine'></div></li><li><a href="#">AI/数据科学</a><div class='greenLine'></div></li><li><a href="#">生活兴趣</a><div class='greenLine'></div></li><li><a href="#">设计创意</a><div class='greenLine'></div></li><li><a href="#">产品与运营</a><div class='greenLine'></div></li><li class='right'><a href="#"><img src="data:image/pointer.gif"></a></li></ul><!-- silder-content 轮播图--><div class='silder-content'><div class='silder-content-outerNode'><ul class='silder-content-UlNode'><li class='active'><img src="data:image/8c35596bb5ec4cb8ae7390f28c4cb567.png"></li><li><img src="data:image/6ca7db807c3f448fa19039cae380ffb7.jpg"></li><li><img src="data:image/9da551a2ceee48fcae68db05b562cff1.jpg"></li><li><img src="data:image/a17ddac75cc944b9b0f5204156e2afa6.png"></li><li><img src="data:image/19055192bca54c5ea9622d8f672fd8e1.png"></li><li><img src="data:image/81f375340e0c48b7a4d1b9c853eab8ce.png"></li><li><img src="data:image/79b6a4b0bd644681b1d2a5ec3c10da65.jpg"></li></ul><ol class='silder-content-button'><li class='first active'><a href="#">脱口而出： 3天地道口语轻松说</a></li><li><a href="#">0元领取：站酷大神带你入门UI</a></li><li><a href="#">高效提升：3节课练就口语技能</a></li><li><a href="#">限时免费：如何获取稳定投资收益</a></li><li><a href="#">金融思维：25个经典案例解析</a></li><li><a href="#">免费试听：清华大神教你Python</a></li><li><a href="#">新课特惠：网课变现全流程进阶课</a></li></ol></div></div><!-- open-content 名师公开课--><div class='open-content'><div class='card-left'></div><div class='card-right'></div><h2>名师公开课</h2><a href="#" class='more'>更多</a><div class='open-content-slider'><ul class="open-content-slider-card"><li><a href="#"><div class='card-user'><img src="data:image/user.png"></div><div class='time'>12月21日 20:00</div><div class='content'>零基础轻松学Python</div><div class='user-name'><span class='title-user'>毕滢</span><div class='title-box'>清华码神</div></div><div class='bottom-title'>编程小白的Python入门课</div></a></li><li><a href="#"><div class='card-user'><img src="data:image/user.png"></div><div class='time'>12月21日 20:00</div><div class='content'>零基础轻松学Python</div><div class='user-name'><span class='title-user'>毕滢</span><div class='title-box'>清华码神</div></div><div class='bottom-title'>编程小白的Python入门课</div></a></li><li><a href="#"><div class='card-user'><img src="data:image/user.png"></div><div class='time'>12月21日 20:00</div><div class='content'>零基础轻松学Python</div><div class='user-name'><span class='title-user'>毕滢</span><div class='title-box'>清华码神</div></div><div class='bottom-title'>编程小白的Python入门课</div></a></li><li><a href="#"><div class='card-user'><img src="data:image/user.png"></div><div class='time'>12月21日 20:00</div><div class='content'>零基础轻松学Python</div><div class='user-name'><span class='title-user'>毕滢</span><div class='title-box'>清华码神</div></div><div class='bottom-title'>编程小白的Python入门课</div></a></li></ul></div></div><!-- live 课堂直播--><div class='open-content live'><h2>课堂直播</h2><a href="#" class='more'>更多</a><ul class='live-model'><li><a href="#"><div class='teacher-pic'><img src="data:image/6002D19DCC07E048FBDE4C84D276EB46.jpg"></div><div class='time'><span class='live-l'>今天 20:00</span> <span class="g">开启提醒</span></div><div class='live-name'>1节课教你：如何用Python快速选择优质股票11</div><div class='live-teacher-name'><span>王冕</span><span>网易特邀数据架构专家讲师</span></div></a></li><li><a href="#"><div class='teacher-pic'><img src="data:image/6002D19DCC07E048FBDE4C84D276EB46.jpg"></div><div class='time'><span class='live-l'>今天 20:00</span> <span class="g">开启提醒</span></div><div class='live-name'>1节课教你：如何用Python快速选择优质股票11</div><div class='live-teacher-name'><span>王冕</span><span>网易特邀数据架构专家讲师</span></div></a></li><li class='no-right'><a href="#"><div class='teacher-pic'><img src="data:image/6002D19DCC07E048FBDE4C84D276EB46.jpg"></div><div class='time'><span class='live-l'>今天 20:00</span> <span class="g">开启提醒</span></div><div class='live-name'>1节课教你：如何用Python快速选择优质股票11</div><div class='live-teacher-name'><span>王冕</span><span>网易特邀数据架构专家讲师</span></div></a></li><li><a href="#"><div class='teacher-pic'><img src="data:image/6002D19DCC07E048FBDE4C84D276EB46.jpg"></div><div class='time'><span class='live-l'>今天 20:00</span> <span class="g">开启提醒</span></div><div class='live-name'>1节课教你：如何用Python快速选择优质股票11</div><div class='live-teacher-name'><span>王冕</span><span>网易特邀数据架构专家讲师</span></div></a></li><li><a href="#"><div class='teacher-pic'><img src="data:image/6002D19DCC07E048FBDE4C84D276EB46.jpg"></div><div class='time'><span class='live-l'>今天 20:00</span> <span class="g">开启提醒</span></div><div class='live-name'>1节课教你：如何用Python快速选择优质股票11</div><div class='live-teacher-name'><span>王冕</span><span>网易特邀数据架构专家讲师</span></div></a></li><li class='no-right'><a href="#"><div class='teacher-pic'><img src="data:image/6002D19DCC07E048FBDE4C84D276EB46.jpg"></div><div class='time'><span class='live-l'>今天 20:00</span> <span class="g">开启提醒</span></div><div class='live-name'>1节课教你：如何用Python快速选择优质股票11</div><div class='live-teacher-name'><span>王冕</span><span>网易特邀数据架构专家讲师</span></div></a></li></ul></div><!-- system 系统化学习路径--><div class='system'><h2>系统化学习路径</h2><span class='system-title'>网易云课堂六大课程体系，让学习有章有序</span><ul class='system-ul'><li><a href="#"><img src="data:image/b8cbbde8bc98409aad5227fde070df7d.png"></a></li><li><a href="#"><img src="data:image/29696616fe6e495a9b191244f2bd0bea.png"></a></li><li><a href="#"><img src="data:image/9957cb6a888e40f08c36ce6a96804d32.png"></a></li><li><a href="#"><img src="data:image/7594f6916fc94a16af474856d1de8786.png"></a></li><li><a href="#"><img src="data:image/96ee5f4a9b954c1991b17ca577aaa00a.png"></a></li><li class='no'><a href="#"><img src="data:image/9c3adc02cea44377a91c6716201bbe4c.png"></a></li></ul></div><!-- technology 微专业模块 --><div class='open-content technology'><h2>微专业</h2><a href="#" class='more'>更多</a><ul class='technology-ul'><li><a href="#"><img src="data:image/wzy-1.gif" class='technology-image'><div class='technology-content'><div class='technology-content-name'>UI设计师</div><div class='technology-content-title'>打通全链路，成为独当一面的核心设计师</div></div></a></li><li><a href="#"><img src="data:image/wzy-2.gif" class='technology-image'><div class='technology-content'><div class='technology-content-name'>数据分析-高薪全能班</div><div class='technology-content-title'>21周高效掌握数据精英必备技能</div></div></a></li><li><a href="#"><img src="data:image/wzy-3.gif" class='technology-image'><div class='technology-content'><div class='technology-content-name'>高级前端开发工程师</div><div class='technology-content-title'>构建一线互联网企业Web前端全栈知识体系</div></div></a></li><li class='no'><a href="#"><img src="data:image/wzy-4.gif" class='technology-image'><div class='technology-content'><div class='technology-content-name'>Java高级架构师</div><div class='technology-content-title'>精通JAVA/高并发/微服务/分布式/中间件</div></div></a></li></ul></div><!-- 限时秒杀模块--><div class='system seckill'><h2>限时秒杀</h2><ul class='seckill-tab-top'><li class='first active'>今天  &nbsp;&nbsp;20:00开抢</li><li>明天  &nbsp;&nbsp;10:00开抢</li><li>明天  &nbsp;&nbsp;14:00开抢</li><li>明天  &nbsp;&nbsp;20:00开抢</li><li>12月23日  &nbsp;&nbsp;10:00开抢</li><li class='no'>12月23日  &nbsp;&nbsp;14:00开抢</li></ul><div class='seckill-tab-content'><ul class='seckill-tab-content-ul show'><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li></ul><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li></ul><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li></ul><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li></ul><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li></ul><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div><div class="seckill-tab-content-ul-money"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class="seckill-tab-content-ul-money last"><span class='seckill-tab-content-ul-money-l'>￥</span><span class='seckill-tab-content-ul-money-true'>29.9</span></div><div class='seckill-tab-content-ul-time'>仅剩8席</div></a></li></ul></div></div><!-- mask 遮罩层--><div class='mask'></div><!-- alertNode 兴趣弹窗模块--><div class='alertNode'><div class='alertNode-closed'></div><div class='alertNode-topName'><span class='alertNode-topName-choose'>请选择你的学习兴趣</span><span class='alertNode-topName-title'>至少选择1个，可随时调整</span></div><ul class='alertNode-ul'><li>职场提升<div class='line'></div></li><li>编程与开发<div class='line'></div></li><li>AI/数据科学<div class='line'></div></li><li>生活兴趣<div class='line'></div></li><li>设计创意<div class='line'></div></li><li>产品与运营<div class='line'></div></li><li>电商运营<div class='line'></div></li><li>职业考试<div class='line'></div></li><li class='no'>语言学习<div class='line'></div></li></ul><div class='alertNode-content'><ul><li class='active'>投资理财</li><li>绘画</li><li>音乐</li></ul></div><ol class='alertNode-ol'><li class='text'>已选<span>1</span>个:</li><li class='active'>投资理财<img src="data:image/colosd.gif"></li><li>绘画<img src="data:image/colosd.gif"></li><li>音乐<img src="data:image/colosd.gif"></li></ol></div><!-- 更改兴趣模块 --><div class='interest'><span class='interest-l'>以下根据你的学习兴趣推荐</span><span class='interest-r'>更改兴趣</span></div><!-- web-model 内容模块--><div class='system seckill web-model'><h2>后端开发</h2><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/web-leo.gif"><div class='seckill-tab-content-ul-name'>Web前端,从零基础到全栈工程师</div><div class='seckill-tab-content-ul-user'>李游Leo</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li></ul></div><!-- web-model 内容模块--><div class='system seckill web-model mt'><h2>前端开发</h2><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/web-leo.gif"><div class='seckill-tab-content-ul-name'>Web前端,从零基础到全栈工程师</div><div class='seckill-tab-content-ul-user'>李游Leo</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li></ul></div><!-- web-model 内容模块--><div class='system seckill web-model mt'><h2>职场能力</h2><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/web-leo.gif"><div class='seckill-tab-content-ul-name'>Web前端,从零基础到全栈工程师</div><div class='seckill-tab-content-ul-user'>李游Leo</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li></ul></div><!-- web-model 内容模块--><div class='system seckill web-model mt'><h2>办公软件</h2><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/web-leo.gif"><div class='seckill-tab-content-ul-name'>Web前端,从零基础到全栈工程师</div><div class='seckill-tab-content-ul-user'>李游Leo</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li></ul></div><!-- series 系列课程--><div class='system series mt'><h2>系列课程</h2><ul class='series-ul'><li><a href="#"><img src="data:image/series-pic.gif"><div class='series-border-out'></div><div class='series-border-inner'><h3>Office从入门到精通</h3><div class='series-border-inner-title'>一站搞定PPT、Excel、Word</div></div></a></li><li><a href="#"><img src="data:image/series-pic-2.gif"><div class='series-border-out'></div><div class='series-border-inner'><h3>Project项目管理</h3><div class='series-border-inner-title'>教你最地道的Project项目管理技能</div></div></a></li><li><a href="#"><img src="data:image/series-pic.gif"><div class='series-border-out'></div><div class='series-border-inner'><h3>Office从入门到精通</h3><div class='series-border-inner-title'>一站搞定PPT、Excel、Word</div></div></a></li><li class='no'><a href="#"><img src="data:image/series-pic.gif"><div class='series-border-out'></div><div class='series-border-inner'><h3>Office从入门到精通</h3><div class='series-border-inner-title'>一站搞定PPT、Excel、Word</div></div></a></li></ul></div><!-- web-model 内容模块--><div class='system seckill web-model mt43'><h2>精选好课</h2><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/web-leo.gif"><div class='seckill-tab-content-ul-name'>Web前端,从零基础到全栈工程师</div><div class='seckill-tab-content-ul-user'>李游Leo</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li></ul></div><!-- web-model 内容模块--><div class='system seckill web-model mt'><h2>新课推荐</h2><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/web-leo.gif"><div class='seckill-tab-content-ul-name'>Web前端,从零基础到全栈工程师</div><div class='seckill-tab-content-ul-user'>李游Leo</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li></ul></div><!-- web-model 内容模块--><div class='system seckill web-model mt'><h2>免费好课</h2><ul class='seckill-tab-content-ul'><li><a href="#"><img src="data:image/web-leo.gif"><div class='seckill-tab-content-ul-name'>Web前端,从零基础到全栈工程师</div><div class='seckill-tab-content-ul-user'>李游Leo</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li><li class='no'><a href="#"><img src="data:image/714dde077ba84be6a0042798cd7479d2.jpg"><div class='seckill-tab-content-ul-name'>Node.js全栈开发之路</div><div class='seckill-tab-content-ul-user'>IT老兵</div></a></li></ul></div><!-- 广告模块 advertisement --><div class='advertisement'><a href="#" class='advertisement-l'><img src="data:image/9b393ab0b939453895a203bc0b7d1c30.jpg"></a><a href="#" class='advertisement-r'><img src="data:image/454d20a5bcf34163b0148ecc79ec2ef1.jpg"></a></div><!-- 尾部模块 footer--><div class='footer'><div class="footer-content"><div class='footer-content-l'><p class='footer-content-l-text'>网易云课堂 是网易公司（163.com）旗下专注职业技能提升的在线学习平台。</p><ul class='footer-content-l-ul'><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li><li><a href="#">帮助中心</a></li><li><a href="#">中国大学MOOC</a></li><li><a href="#">网易卡搭编程</a></li><li><a href="#">极客战记</a></li><li><a href="#">有道智云</a></li></ul><p class='footer-content-l-last-text'><span>©1997-2020 网易公司 版权所有</span><span>粤B2-20090191-18</span> <a href="#">工业和信息化部备案管理系统网站</a></p></div><div class='footer-content-r'><div class='footer-content-r-download'><a href="#"><img src="data:image/app-download.gif"></a><a href="#" class='no'><img src="data:image/ad-download.gif"></a></div><div class='footer-content-r-app'><span>关注我们:</span><a href="#" class='footer-content-r-app-wx'><img src="data:image/wx.gif"><div class='footer-content-r-app-show'><div class='footer-content-r-app-show-sc'></div><div class='footer-content-r-app-show-text'>关注云课堂官方微信号</div><div class='footer-content-r-app-show-title'>-领取课程免费福利，超值学习资料-</div></div></a><a href="#" class="no"><img src="data:image/sina.gif"></a></div></div></div></div><!-- window-show 右侧广告窗--><div class='window-show'><a href="#" class='window-show-top'><img src="data:image/sjfxs.png"></a><ul class='window-show-ul'><li class='window-show-ul-text show-m'><div class='window-show-ul-text-name'>在线咨询</div></li><li class='window-show-ul-line'><div class='line'></div></li><li class='window-show-ul-text show-mobile'><div class='window-show-ul-text-name'>手机课堂</div><div class='show-alert'><div class='show-alert-jt'></div><div class='show-alert-node'><img src="data:image/ewm-l.png"><p>下载APP</p></div><div class='show-alert-node ml15'><img src="data:image/ewm-r.png"><p>关注微信</p></div></div></li><li class='window-show-ul-line'><div class='line'></div></li><li class='window-show-ul-text show-t'><div class='window-show-ul-text-name'>返回顶部</div></li></ul></div><script type="text/javascript" src="js/index副本.js"></script>
</body>
</html>

01网易首页静态页面笔记（李游精品前端课程）相关推荐

  1. 01网易云首页导航栏html制作（李游精品前端课程笔记）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 377-379自制mac系统 （李游精品前端课程笔记）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 【无标题】169-179笔记1月18日李游精品前端课程

    169.操作元素的基本流程 一．JS操作元素的基本方法 *因为JS放在文档的最上面,所以要使用window.onload,在页面加载完成后运行JS的代码. 二．操作body标签示例 <scrip ...

  4. 【无标题】180-187笔记1月19日李游精品前端课程笔记

    180.使用JS获取节点名称<script type="text/javascript">onload=function(){var divNode=document. ...

  5. 仿移动端苏宁(rem布局)、携程(flex布局)首页静态页面，源码可下载

    移动端苏宁首页(rem布局) 前几个月时跟着黑马pink老师的视频使用rem布局制作了移动端苏宁首页以及移动端携程首页,视频里只完成了一部分页面,于是自己则把剩下未完成的部分敲完并通过码云部署发布静态 ...

  6. 学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】

    来源:黑马前端 难度:⭐(简单)--适合刚学习html和css的新手小白 源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...

  7. 静态页面笔记包括 html和css

    HTML/CSS 笔记 一.html 简单介绍 html 意思是超文本标记语言 超文本:可以点击且跳转的文字或 图片 : 标记语言:描述网页的一种语言 网页组成部分:结构 html 样式 css 行为 ...

  8. html淘宝首页静态页面（html+css）带源码

    文章目录 源码 前端基础阶段 一.实现效果 二.代码 1.淘宝2.html 2.6.css 三.图片 四.涉及知识点 1.头部title添加图标icon 总结: 源码 链接:https://pan.b ...

  9. 京东首页静态页面html+css

    个人名片:

最新文章

  1. easypoi教程_EasyPoi教程
  2. 针对自己网站内容的搜索引擎代码
  3. poj 2503（字符串hash）
  4. 直播预告 | 东南大学周张泉：基于知识图谱的推理技术
  5. linxu安装OSX
  6. 使用SAP Analytics Cloud统计SAP C4C系统创建Lead里包含的产品信息分布情况
  7. 消息透露苹果新款MacBook Pro预计将在第三季度或第四季度发布
  8. flask-sqlalchemy Models
  9. “神经网络”的逆袭：图解80年AI斗争史
  10. 面对SDN，我们该怎么办？
  11. sqlmap批量扫描burpsuite拦截的日志记录
  12. Centos7 Zabbix3.2安装(yum)
  13. 如何在windows10系统将用户名改为英文
  14. Android EditText常用属性
  15. 汇编实验二——选出非负数以及排序
  16. 五款免费同步备份软件介绍
  17. Allegro各层简介
  18. Java编写个人所得税计算机的问题
  19. wps android 版 参数控制介绍,最强手机办公软件 Android版金山WPS首评测
  20. ElasticSearch查询实战之电商商城商品搜索

热门文章

  1. 在线JSONP接口调用
  2. element-ui 表格树数据显示
  3. layui数据表格table在选项卡tabs中分页条不显示的解决
  4. jQuery制作漂亮的层叠轮播图
  5. Panzoid手把手教程，分分钟做出电影公司片头
  6. 《卧龙：苍天陨落》故事发生在东汉末年...
  7. matching书页匹配例子
  8. 电力人工智能的研究与应用,人工智能与电力系统
  9. 碳达峰碳中和 | 城镇污水处理厂减污降碳协同动态-典型案例
  10. 通过Kalman滤波对方程进行参数估计matlab