闲着没事学了学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" onclick="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" onclick="xiaa()" id="hui">游戏会员 ▲</div> <div id="huicang" class="chang"> <div class="xiao" onclick="zong1()">开通会员</div> <div class="xiao" onclick="zong2()">续费会员</div> <div class="xiao" onclick="zong3()">会员福利</div> </div> <div class="xiao" onclick="xiab()" id="qian">我的钱包 ▲</div> <div id="qiancang" class="chang"> <div class="xiao" onclick="zong4()">余额查询</div> <div class="xiao" onclick="zong5()">余额充值</div> <div class="xiao" onclick="zong6()">余额提现</div> </div> <div class="xiao" onclick="xiac()" id="kai">开始游戏 ▲</div> <div id="youcang" class="chang"> <div class="xiao" onclick="zong7()">点击开始</div> <div class="xiao" onclick="zong8()">游戏设定</div> <div class="xiao" onclick="zong9()">邀请好友</div> </div> <div class="xiao" onclick="xiad()" id="jin">近期战绩 ▲</div> <div id="jincang" class="chang"> <div class="xiao" onclick="zong10()">战绩查询</div> <div class="xiao" onclick="zong11()">游戏截图</div> <div class="xiao" onclick="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" onclick="wobian0()"></div> <div class="heng" id="z1" onclick="wobian1()"></div> <div class="heng" id="z2" onclick="wobian2()"></div> <div class="heng" id="z3" onclick="wobian3()"></div> <div class="heng" id="z4" onclick="wobian4()"></div> <div class="heng" id="z5" onclick="wobian5()"></div> <div class="heng" id="z6" onclick="wobian6()"></div> <div class="heng" id="z7" onclick="wobian7()"></div> </div> <div class="zhuyao" id="nimama" onclick="nibange()"></div> </div> </div> </div> </body> </html> 之后呢加个css： .box{ 100%; height: 1000px; border-bottom: #228560 solid 1px;} .logo{ 100%; height: 55px; border-bottom: #228560 solid 3px; background-color: #28a176; padding-top: 15px;} .biaozhi{ 300px; height: 35px; background: url(../img/tu.png) no-repeat;margin-left: 50px; text-align: right; color: greenyellow; font-size: 30px; float: left;} .you{ 150px; height: 35px; float: right; margin-right: 50px;} .more{ 50px; height: 35px; float: left; font-size: 25px; text-align: center; color: white;} .more:hover{ 50px; height: 35px; float: left; font-size: 25px; text-align: center; color: greenyellow; cursor: pointer;} .banner{ 100%; height: 584px; clear: both;} .daohang{ 26.3%; height: 930px; border-right: #d1d1d1 solid 1px; float: left;} .tou{ 350px; height: 180px; border-bottom: #228560 solid 1px; background: url(../img/3.png); padding-top: 20px;} .xiang{ 80px; height: 80px; margin-left: 20px; background: url(../img/xiang.png);} .nihao{ 350px; height: 35px; margin-top: 65px; background-color: black; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;} .nihao:hover{ 350px; height: 35px; margin-top: 65px; background-color: #024c1e; filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7; cursor: pointer;} .ni{ 150px; height: 27px; float: left; color: #fff; text-align: center; font-size: 20px; margin-top: 8px;} .xia{ 70px; height: 27px; float: right; color: #fff; text-align: center; font-size: 20px; margin-top: 8px;} .jiao{ 350px; height: 719px;} .yue{ 350px; height: 35px; color: darkgrey;text-align: center;} #cang{ 350px; height: 108px; background-color: #28a176; display:none;} .chang{ 350px; height: 108px; display:none;} .xiao{ 350px; height: 35px; border-bottom: #f1f1f1 solid 1px; text-align: center; font-size: 25px; color: #232323;} .xiao:hover{ 350px; height: 35px; border-bottom: #f1f1f1 solid 1px; text-align: center; font-size: 25px; color: #232323; background-color: yellowgreen;cursor: pointer;} .yice{ 73.6%; height: 930px; float: right;} .biaoti{ 100%; height: 52px; background-color: #28a176;} .heng{ 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{ 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("我最腻害！！"); }
这个网页可以动了！哈哈！！！