首次网页制作--慕课网
来源：互联网 发布：商机助理和淘宝助理 编辑：程序博客网 时间：2024/05/13 05:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>先这样吧</title></head><style>*{margin:0;padding:0;list-style-type:none;font-family: "Microsoft YaHei";font-size:14px;}#center{background:#edeff0;padding-top:18px;overflow:hidden;}#top{background:#2a2c2e;height:66px;position:relative;}.top_left{position:absolute;left:85px;}.top_left li{float:left;margin-right:76px;line-height:66px;color:#b5bdc0;}.top_left li:hover{color:#FFFFFF;cursor:pointer;}.top_right{position:absolute;right:25px;}.top_right div{margin-right:46px;float:right;}#pi2{position:relative;z-index:1;}#pi2:hover{cursor:pointer;}#t_r{position:absolute;top:66px;left:-88px;display:none;}#t_r li{width:154px;height:43px;background:#363d40;border-bottom:1px solid #4a5153;text-align:center;line-height:43px;color:#FFFFFF;}#left{float:left;width:260px;background:#FFFFFF;margin:0px 20px 20px 75px;}#left_1{width:260px;height:auto;border:2px solid #e6e8e9;;position:relative;}#le{height:49px;width:240px;border-bottom:1px solid #f2d7da;cursor:pointer;position:relative;margin-left:10px;}#le1,#le2{width:120px;height:49px;float:left;line-height:49px;text-align:center;}#clas {margin:15px 20px;display:block;position:relative;}#clas li{width:73px;height:30px;float:left;text-align:center;line-height:30px;}#clas:hover{cursor:pointer;}.checked{background:#be3948;}#slide{width:120px;height:2px;position:absolute;bottom:-1px;left:0;background:#be3948;}#job{display:none;margin:15px 20px;position:relative;}#job:hover{cursor:pointer;}#job li{float:left;line-height:50px;text-align:center;width:110px;height:50px;}#job li p{line-height:25px;height:25px;text-algin:center;}.sli{width:220px;height:1px;background:#edf0f2;left:20px;position:absolute;}#leve{width:260px;position:relative;overflow:hidden;margin-bottom:15px;}#leve li{float:left;width:55px;height:30px;line-height:30px;text-align:center;cursor:pointer;}#search{float:left;width:219px;height:35px;color:#d7dadc;line-height:35px;}#sea{float:left;width:37px;height:39px;background:#FFF url(http://img.my.csdn.net/uploads/201410/16/1413448986_6210.jpg-thumb.jpg);}#search_all{width:260px;height:35px;margin-bottom:20px;background:#FFF;border:2px solid #e6e8e9;}#pia{display:block;width:260px;height:100px;background:url(http://static.mukewang.com/static/img/course/bg_program_link.png);cursor:pointer;}#right{width:924px;background:#FFFFFF;float:left;}#right_top{height:50px;line-height:50px;margin:0 10px 0px 20px;width:880px;border-bottom:1px solid #dadada;position:relative;}#classname{float:left;}.classname_right{float:right;width:60px;border-left:1px solid #edf0f2;color:#656e73;text-align:center;height:20px;line-height:20px;margin-top:15px;}.classname_right:hover{cursor:pointer;}#slid{width:60px;height:2px;position:absolute;bottom:-1px;background:#656e73;right:60px;}.imgdiv{width:280px;height:160px;overflow:hidden;cursor:pointer;}#piclass{padding-left:10px;}#piclass li{width:280px;;height:240px;margin:20px 10px;border:1px solid #dadada;float:left;}.p2{display:none;}.up_word{height:50px;text-align:center;display:block;}.up_time{float:left;height:40px;line-height:40px;text-align:center;color:#b4c5d8;font-size: 12px;}.up_num{float:right;height:40px;line-height:40px;text-align:center;color:#b4c5d8;font-size: 12px;}.ch1{display:none;}.ch2{display:block;}#scroll{position:fixed;right:15px;bottom:70px;width:48px;height:auto;}#scroll li{float:left;width:48px;height:48px;cursor:pointer;}.scroll_a{background:url(http://static.mukewang.com/static/css/../img/gotoTop.png?2) no-repeat -144px 0px;}.scroll_b{background:url(http://static.mukewang.com/static/css/../img/gotoTop.png?2) no-repeat -96px 0px;position:relative;}.scroll_c{background:url(http://static.mukewang.com/static/css/../img/gotoTop.png?2) no-repeat -48px 0px;}.scroll_d{background:url(http://static.mukewang.com/static/css/../img/gotoTop.png?2) no-repeat 0px 0px;display:none;}#app_div{left:-238px;top:-86px;position:absolute;display:none;width:238px;height:220px;}#app_img{float:left;}</style><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><script> $(document).ready(function() { var checked_clas=$("#clas .checked"); //记录checked元素 var checked_job=$("#job .checked"); var checked_leve=$("#leve .checked"); var checked_old=checked_clas; $("#pi2").hover(function() { $("#t_r").css("display","block"); $("#pi2>img").attr("src","http://img.my.csdn.net/uploads/201410/16/1413448961_6165.jpg-thumb.jpg"); }, function() { $("#t_r").css("display","none"); $("#pi2>img").attr("src","http://img.my.csdn.net/uploads/201410/16/1413448961_9811.jpg-thumb.jpg"); } );$("#t_r>li").hover(function() { $(this).css("background","#2a2c2e"); },function() { $(this).css("background","#363d40"); });$(".top_right div:not(#pi2)").hover(function(){ $(this).css("cursor","pointer").css("opacity",0.7); },function(){ $(this).css("cursor","none").css("opacity",1); }) $("#clas li").click(function(e) {checked_clas.animate({opacity:0.4},200,function(){checked_clas.css("opacity",1).css("backgroundColor","#FFFFFF")});checked_clas.removeClass("checked"); $(this).css("opacity",0).css("backgroundColor","#be3948");$(this).animate({opacity:1},200,function(){checked_clas=$(this).addClass("checked");checked_clas=$(this);});if($(this).html()!="全部"){$("#classname").html('"'+$(this).html()+'"'+"相关课程");} }) $("#job li").click(function(e) {checked_job.animate({opacity:0.4},200,function(){checked_job.css("opacity",1).css("backgroundColor","#FFFFFF")});checked_job.removeClass("checked"); $(this).css("opacity",0).css("backgroundColor","#be3948");$(this).animate({opacity:1},200,function(){checked_job=$(this).addClass("checked");checked_job=$(this);});if($(this).html()!="全程"){$("#classname").html('"'+$(this).find("p").eq(0).html()+$(this).find("p").eq(1).html()+'"'+"相关课程");} }) $("#leve li").click(function(e) {$("#leve li").stop(true,true);checked_leve.animate({opacity:0.4},function(){checked_leve.css("opacity",1).css("backgroundColor","#FFFFFF")});checked_leve.removeClass("checked"); $(this).css("opacity",0).css("backgroundColor","#be3948");$(this).animate({opacity:1},function(){checked_leve=$(this).addClass("checked");checked_leve=$(this);}); }) $("#le1").click(function() { $("#left_1 ul:eq(1)").css("display","none"); $("#left_1 ul:eq(0)").css("display","block"); $("#slide").animate({left:0}); }); $("#le2").click(function() { $("#left_1 ul:eq(0)").css("display","none"); $("#left_1 ul:eq(1)").css("display","block"); $("#slide").animate({left:120}); }); $(".classname_right").click(function() { if($(this).index()==1) { $("#slid").animate({right:0}); $(this).css("color","#b4bbbf"); $(".classname_right:eq(1)").css("color","#656e73"); } else { $("#slid").animate({right:60}); $(this).css("color","#b4bbbf"); $(".classname_right:eq(0)").css("color","#656e73"); } }) $("#search").focus( function() { $(this).val("").css("border-color","#2ea7e0").css("color","#000"); $("#sea").css("background-image","url(img/%E6%85%95%E8%AF%BE/6-1.jpg)") $("#search_all").css("border","#2ea7e0"); } ); $("#search").blur( function() { $(this).css("border-color","#e6e8e9").css("color","#d7dadc").val("课程搜索"); $("#sea").css("background-image","url(img/%E6%85%95%E8%AF%BE/6.jpg)") $("#search_all").css("border","#e6e8e9");; } )$("#piclass img").hover(function(){ $(this).stop(true,false); $(this).animate({width:350,height:220,marginLeft:-35,marginTop:-30},700); $(this).parent(".imgdiv").next(".p1").toggleClass("ch1"); $(this).parent(".imgdiv").nextAll(".p2").toggleClass("ch2");},function(){ $(this).stop(true,false); $(this).animate({width:300,height:170,marginLeft:0,marginTop:0},700); $(this).parent(".imgdiv").next(".p1").toggleClass("ch1"); $(this).parent(".imgdiv").nextAll(".p2").toggleClass("ch2"); }) $(document).scroll(function(){if($(this).scrollTop()>300){ $(".scroll_d").css("display","block");}else{ $(".scroll_d").css("display","none");}});$("#scroll li").hover(function(){$(this).css("background-image","url(img/%E6%85%95%E8%AF%BE/7.png)");if($(this)[0].className=="scroll_b"){$(this).find("#app_div").css("display","block");}},function(){$(this).css("background-image","url(http://static.mukewang.com/static/css/../img/gotoTop.png?2)");if($(this)[0].className=="scroll_b"){$(this).find("#app_div").css("display","none");}})$(".scroll_d").click(function(){$('html').animate({scrollTop:0});}) });</script><body><div id="top"> <ul class="top_left"> <li> <a href=http://www.imooc.com/><img src="http://img.my.csdn.net/uploads/201410/16/1413448959_7105.jpg-thumb.jpg" /></a> </li> <li>课程</li> <li>问答</li> <li>求课</li> <li>我的课程</li> </ul> <div class="top_right"> <div id="pi2"><img src="http://img.my.csdn.net/uploads/201410/16/1413448961_9811.jpg-thumb.jpg" /> <ul id="t_r"> <li>July_L</li> <li>我的笔记</li> <li>我的问答</li> <li>我的设置</li> </ul> </div> <div><img src="http://img.my.csdn.net/uploads/201410/16/1413449329_8376.jpg-thumb.jpg" /></div> <div> <img src="http://img.my.csdn.net/uploads/201410/16/1413448960_5677.jpg-thumb.jpg" /> </div> </div></div><div id="center"><div id="left"><div id="left_1"> <div id="le"> <a id="le1" > 课程库 </a> <a id="le2"> 职位 </a> <a id="slide"></a> </div> <ul id="clas" class="check"> <li class="checked">全部</li> <li>PHP</li> <li>Android</li> <li>Swift</li> <li>Python</li> <li>HTML5</li> <li>JAVA</li> <li>Node.js</li> <li>HTML</li> <li>JavaScript</li> <li>jQuery</li> <li>MySQL</li> <li>Linux</li> <li>MongoDB</li> <li>Photoshop</li> <li>Maya</li> <li>Premiere</li> </ul> <ul id="job"> <li class="checked">全部</li> <li><p>Android</p><p>开发工程师</p></li> <li><p>前端</p><P>开发工程师</P></li> <li><p>PHP</p><p>开发工程师</p></li> <li><p>JAVA</p><p>开发工程师</p></li> <li><p>IOS</p><p>开发工程师</p></li> <li><p>多媒体</p><p>设计师</p></li> </ul> <div id="leve"> <a class="sli"></a> <p style="margin:15px 28px;">难度</p> <ul style="margin:0px 14px;"> <li class="checked">全部</li> <li>初级</li> <li>中级</li> <li>高级</li> </ul> </div></div> <div id="search_all"> <input id="search" type="text" value="课程搜索" /> <a id="sea"></a> </div> <a id="pia"></a> </div> <div id="right"> <div id="right_top"> <span id="classname"style="margin-left:20px;">全部课程</span> <span class="classname_right">最新</span> <span class="classname_right">最热</span> <a id="slid"></a> </div> <ul id="piclass"> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> <li> <div class="imgdiv"><img src="http://img.mukewang.com/53daeec60001058206000338-300-170.jpg" /> </div> <div class="p1"> <span class="up_word" style="line-height:50px;">系列:jQuery基础课程</span> <p class="up_time">2014-7-17更新</p> <p class="up_num">7777人学习</p> </div> <div class="p2"> <span class="up_word" style="line-height:25px;">加入jQuery基础课程学习，有效提高网站前端开发速度!</span> <p class="up_time">更新至12-12</p> <p class="up_num">课程时长:11小时11分</p> </div> </li> </ul> </div> <ul id="scroll"> <li class="scroll_a"></li> <li class="scroll_b"> <div id="app_div"><img id="app_img" src="http://static.mukewang.com/static/img/2weima.png" /><div> </li> <li class="scroll_c"></li> <li class="scroll_d"></li> </ul></div> </body></html> 0 0
- 首次网页制作--慕课网
- 首次制作动态网页
- 首次制作rootfs的过程
- android客户端APP首次制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作！！！！
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- SEO在网页制作中应用[慕课网]
- 首次制作个人网站的经历
- Android手机平板两不误，使用Fragment实现兼容手机和平板的程序
- FusionCharts 图像报表swf文件分类收集 .
- Thunder Store 的 安装方法
- Android开发编码规范
- C#编程指南——类的继承、多态性
- 首次网页制作--慕课网
- iOS 横评调用相册 之 iPhone 也崩溃
- Android数据库高手秘籍(五)——LitePal的存储操作
- poj1741（点分治）
- 第8周 项目3 多分段函数求值（2）
- converged network adapter (CNA)
- 悟透javascript
- android反编译工具总结
- poj1836--Alignment(dp,最长上升子序列变形)
