闲着没事学了学js，做了一个下页面玩玩。
下面是html代码：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>用户娱乐系统</title><link rel="stylesheet" href="css/guanli.css" /><script type="text/javascript" src="js/jqery.js" ></script><script type="text/javascript" src="js/guanli.js" ></script></head><body><div class="box"><div class="logo"><div class="biaozhi">用户娱乐系统</div><div class="you"><div class="more">☻</div><div class="more">✉</div><div class="more">➯</div></div></div><div class="banner"><div class="daohang"><div class="tou"><div class="xiang"></div><div class="nihao" οnclick="xia()"><div class="ni">美眉,你好！</div><div class="xia" id="xia">▲</div></div></div><div class="jiao"><div id="cang"><div class="xiao">设置</div><div class="xiao">资料</div><div class="xiao">退出</div></div><div class="xiao" οnclick="xiaa()" id="hui">游戏会员 ▲</div><div id="huicang" class="chang"><div class="xiao" οnclick="zong1()">开通会员</div><div class="xiao" οnclick="zong2()">续费会员</div><div class="xiao" οnclick="zong3()">会员福利</div></div><div class="xiao" οnclick="xiab()" id="qian">我的钱包 ▲</div><div id="qiancang" class="chang"><div class="xiao" οnclick="zong4()">余额查询</div><div class="xiao" οnclick="zong5()">余额充值</div><div class="xiao" οnclick="zong6()">余额提现</div></div><div class="xiao" οnclick="xiac()" id="kai">开始游戏 ▲</div><div id="youcang" class="chang"><div class="xiao" οnclick="zong7()">点击开始</div><div class="xiao" οnclick="zong8()">游戏设定</div><div class="xiao" οnclick="zong9()">邀请好友</div></div><div class="xiao" οnclick="xiad()" id="jin">近期战绩 ▲</div><div id="jincang" class="chang"><div class="xiao" οnclick="zong10()">战绩查询</div><div class="xiao" οnclick="zong11()">游戏截图</div><div class="xiao" οnclick="zong12()">近期视频</div></div><div class="yue">本网页由洪宝制作<br/>版权声明54655-54@654-**5456</div></div></div><div class="yice"><div class="biaoti"><div class="heng" id="z0" οnclick="wobian0()"></div><div class="heng" id="z1" οnclick="wobian1()"></div><div class="heng" id="z2" οnclick="wobian2()"></div><div class="heng" id="z3" οnclick="wobian3()"></div><div class="heng" id="z4" οnclick="wobian4()"></div><div class="heng" id="z5" οnclick="wobian5()"></div><div class="heng" id="z6" οnclick="wobian6()"></div><div class="heng" id="z7" οnclick="wobian7()"></div></div><div class="zhuyao" id="nimama" οnclick="nibange()"></div></div></div></div></body></html>之后呢加个css：.box{ width: 100%; height: 1000px; border-bottom: #228560 solid 1px;}.logo{ width: 100%; height: 55px; border-bottom: #228560 solid 3px; background-color: #28a176; padding-top: 15px;}.biaozhi{ width: 300px; height: 35px; background: url(../img/tu.png) no-repeat;margin-left: 50px; text-align: right; color: greenyellow; font-size: 30px; float: left;}.you{ width: 150px; height: 35px; float: right; margin-right: 50px;}.more{ width: 50px; height: 35px; float: left; font-size: 25px; text-align: center; color: white;}.more:hover{ width: 50px; height: 35px; float: left; font-size: 25px; text-align: center; color: greenyellow; cursor: pointer;}.banner{width: 100%; height: 584px; clear: both;}.daohang{ width: 26.3%; height: 930px; border-right: #d1d1d1 solid 1px; float: left;}.tou{ width: 350px; height: 180px; border-bottom: #228560 solid 1px; background: url(../img/3.png); padding-top: 20px;}.xiang{ width: 80px; height: 80px; margin-left: 20px; background: url(../img/xiang.png);}.nihao{ width: 350px; height: 35px; margin-top: 65px; background-color: black; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}.nihao:hover{ width: 350px; height: 35px; margin-top: 65px; background-color: #024c1e; filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7; cursor: pointer;}.ni{ width: 150px; height: 27px; float: left; color: #fff; text-align: center; font-size: 20px; margin-top: 8px;}.xia{ width: 70px; height: 27px; float: right; color: #fff; text-align: center; font-size: 20px; margin-top: 8px;}.jiao{ width: 350px; height: 719px;}.yue{width: 350px; height: 35px; color: darkgrey;text-align: center;}#cang{ width: 350px; height: 108px; background-color: #28a176; display:none;}.chang{ width: 350px; height: 108px; display:none;}.xiao{ width: 350px; height: 35px; border-bottom: #f1f1f1 solid 1px; text-align: center; font-size: 25px; color: #232323;}.xiao:hover{width: 350px; height: 35px; border-bottom: #f1f1f1 solid 1px; text-align: center; font-size: 25px; color: #232323; background-color: yellowgreen;cursor: pointer;}.yice{ width: 73.6%; height: 930px; float: right;}.biaoti{ width: 100%; height: 52px; background-color: #28a176;}.heng{width: 120px; height: 42px; float: left; text-align: center; color: white; font-size: 25px; font-weight: bolder;margin-top: 10px; border-bottom: #fff solid 2px;cursor: pointer;}.zhuyao{ width: 100%; height: 870px; clear: both; background-color: cornflowerblue;}在之后搞个jqery库 外加一个自己写的js：var xiakai = 1;function xia(){if(xiakai == 1){$("#xia").html("▼");$("#cang").slideDown("slow");xiakai = 2;}else{$("#cang").slideUp("slow");xiakai = 1;$("#xia").html("▲");}}var xiaakai = 1;function xiaa(){if(xiaakai ==1){$("#hui").html("游戏会员 ▼");$("#huicang").slideDown("slow");xiaakai = 2;$("#hui").css({ "background": "#00fef5" });}else{$("#hui").html("游戏会员 ▲");$("#huicang").slideUp("slow");xiaakai = 1;$("#hui").css({ "background": "white" });}}var xiabkai = 1;function xiab(){if(xiabkai ==1){$("#qian").html("我的钱包 ▼");$("#qiancang").slideDown("slow");xiabkai = 2;$("#qian").css({ "background": "#00fef5" });}else{$("#qian").html("我的钱包 ▲");$("#qiancang").slideUp("slow");xiabkai = 1;$("#qian").css({ "background": "white" });}}var xiackai = 1;function xiac(){if(xiackai ==1){$("#kai").html("开始游戏 ▼");$("#youcang").slideDown("slow");xiackai = 2;$("#kai").css({ "background": "#00fef5" });}else{$("#kai").html("开始游戏 ▲");$("#youcang").slideUp("slow");xiackai = 1;$("#kai").css({ "background": "white" });}}var xiadkai = 1;function xiad(){if(xiackai ==1){$("#jin").html("近期战绩 ▼");$("#jincang").slideDown("slow");xiackai = 2;$("#jin").css({ "background": "#00fef5" });}else{$("#jin").html("近期战绩 ▲");$("#jincang").slideUp("slow");xiackai = 1;$("#jin").css({ "background": "white" });}}var zz = "";function zong1(){zz = "开通会员";dadajuan();};function zong2(){zz = "续费会员";dadajuan();}function zong3(){zz = "会员福利";dadajuan();}function zong4(){zz = "余额查询";dadajuan();}function zong5(){zz = "余额充值";dadajuan();}function zong6(){zz = "余额提现";dadajuan();}function zong7(){zz = "点击开始";dadajuan();}function zong8(){zz= "游戏设定";dadajuan();}function zong9(){zz = "邀请好友";dadajuan();}function zong10(){zz = "战绩查询";dadajuan();}function zong11(){zz = "游戏截图";dadajuan();}function zong12(){zz = "近期视频";dadajuan();}var i = 0;var shuzu = new Array();var x = 0;function dadajuan(){if(i<9){shuzu[i] = zz;var kaiguan = 1;if(i!=0){for(var j = 0;j<i;j++){var cao = shuzu[j];if(cao == zz){kaiguan = 2;x = j;}}}if(kaiguan == 1){bianse();switch(i){case 0:$("#z0").html(zz);$("#z0").css({ "border-bottom" : "sandybrown solid 2px" });break;case 1:$("#z1").html(zz);$("#z1").css({ "border-bottom" : "sandybrown solid 2px" });break;case 2:$("#z2").html(zz);$("#z2").css({ "border-bottom" : "sandybrown solid 2px" });break;case 3:$("#z3").html(zz);$("#z3").css({ "border-bottom" : "sandybrown solid 2px" });break;case 4:$("#z4").html(zz);$("#z4").css({ "border-bottom" : "sandybrown solid 2px" });break;case 5:$("#z5").html(zz);$("#z5").css({ "border-bottom" : "sandybrown solid 2px" });break;case 6:$("#z6").html(zz);$("#z6").css({ "border-bottom" : "sandybrown solid 2px" });break;case 7:$("#z7").html(zz);$("#z7").css({ "border-bottom" : "sandybrown solid 2px" });break;default:alert("最多可以打开8个窗口！！！");i--;}}else{bianse();switch(x){case 0:$("#z0").css({ "border-bottom" : "sandybrown solid 2px" });break;case 1:$("#z1").css({ "border-bottom" : "sandybrown solid 2px" });break;case 2:$("#z2").css({ "border-bottom" : "sandybrown solid 2px" });break;case 3:$("#z3").css({ "border-bottom" : "sandybrown solid 2px" });break;case 4:$("#z4").css({ "border-bottom" : "sandybrown solid 2px" });break;case 5:$("#z5").css({ "border-bottom" : "sandybrown solid 2px" });break;case 6:$("#z6").css({ "border-bottom" : "sandybrown solid 2px" });break;case 7:$("#z7").css({ "border-bottom" : "sandybrown solid 2px" });break;default:alert("最多可以打开8个窗口！！！");}i--;}i++;}else{alert("最多可以打开8个窗口！！！");}}function bianse(){$("#z0").css({ "border-bottom" : "#fff solid 2px" });$("#z1").css({ "border-bottom" : "#fff solid 2px" });$("#z2").css({ "border-bottom" : "#fff solid 2px" });$("#z3").css({ "border-bottom" : "#fff solid 2px" });$("#z4").css({ "border-bottom" : "#fff solid 2px" });$("#z5").css({ "border-bottom" : "#fff solid 2px" });$("#z6").css({ "border-bottom" : "#fff solid 2px" });$("#z7").css({ "border-bottom" : "#fff solid 2px" });}function wobian0(){bianse();$("#z0").css({ "border-bottom" : "sandybrown solid 2px" });}function wobian1(){bianse();$("#z1").css({ "border-bottom" : "sandybrown solid 2px" });}function wobian2(){bianse();$("#z2").css({ "border-bottom" : "sandybrown solid 2px" });}function wobian3(){bianse();$("#z3").css({ "border-bottom" : "sandybrown solid 2px" });}function wobian4(){bianse();$("#z4").css({ "border-bottom" : "sandybrown solid 2px" });}function wobian5(){bianse();$("#z5").css({ "border-bottom" : "sandybrown solid 2px" });}function wobian6(){bianse();$("#z6").css({ "border-bottom" : "sandybrown solid 2px" });}function wobian7(){bianse();$("#z7").css({ "border-bottom" : "sandybrown solid 2px" });}function nibange(){alert("我最腻害！！");}
这个网页可以动了！哈哈！！！
