效果:
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" href="css/main.css" /> <body> <div class="contrainer"> <!--头开始--> <div class="top"> <!--头左开始--> <div class="top_left"> <div class="top_left1"> <img src="img/logo.png" class="img"/> </div> <div class="top_left2"> <img src="img/zxw.png" class="imgstyle"> </div> <div class="top_left3"> <img src="img/line.png" /> </div> <div class="top_left4"> <span class="self">个人中心</span> </div> </div> <!--头左结束--> <!--头右开始--> <div class="top_right"> <div class="top_right1"> <span class="user">您好,刘洋老师</span> </div> <div class="top_right2"> <img src="img/exit.png" class="img"/> <span class="exit">退出</span> </div> </div> <!--头右结束--> </div> <!--头结束--> <!--main开始--> <div class="main"> <!--左开始--> <div class="main_left"> <!--左上6个提示链接开始--> <div class="main_left_top"> <div class="btn1 btn" id="btn1"><a href="javascript:choose(1)" id="a1">个人信息</a></div> <div class="btn2 btn" id="btn2"><a href="javascript:choose(2)" id="a2">我的资料</a></div> <div class="btn3 btn" id="btn3"><a href="javascript:choose(3)" id="a3">账号安全</a></div> <div class="btn4 btn" id="btn4"><a href="javascript:choose(4)" id="a4">班级管理</a></div> <div class="btn5 btn" id="btn5"><a href="javascript:choose(5)" id="a5">教师管理</a></div> <div class="btn6 btn" id="btn6"><a href="javascript:choose(6)" id="a6">家长信息</a></div> </div> <!--左上6个提示链接结束--> <!--左下主体开始--> <div class="main_left_bottom"> <div class="msg1 msg" id="msg1">这里为个人信息</div> <div class="msg2 msg" id="msg2">这里为我的资料</div> <div class="msg3 msg" id="msg3">这里为账号安全</div> <!-- 作者:offline 时间:2018-03-14 描述:班级管理开始 --> <div class="msg4 msg" id="msg4"> <!--班级左边开始--> <div class="class_left"> <div class="class_left1 leftstyle"> <div class="classselect" onclick="openGrades()"><span onclick="selectAllGrade()" id="grade">全部年级</span> <img src="img/down.png" class="img"/></div> </div> <!--隐藏的班级选择div开始--> <div class="selectdiv" id="selectdiv"> </div> <!--隐藏的班级选择div结束--> <div class="class_left2 leftstyle" id="allClasses"><div>全部班级</div></div> </div> <!--班级左边结束--> <!--班级右边开始--> <div class="class_right"> <!--班级右边的上边开始--> <div class="main_right_top"> <!--班级右边的上边 班级名称--> <div class="main_right_top_left" > <div id="classinfo" class="classinfo"></div> </div> <!--班级右边的上边 创建时间--> <div class="main_right_top_mid" > <div class="timeimg"><img src="img/clock.png" class="img"></div> <div class="timetextinfo">创建时间:</div> <div class="timetext" id="timetext"></div> </div> <!--班级右边的上边 添加学生--> <div class="main_right_top_right"> <div class="add" id="add" onclick="add()"> <div>添加学生账号</div></div> </div> <!--隐藏的添加学生账号弹框--> <div class="addstudent" id="addstudent"> <div class="addtop"> <div class="addtop_left">添加学生账号</div> <div class="addtop_right"> <img src="img/cha.png" onclick="exitadd()" class="img"/> </div> </div> <div class="addmain"> <div class="tablediv"> <table> <tr> <td> 姓 名 :</td> <td><input type="text"></td> </tr> <tr> <td>准考证号 : </td> <td><input type="text"></td> </tr> <tr> <td>学 籍 号 : </td> <td><input type="text"></td> </tr> <tr> <td><div id="submit" class="submit"><div>确认</div></div></td> <td><div id="cancle" class="cancle" onclick="cancle()"><div>取消</div></div></td> </tr> </table> </div> </div> </div> </div> <!--班级右边的上边结束--> <!--班级右边的中间开始--> <div class="main_right_mid"> <!--班级教师--> <div class="teacher_top"> <div class="teacher_top_left">班级教师</div> <div class="teacher_top_right" onclick="over()" id="teacher_top_right">收起 <img src="img/jt.png" class="img"></div> </div> <div class="teacher_bottom"> <div class="teacherinfo" id="teacherinfo"> <table id="teachertable" class="teachertable"> <tr> <th class="teacherfirst">科目</th> </tr> <tr> <td>任课教师</td> </tr> </table> </div> </div> </div> <!--班级右边的中间结束--> <!--班级右边的下边开始--> <div class="main_right_bottom"> <!--学生人数--> <div class="sumstudent" id="sumstudent">班级学生</div> <!--学生表格--> <div class="studenttablediv" id="studenttablediv"> <table class="studenttable" id="studenttable"> <tr> <th></th> <th>姓名</th> <th>准考证号</th> <th>学籍号</th> <th>加长手机号</th> <th>操作</th> </tr> </table> </div> <!--转班删除--> <div class="studentoprationdiv"> <div class="zbdiv"> <div class="zb">转班</div> </div> <div class="deletediv"> <div class="delete">删除</div> </div> </div> </div> <!--班级右边的下边结束--> </div> <!--班级右边结束--> </div> <!-- 作者:offline 时间:2018-03-14 描述:班级管理结束 --> <div class="msg5 msg" id="msg5">这里为教师管理</div> <div class="msg6 msg" id="msg6">这里为家长信息</div> <div></div> </div> <!--左下主体结束--> </div> <!--左结束--> <!--右开始--> <div class="main_right"> <div class="main_right1">快捷操作</div> <div class="main_right2 right"> <div class="mainimg"> <img src="img/addclass.png" class="img"/> </div> <div class="maintext"><span class="text">创立新班级</span></div> </div> <div class="main_right3 right"> <div class="mainimg"><img src="img/download.png" class="img" ></div> <div class="maintext"><span class="text">下载学生名单</span></div> </div> <div class="main_right4 right"> <div class="mainimg"><img src="img/update.png" class="img"></div> <div class="maintext"><span class="text">批量升级</span></div> </div> <div class="main_right5 right"> <div class="mainimg"><img src="img/bunchzb.png" class="img"></div> <div class="maintext"><span class="text">批量转班</span></div> </div> </div> <!--右结束--> </div> <!--main结束--> <!--尾开始--> <div class="bottom"> <div class="tail">皖ICP备05001217号科大讯飞股份有限公司版权所有 </div> </div> <!--尾结束--> </div> <!--灰色背景--> <div id="black_overlay" class="black_overlay"></div> </body> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="js/main.js" ></script> </html>
css:
html { width: 100%; height: 100%; margin: 0px; } body { width: 100%; height: 100%; margin: 0px; font-family: "微软雅黑"; } /*灰色背景*/ .black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #787878; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); } /*div 个主体页面*/ .contrainer { width: 100%; height: 100%; background-color: #2e363f; } /*div 头*/ .top { width: 100%; height: 6.8%; } /*div 中间*/ .main { width: 100%; height: 89%; background-color: #f1f1f1; } .bottom { width: 100%; height: 4.2%; text-align: center; font-size: 10%; color: #565e67; } .tail{ } /*div 中间的左边*/ .top_left { margin-left: 24%; float: left; width: 13%; height: 100%; } /*中间的右边*/ .top_right { float: right; width: 10%; height: 100%; margin-right: 24%; } /*div 头 放logo*/ .top_left1 { width: 23%; height: 98%; margin-top: 3%; background-color: #32bb9f; float: left; } .top_left1 img{ padding-top: 10%; } /*div 头 放智学网图片*/ .top_left2 { width: 25%; height: 80%; float: left; margin-left: 8%; margin-top: 5%; vertical-align: middle; } .top_left2 img{ width: 100%; height: 73%; } /*div 头 放竖线图片*/ .top_left3 { width: 1%; height: 100%; float: left; margin-left: 8%; margin-top: 5%; } /*div 头 写 个人中心*/ .top_left4 { margin-left: 7%; width: 28%; height: 80%; float: left; margin-top: 5%; line-height: 100%; text-align: center; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ } .img { max-width: 100%; max-height: 100%; } .self { font-size: 8%; color: #ffffff; } .user { font-size: 8%; color: #318375; } /*div 退出图片*/ .top_right1 { margin-top: 5%; width: 70%; height: 100%; float: left; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ } /*div 退出*/ .top_right2 { margin-top: 5%; width: 20%; height: 100%; margin-left: 10%; float: left; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ } .exit { font-size: 8%; color: #717983; } .main_left{ width:52%; height: 83%; margin-top: 3%; margin-left: 24%; float:left; background-color: #ffffff; } .main_right{ width: 6%; height: 45%; float:left; margin-top: 12%; margin-left: 1%; background-color: #ffffff; } .main_right1{ width: 100%; height: 11%; font-size: 8%; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ text-align: center; vertical-align: middle; color: #8c8c8c; border: 1px solid #e1e1e1; box-sizing: border-box; } .right{ width: 100%; height: 22%; border: 1px solid #e1e1e1; border-top: none; box-sizing: border-box; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ color: #8c8c8c; text-align: center; background-color: #ffffff; } .mainimg{ width: 38%; height: 37%; margin-left: 32%; //margin-top: 19%; padding-top: 19%; } .maintext{ text-align: center; width: 80%; } .maintext span{ font-size: 0.000001%; } .main_left_top{ width: 100%; height: 6%; background-color: #f9f9f9; } .btn{ width: 12.5%; height: 100%; text-align: center; float:left; border-left: 1px solid #f1f1f1; box-sizing: border-box; } a{ text-decoration: none; font-size: 10%; } a:link{ color: #656565; } a:visited{ color: #656565; } .main_left_bottom{ width: 100%; height: 94%; } /*div 中间可变区域*/ .msg{ width: 100%; height: 100%; } /*班级管理的左边*/ .class_left{ height: 100%; width: 14%; float:left; } /*div 年级选择*/ .class_left1{ margin-top: 20%; width: 100%; height: 5%; text-align: center; font-size: 80%; } .class_left1 div{ cursor: pointer; } /*div 班级左边的小项统一样式*/ .leftstyle{ border-bottom: 1px solid #f1f1f1; width: 100%; font-size: 10%; text-align: center; height: 7%; color: #8c8c8c; } /*div 选择年级弹出的选择框*/ .selectdiv{ position: absolute; left: 24%; width: 7%; height: auto; border: 1px solid #cecece; background-color: #ffffff; box-sizing: border-box; /*text-align: center;*/ } /*div 选择年级弹出的选择框的每一个小项统一样式*/ .grades{ border-bottom: 1px solid #f1f1f1; font-size: 10%; cursor: pointer; color: #666666; } .classselect span{ color: #666666; font-weight: bold; } /*每个班级项*/ .alreadyclass{ cursor: pointer; } .leftstyle div{ padding-top: 8%; } #grade0{ background-color: #33ba9f; } /*div 班级右边详情*/ .class_right{ width: 80%; height:86% ; margin-left: 3%; margin-top: 3%; float: left; } /*div 班级右边详情的上边*/ .main_right_top{ width: 100%; height: 15%; border: 1px solid #dcdcdc; border-bottom: 2px solid #dbdbdb; box-sizing: border-box; } /*div 班级右边详情的中间*/ .main_right_mid{ width: 100%; height: 27%; margin-top: 3%; border: 1px solid #dcdcdc; border-bottom: 2px solid #dbdbdb; box-sizing: border-box; } /*div 班级右边详情的下边*/ .main_right_bottom{ width: 100%; height: 51%; margin-top: 4%; border: 1px solid #dcdcdc; border-bottom: 2px solid #dbdbdb; box-sizing: border-box; } /*div 班级右边的上边 班级名称*/ .main_right_top_left{ text-align: center; height: 100%; width: 24%; font-size: 10%; vertical-align: middle; border-right: 1px dotted #dedede; box-sizing: border-box; float: left; } .classinfo{ padding-top: 15%; color: #606060; font-weight: bold; } /*div 创建时间和时钟图片*/ .main_right_top_mid{ width:50% ; margin-left: 5%; height: 100%; float: left; text-align: center; font-size: 10%; } .timetextinfo{ margin-left: 10%; float: left; margin-top: 5%; color: #a7a7a7; } .timeimg{ margin-top: 5%; float: left; } .timetext{ text-align: center; margin-top: 5%; float: left; } .main_right_top_right{ height: 100%; width: 20%; float: left; } /*div 添加学生账号*/ .add{ cursor: pointer; color: #ffffff; text-align: center; margin-top:10% ; width: 85%; height: 43%; font-size: 10%; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ background-color: #33ba9f; border-radius: 5%; } .add div{ padding-top: 3%; } /*div 添加学生账号弹框*/ .addstudent{ display: none; top:30%; left: 34%; position: absolute; display: none; width: 32%; height: 39%; background-color: #ffffff; z-index: 1002;/*当背景灰色的时候此图层可以显示*/ overflow: auto; } .addtop{ width: 100%; height: 12%; background-color: #33ba9f; } .addtop_left{ float: left; width: 15%; height: 100%; text-align: center; font-size: 15%; margin-left: 5%; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ margin-top: 2%; color: #ffffff; } .addtop_right{ float: right; margin-top: 1%; margin-right: 3%; } .addmain{ width: 100%; height: 88%; background-color: #ffffff; } .tablediv{ margin-left: 25%; width: 53%; height: 61%; padding-top: 10%; } table{ width: 100%; height: 100%; } td{ color: #adadad; font-size: 10%; word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ } .submit{ height: 90%; text-align: center; border-radius: 5%; background-color: #33ba9f; color: #ffffff; width: 100%; } .submit div{ padding-top: 10%; } .cancle{ height: 90%; text-align: center; border: 1px solid #999999; border-radius: 10%; background-color: #ffffff; color: #adadad; width: 40%; margin-left: 20%; } .cancle div{ padding-top: 10%; } /*div 教师信息上边*/ .teacher_top{ width: 100%; height: 32%; } .teacher_bottom{ width: 100%; height: 68%; } /*div 写班级教师*/ .teacher_top_left{ margin-top: 2%; float: left; margin-left: 3%; font-size: 10%; color: #888888; } /*div 写收起*/ .teacher_top_right{ margin-top: 2%; color: #b6b6b6; float: right; margin-right: 3%; font-size: 10%; cursor: pointer; } /*div 教师列表*/ .teacherinfo{ width: 95%; height: 83%; margin-left: 2%; border: 1px solid #dbdbdb; box-sizing: border-box; } .teachertable{ text-align: center; width: 100%; height: 100%; } .teachertable th{ font-size: 10%; color: #474747; background-color: #f1f1f1; } /*教师表格的头*/ .teacherfirst{ width: 10%; } .teachertable td{ border-right: 1px solid #e6e6e6; color: #9c9c9c; box-sizing: border-box; } .teacher{ cursor: pointer; } /*div 学生人数*/ .sumstudent{ width: 90%; height: 17%; margin-top: 2%; margin-left: 3%; font-size: 10%; color: #888888; } /*span 学生人数的样式*/ .countstudent{ color: #b6b6b6; font-size: 10%; } /*div 学生表格*/ .studenttablediv{ height: 56%; width: 95%; margin-left: 2%; } /*div 写转班删除*/ .studentoprationdiv{ width: 100%; height: 25%; } /*table 学生表格*/ .studenttable{ width: 100%; height: 100%; text-align: center; } .studenttable th{ font-size: 10%; color: #474747; background-color: #f1f1f1; } .studenttable td{ border-right: 1px solid #e6e6e6; color: #9c9c9c; box-sizing: border-box; } .studenttable tr{ border: 1px solid #e6e6e6; color: #9c9c9c; box-sizing: border-box; } .studenttable a:link{ color: #6ec9b5; } .studenttable a:visited{ color: #6ec9b5; } /*div 转班*/ .zbdiv{ margin-left: 5%; margin-top: 2%; width: 11%; text-align: center; background-color:#33ba9f ; height: 42%; float: left; border-radius: 5%; text-align: center; font-size: 10%; color: #f6fbfa; } /*div 删除*/ .deletediv{ margin-left: 5%; margin-top: 2%; width: 11%; height: 42%; text-align: center; background-color: #ffffff; float: left; border-radius: 10%; text-align: center; font-size: 10%; border: 1px solid #999999; box-sizing: border-box; color: #8a8a8a; } .zbdiv div{ } .deletediv div{ } .box{ color: #33ba9f; background-color: #33ba9f; border: 1px solid #33ba9f; box-sizing: border-box; } /*改变复选框样式*/ /*首先第一步就是隐藏原来的复选框*/ .regular-checkbox { display: none; } /*第二部定义现在复选框样式*/ .regular-checkbox + label { position: relative; display: inline-block; /*lable是内联元素所以需要加inline-block*/ padding: 7px; /*设置复选框大小*/ background-color: #fafafa; /*设置背景颜色*/ border-radius: 3px; /*复选框border*/ border: 1px solid #33ba9f; box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*创建的阴影效果 这里需要了解box-shadow的属性,前三个值分别是 阴影离开横方向的距离 :offset-x 阴影离开纵方向的距离 :offset-y 阴影的模糊半径: 阴影的颜色 : */ } /*第三部分做一个active的效果*/ .regular-checkbox + label:active, .regular-checkbox + label:checked + label:active { box-shadow: 0 1px 3px rgba(0,0,0,0.05); } /*选中之后的样式*/ .regular-checkbox:checked + label { background-color: #E9ECEE; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } /*选中后的效果*/ .regular-checkbox:checked + label:after { content: '\2714'; /*这是一个对勾*/ position: absolute; font-size: 12px; /*设置对勾的大小*/ top: 0px; left: 2px; /*设置位置的偏向*/ color: #33ba9f; /*设置颜色绿色*/ font-weight: bold; /*设置对勾的粗细*/ }
js:
var grade;//年级json var distinctGrade;//所有年级 var selectgrade="全部年级";//当前选择的年级 var selectclass="";//当前选择的班级 var flag=true;//教师信息默认展开 function init(){ //a标签默认选中 choose(4); //获取所有年级 $.get("data/grade.json",function(data){ distinctGrade=data; }) //获取所有班级信息 $.get("data/classes.json",function(data){ grade=data; //默认选择全部年级 selectClasses(selectgrade); //默认选择全部年级的第一个班级 clickClass(0); }) } $(function(){ init(); }) //a标签点击事件 function choose(v){ //清空样式 for(var i=1;i<=6;i++){ $("#btn"+i).css("border-top","none"); $("#msg"+i).css("display","none"); $("#btn"+i).css("background-color","#f9f9f9"); } //选中样式 $("#btn"+v).css("border-top","2px solid #33ba9f"); $("#msg"+v).css("display","block"); $("#btn"+v).css("background-color","#ffffff"); } //选择年级弹框 function openGrades(){ $("#selectdiv").css("display","block"); var str='<div class="grades" onclick="selectGrade('+0+')" id="grade0">'+"全部年级"+'</div>'; //填充年级数据 for(var i=1;i<=distinctGrade.length;i++){ str+='<div class="grades" onclick="selectGrade('+i+')" id="grade'+i+'">'+distinctGrade[i-1].grade+'</div>'; } $("#selectdiv").html(str); $("#selectdiv").css("border-bottom","3px solid #33ba9f"); /* //选择年级的鼠标移入事件 for(var j=0;j<=distinctGrade.length;j++){ $("#grade"+j).mouseover(function(){ //alert("移入"); $("#grade"+j).css("background-color","red"); }) $("#grade"+j).mouseout(function(){ //alert("移入"); $("#grade"+j).css("background-color","blue"); }) }*/ } //选择年级项 function selectGrade(i){ //清空选择标记 //$(".grades").css("background-color","#ffffff"); $("#grade"+i).css("background-color","#33ba9f"); if(i==0){ $("#grade").html("全部年级"); selectgrade="全部年级"; }else{ $("#grade").html(distinctGrade[i-1].grade); selectgrade=distinctGrade[i-1].grade; } $("#selectdiv").css("display","none"); selectClasses(selectgrade); } //选择年级来填充班级 function selectClasses(selectgrade){ //alert(selectgrade); var str=""; //填充班级数据 if(selectgrade=="全部年级"){ for(var i=0;i<grade.length;i++){ str+=' <div class="class_left2 leftstyle alreadyclass" id="rclass'+i+'" onclick="clickClass('+i+')"><div>'+grade[i].class+'</div></div>'; } }else{ for(var i=0;i<grade.length;i++){ if(selectgrade==grade[i].grade){ str+=' <div class="class_left2 leftstyle alreadyclass" id="rclass'+i+'" onclick="clickClass('+i+')"><div>'+grade[i].class+'</div></div>'; } } } $(".alreadyclass").remove(); $("#allClasses").after(str); } //点击班级 事件 -->填充右边信息 function clickClass(i){ $(".alreadyclass").css("background-color","#ffffff");//清空点击标记 $("#rclass"+i).css("background-color","#33ba9f"); selectclass=grade[i].class; var time=grade[i].time; //班级名称 $("#classinfo").html(selectclass); //创建时间 $("#timetext").html(time); //科目和任课教师 $.get("data/teacher.json",function(data){ var str1='<tr><th class="teacherfirst">科目</th>';//第一行 var str2='<tr><td>任课教师</td>';//第二行 for(var i=0;i<data.length;i++){ if(selectclass==data[i].class){ str1+='<th>'+data[i].subject+'</th>'; str2+='<td onclick="changeteacher()" class="teacher">'+data[i].teacher+'</td>'; } } str1+='</tr>'; str2+='</tr>'; str1+=str2; $("#teachertable").html(str1); }) //学生信息 $.get("data/student.json",function(data){ var sum=0;//学生总数 var student='';//学生表格 for(var i=0;i<data.length;i++){ if(selectclass==data[i].class){ sum++; student+='<tr class="newstudent">'; student+='<td><input type="checkbox" id="check'+i+'" class="regular-checkbox"><label for="check'+i+'"></label></td>'; student+='<td>'+data[i].student+'</td>';//姓名 student+='<td>'+data[i].testid+'</td>';//准考证号 student+='<td>'+data[i].studyid+'</td>';//学籍号 student+='<td>'+data[i].phone+'</td>';// student+='<td><a href="">修改</a> '+'<a href="">重置密码</a>'+'</td>'; student+='</tr>'; } } //学生人数 $(".countstudent").remove();//先清除 var str='<span class="countstudent">'+'(学生人数 : '+sum+')'+'</span>'; $("#sumstudent").append(str); //学生表格 $(".newstudent").remove();//先清除 $("#studenttable").append(student); }) }//填充结束 //更新老师 function changeteacher(){ alert("更新教师"); } //添加学生账号弹框 function add(){ $("#addstudent").css("display","block"); $("#black_overlay").css("display","block"); } //关闭窗口 function exitadd(){ $("#addstudent").css("display","none"); $("#black_overlay").css("display","none"); } //取消 function cancle(){ exitadd(); } //教师信息收起 function over(){ var str=""; if(flag){ //展开 str='展开 <img src="img/jtup.png" class="img">'; flag=false; }else{ str='收起 <img src="img/jt.png" class="img">'; flag=true; } $("#teacher_top_right").html(str); $("#teacherinfo").toggle(500); }