“不会动”的水货学生成绩掌握管理系统（只用html,css）_墨鱼爱吃圣代

网络 02-07 1766

文章目录学生成绩掌握系统操作素材代码块01-封面.html02-登录界面.html03-注册页面.html04-教学课程设置.html05-学生信息向导.html06-课程信息向导.html07-数据添加界面.html08-班级整体情况.html

学生成绩掌握系统

第一次做这个东西，技术也很不成熟，只凭现有html,css知识做的一个简陋系统，写的可能很繁琐，方法也不是唯一的，之后学了更好的办法会改动

操作

学生课程掌握

素材

背景图 bg.png

代码块 01-封面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01-封面</title> <style> * {margin: 0;padding:0;} div { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .biaoti { font: normal 700 60px 'STKaiti'; color: #666666; padding-top: 100px; padding-bottom: 250px; } .jinru { text-decoration: none; color: #ffff; font-size: 16px; font-weight: bold; text-align: center; } </style> </head> <body> <div> <p class="biaoti">学生课程掌握</p> <a href="02-登录界面.html" class="jinru">进入</a> </div> </body> </html> 02-登录界面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-登录界面</title> <style> * {margin: 0;padding:0;} .bg { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .fangkuang { position: absolute; left: 510px; top: 210px; width: 500px; height: 340px; background-color: rgba(255,255,255,0.5); border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.5); border-radius: 10%; } .login { font: italic 500 40px '微软雅黑'; color: #339900; padding-left: 230px; padding-top: 20px; } .username { font: normal 700 16px '微软雅黑'; color: #339900; margin-top: 30px; margin-left: 30px; } .usernamekuang { color: grey; width: 200px; height: 25px; font-size: 14px; /* display:inline-block; */ text-align: cneter; margin-left: 50px; margin-top: 20px; background-color: rgba(255,255,255,0.5); border-color: honeydew; border-radius: 10%; } .passwordkuang { color: grey; width: 200px; height: 25px; font-size: 14px; text-align: cneter; margin-left: 54px; margin-top: 20px; background-color: rgba(255,255,255,0.5); border-color: honeydew; border-radius: 10%; } /* 点击方框变色 */ input{ outline-color: #339900; } .zhuce { width: 100px; height: 35px; color: honeydew; text-align: center; font-size: 16px; background-color: #50B354; border-radius: 15%; margin-top: 50px; margin-left: 120px; line-height: 35px; display: inline-block; } .denglu { width: 100px; height: 35px; color: honeydew; text-align: center; font-size: 16px; background-color: #169BD5; border-radius: 15%; margin-left: 40px; line-height: 35px; display: inline-block; } a { text-decoration: none; color: honeydew; } </style> </head> <body> <div> <div class="bg"></div> <div class="fangkuang"> <p class="login">LOGIN IN</p> <br> <label for="text" class="username">User Name</label> <input type="text" name="username" value="123456" class="usernamekuang"> <br/> <label for="text" class="username">Pass Word</label> <input type="password" name="password" value="******" class="passwordkuang"> <br> <span class="zhuce"> <a href="03-注册页面.html">注册</a> </span> <span class="denglu"> <a href="04-教学课程设置.html">登录</a> </span> </div> </div> </body> </html> 03-注册页面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>03-注册页面</title> <style> * {margin: 0;padding:0;} .bg { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .fangkuang { position: absolute; left: 510px; top: 140px; width: 450px; height: 450px; background-color: rgba(255,255,255,0.5); border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.5); border-radius: 10%; } .register { font: italic 500 40px '微软雅黑'; color: #339900; padding-left: 230px; padding-top: 20px; } .ID { font: normal 700 16px '微软雅黑'; color: #339900; margin-top: 30px; margin-left: 30px; } .idkuang { color: grey; width: 200px; height: 25px; font-size: 14px; /* display:inline-block; */ text-align: cneter; margin-left: 110px; margin-top: 20px; background-color: rgba(255,255,255,0.5); border-color: honeydew; border-radius: 10%; } .telkuang { color: grey; width: 200px; height: 25px; font-size: 14px; /* display:inline-block; */ text-align: cneter; margin-left: 105px; margin-top: 20px; background-color: rgba(255,255,255,0.5); border-color: honeydew; border-radius: 10%; } .emailkuang { color: grey; width: 200px; height: 25px; font-size: 14px; /* display:inline-block; */ text-align: cneter; margin-left: 83px; margin-top: 20px; background-color: rgba(255,255,255,0.5); border-color: honeydew; border-radius: 10%; } .passwordkuang { color: grey; width: 200px; height: 25px; font-size: 14px; /* display:inline-block; */ text-align: cneter; margin-left: 50px; margin-top: 20px; background-color: rgba(255,255,255,0.5); border-color: honeydew; border-radius: 10%; } /* 点击方框变色 */ input{ outline-color: #339900; } .wancheng { width: 100px; height: 35px; color: honeydew; text-align: center; font-size: 16px; background-color: #169BD5; border-radius: 15%; margin-top: 50px; margin-left: 120px; line-height: 35px; display: inline-block; } .fanhui { width: 100px; height: 35px; color: honeydew; text-align: center; font-size: 16px; background-color: #50B354; border-radius: 15%; margin-left: 40px; line-height: 35px; display: inline-block; } a { text-decoration: none; color: honeydew; } </style> </head> <body> <div> <div class="bg"></div> <div class="fangkuang"> <p class="register">Register</p> <br> <label for="text" class="ID">ID</label> <input type="text" name="ID" class="idkuang"> <br/> <label for="text" class="ID">Tel</label> <input type="text" name="Tel" class="telkuang"> <br/> <label for="text" class="ID">Email</label> <input type="text" name="Email" class="emailkuang"> <br/> <label for="text" class="ID">password</label> <input type="text" name="password" class="passwordkuang"> <br/> <span class="wancheng"> <a href="02-登录界面.html">完成</a> </span> <span class="fanhui"> <a href="01-封面.html">返回</a> </span> </div> </div> </body> </html> 04-教学课程设置.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04-教学课程设置</title> <style> * {margin: 0;padding:0;} .bg { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .fangkuang { position: absolute; left: 530px; top: 230px; width: 450px; height: 340px; background-color: rgba(255,255,255,0.5); border-width: 1px; border-style: solid; border-color: rgba(121, 121, 121, 1); border-radius: 0px; } .biaoti { font: normal 700 40px '微软雅黑'; color: #339900; padding-top: 50px; padding-bottom: 50px; } .fanhui { width: 70px; height: 20px; font-size: 16px; color: aliceblue; background-color: #169BD5; /* 转换成行内块元素，可设置高度宽度 */ display:inline-block; margin-left: 12px; margin-top: 14px; text-indent: 1em; border-radius: 15%; } .next { width: 70px; height: 20px; color: honeydew; text-align: center; font-size: 16px; background-color: #50B354; border-radius: 15%; margin-top: 30px; margin-left: 180px; } .nianfen { width: 300px; height: 20px; display:inline-block; text-align: cneter; margin-left: 60px; margin-top: 25px; } .classname { width: 295px; height: 20px; font-size: 14px; color: gray; margin-left: 60px; margin-top: 30px; } .xueyuan { width: 300px; height: 20px; font-size: 14px; display:inline-block; text-align: cneter; margin-left: 60px; margin-top: 30px; } a { text-decoration: none; color: honeydew; } </style> </head> <body> <div> <div class="bg"><p class="biaoti">课程导入</p></div> <div class="fangkuang"> <span class="fanhui"> <a href="02-登录界面.html">返回</a> </span><br> <select class="nianfen"> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> <option>2023</option> <option>2024</option> <option>2025</option> </select><br> <input type="text" name="username" value="请输入课程名称" class="classname"> <br/> <select class="xueyuan"> <option>计算机与人工智能学院</option> <option>外国语学院</option> <option>会计学院</option> <option>电工与电气学院</option> <option>管理学院</option> <option>纺织学院</option> <option>环境学院</option> </select><br> <input type="text" name="username" value="请输入授课教师" class="classname"> <br/> <div class="next"> <a href="05-学生信息向导.html">下一步</a> </div> </div> </body> </html> 05-学生信息向导.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>05-学生信息向导</title> <style> * {margin: 0;padding:0;} .bg { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .fangkuang { position: absolute; left: 530px; top: 230px; width: 450px; height: 300px; background-color: rgba(255,255,255,0.5); border-width: 1px; border-style: solid; border-color: rgba(121, 121, 121, 1); border-radius: 0px; } .biaoti { font: normal 700 40px '微软雅黑'; color: #339900; padding-top: 50px; padding-bottom: 50px; } .fanhui { width: 70px; height: 20px; font-size: 16px; color: aliceblue; background-color: #169BD5; /* 转换成行内块元素，可设置高度宽度 */ display:inline-block; margin-left: 12px; margin-top: 14px; text-indent: 1em; border-radius: 15%; } .next { width: 70px; height: 20px; color: honeydew; text-align: center; font-size: 16px; background-color: #50B354; border-radius: 15%; margin-top: 40px; margin-left: 180px; } .xinxi { font: normal 600 20px '微软雅黑'; margin-left: 50px; padding-top: 30px; } .students { font: normal 500 14px '微软雅黑'; margin-left: 50px; margin-top: 50px; } .excel { font: normal 700 20px '微软雅黑'; color: #339900; margin-left: 200px; margin-top: 60px; display: inline-block; } a { text-decoration: none; color: honeydew; } </style> </head> <body> <div> <div class="bg"><p class="biaoti">课程导入</p></div> <div class="fangkuang"> <span class="fanhui"><a href="04-教学课程设置.html">返回</a></span><br> <div class="xinxi">学生信息要求：</div> <span class="students">姓名</span> <input type="checkbox" name="student" value="姓名" checked="checked"> <span class="students">学号</span> <input type="checkbox" name="student" value="学号" checked="checked"> <span class="students">班级</span> <input type="checkbox" name="student" value="班级" > <span class="students">专业</span> <input type="checkbox" name="student" value="专业" > <br> <span class="students">性别</span> <input type="checkbox" name="student" value="性别" > <span class="students">学院</span> <input type="checkbox" name="student" value="学院" > <span class="students">年级</span> <input type="checkbox" name="student" value="年级" > <div class="next"><a href="06-课程信息向导.html">下一步</a></div> <span><a href="#"> <p class="excel">点击此处导入excel文件</p> </a></span><br> </div> </div> </body> </html> 06-课程信息向导.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06-课程信息向导</title> <style> * {margin: 0;padding:0;} .bg { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .fangkuang { position: absolute; left: 425px; top: 210px; width: 650px; height: 360px; background-color: rgba(255,255,255,0.5); border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.5); border-radius: 10%; } .biaoti { font: italic 700 40px '微软雅黑'; color: #339900; padding-top: 50px; padding-bottom: 50px; } .fanhui { width: 70px; height: 20px; font-size: 16px; color: aliceblue; background-color: #169BD5; /* 转换成行内块元素，可设置高度宽度 */ display:inline-block; margin-left: 12px; margin-top: 14px; text-indent: 1em; border-radius: 15%; } .number { width: 250px; height: 20px; font-size: 14px; display:inline-block; text-align: cneter; margin-left: 30px; margin-top: 20px; } .num { margin-left: 30px; } .zhanbi { font-size: small; display: inline-block; margin-left: 30px; margin-top: 20px; } .zhanbione { color: #333333; width: 80px; height: 20px; border-color: gray; border-radius: 15%; line-height: 20px; text-indent: 1.3em; margin-left: 115px; margin-bottom: 10px; } .zhanbitwo { color: #333333; width: 80px; height: 20px; border-color: gray; border-radius: 15%; text-indent: 1.3em; margin-left: 60px; } .tianjia { color: #333333; background-color: #99CC66; width: 60px; height: 25px; margin-left: 60px; border-radius: 15%; } .mubiaoone { color: #333333; width: 100px; height: 20px; border-color: gray; border-radius: 15%; margin-left: 15px; } .mubiaotwo { color: #333333; width: 100px; height: 20px; border-color: gray; border-radius: 15%; margin-top: 20px; margin-left: 16px; } .fenshu { color: #333333; width: 80px; height: 20px; border-color: gray; border-radius: 15%; line-height: 20px; text-indent: 1.3em; margin-left: 60px; } .dabiaonum { font-size: 20px; margin-left: 100px; margin-top: 25px; display: inline-block; } .dabiao { width: 30px; height: 20px; line-height: 20px; } .next { width: 70px; height: 20px; color: honeydew; text-align: center; font-size: 16px; background-color: #50B354; border-radius: 15%; margin-top: 30px; margin-left: 280px; } a { text-decoration: none; color: honeydew; } </style> </head> <body> <div> <div class="bg"><p class="biaoti">课程相关信息添加</p></div> <div class="fangkuang"> <span class="fanhui"><a href="05-学生信息向导.html">返回</a></span><br> <strong class="num">课程目标个数：</strong> <select class="number"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select><br> <span class="zhanbi">占比</span> <input type="text" name="lunwen" value="论文" class="zhanbione"> <input type="text" name="zuoye" value="作业" class="zhanbitwo">  <input type="button" value="添加" class="tianjia"><br/>  <input type="text" name="kechengone" value="课程目标一" class="mubiaoone"> <input type="text" name="lunwen" value="0.3" class="fenshu"> <input type="text" name="lunwen" value="0.2" class="fenshu"> <br> <input type="text" name="kechengtwo" value="课程目标二" class="mubiaotwo"> <input type="text" name="lunwen" value="0.5" class="fenshu"> <input type="text" name="lunwen" value="0.5" class="fenshu"> <br> <strong class="dabiaonum">课程达标分数：</strong> <input type="text" name="fenshu" value="75" class="dabiao"> <div class="next"><a href="07-数据添加界面.html">下一步</a></div> </div> </div> </body> </html> 07-数据添加界面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>07-数据添加界面</title> <style> * {margin: 0;padding:0;} .bg { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .fangkuang { position: absolute; left: 425px; top: 210px; width: 650px; height: 360px; background-color: rgba(255,255,255,0.5); border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.5); border-radius: 10%; } .biaoti { font: italic 700 40px '微软雅黑'; color: #339900; padding-top: 50px; padding-bottom: 50px; } .fanhui { width: 70px; height: 20px; font-size: 16px; color: aliceblue; background-color: #169BD5; /* 转换成行内块元素，可设置高度宽度 */ display:inline-block; margin-left: 12px; margin-top: 14px; text-indent: 1em; border-radius: 15%; } .student { color: #333333; width: 120px; height: 20px; border-color: gray; border-radius: 15%; margin-left: 60px; margin-bottom: 20px; } .zhanbione { color: #333333; width: 80px; height: 20px; border-color: gray; border-radius: 15%; line-height: 20px; text-indent: 1.3em; margin-left: 185px; margin-bottom: 10px; } .zhanbitwo { color: #333333; width: 80px; height: 20px; border-color: gray; border-radius: 15%; text-indent: 1.3em; margin-left: 60px; } .mubiaoone { color: #333333; width: 100px; height: 20px; border-color: gray; border-radius: 15%; margin-left: 15px; } .mubiaotwo { color: #333333; width: 100px; height: 20px; border-color: gray; border-radius: 15%; margin-top: 20px; margin-left: 16px; margin-bottom: 30px; } .fenshu { color: #333333; width: 80px; height: 20px; border-color: gray; border-radius: 15%; line-height: 20px; text-indent: 1.3em; margin-left: 60px; } .tianjia { color: #333333; font-size: 14px; background-color: #fff; width: 80px; height: 25px; margin-left: 270px; margin-top: 30px; border-radius: 15%; } .zongfen { font-size: 16px; margin-left: 100px; } .zongfennum { color: #333333; width: 80px; height: 20px; border-color: gray; border-radius: 15%; line-height: 20px; text-indent: 1.3em; margin-left: 30px; } .excel { font: normal 700 20px '微软雅黑'; color: #339900; margin-left: 400px; margin-top: 20px; display: inline-block; } .next { width: 70px; height: 20px; color: honeydew; text-align: center; font-size: 16px; background-color: #50B354; border-radius: 15%; margin-top: 30px; margin-left: 280px; } a { text-decoration: none; color: honeydew; } </style> </head> <body> <div> <div class="bg"><p class="biaoti">添加学生信息</p></div> <div class="fangkuang"> <span class="fanhui"><a href="06-课程信息向导.html">返回</a></span><br> <input type="text" name="username" value="张三" class="student"> <input type="text" name="xuehao" value="2004240101" class="student"> <input type="text" name="nianji" value="软件12004班" class="student"> <br> <input type="text" name="lunwen" value="论文" class="zhanbione"> <input type="text" name="zuoye" value="作业" class="zhanbitwo"> <br>  <input type="text" name="kechengone" value="课程目标一" class="mubiaoone"> <input type="text" name="lunwen" value="98" class="fenshu"> <input type="text" name="lunwen" value="78" class="fenshu"> <br> <input type="text" name="kechengtwo" value="课程目标二" class="mubiaotwo"> <input type="text" name="lunwen" value="90" class="fenshu"> <input type="text" name="lunwen" value="" class="fenshu"> <br> <strong class="zongfen">总分（自动计算）:</strong> <input type="text" name="zongfen" value="" class="zongfennum"> <br>  <input type="button" value="添加下一个" class="tianjia"><br/> <span><a href="#"> <p class="excel">点击此处导入excel文件</p> </a></span><br> <div class="next"><a href="08-班级整体情况.html">完成</a></div> </div> </div> </body> </html> 08-班级整体情况.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>08-班级整体情况</title> <style> * {margin: 0;padding:0;} .bg { width: 900px; height: 550px; background-image: url(image/bg.png); /* 背景不平铺 */ background-repeat: no-repeat; margin: 100px auto; /* 文本居中对父级元素设置即可 */ text-align: center; } .fangkuang { position: absolute; left: 350px; top: 110px; width: 800px; height: 530px; background-color: rgba(255,255,255,0.5); border-width: 1px; border-style: solid; border-color: rgba(255,255,255,0.5); border-radius: 10%; } .biaoti { font: italic 700 40px '微软雅黑'; color: #339900; padding-top: 50px; padding-bottom: 50px; } .fanhui { width: 70px; height: 20px; font-size: 16px; color: aliceblue; background-color: #169BD5; /* 转换成行内块元素，可设置高度宽度 */ display:inline-block; margin-left: 25px; margin-top: 14px; margin-bottom: 5px; text-indent: 1em; border-radius: 15%; } .xinxi { width: 50px; height: 30px; background-color: #41B996; font-size: 14px; line-height: 30px; text-align: center; } .student { width: 50px; height: 30px; background-color: #B3E1D4; font-size: 14px; line-height: 30px; text-align: center; } .biao { margin-left: 70px; margin-top: 0px; border-color: #ffff; } a { text-decoration: none; color: honeydew; } .container { width:75px; height: 25px; margin:10px auto; } /* 主 */ #nav nav ul li{position:relative;} #nav nav{background-color:#50B354;} /* 侧边栏 */ #nav nav ul ul li{background-color:#50B354;} #nav nav ul ul li a{ width: 75px; height: 25px; font-size: 14px; line-height: 25px; border-left:1px solid grey; border-right:1px solid grey; border-bottom:1px solid grey; } #nav nav ul ul{ visibility:hidden; position: absolute; left: 0px; top: 0px; } #nav nav ul li:hover ul{ visibility:visible; z-index:100; } nav ul li{display:inline-block;} nav ul a{ background-color: #41B996; display:inline-block; line-height:25px; width:75px; height: 25px; text-align:center; color:#ffffff; text-decoration:none; font-size:14px; } nav ul a:hover{background-color:#B3E1D4;} .li { float: right; padding-left: 75px; } </style> </head> <body> <div> <div class="bg"></div> <div class="fangkuang"> <span class="fanhui"><a href="07-数据添加界面.html">返回</a></span><br>  <table align="center" border="1" cellpadding="0" cellspacing="1" class="biao" width="650" height="250"> <tr class="xinxi"><td>软件12004班</td> <td>课程目标一</td> <td></td> <td>课程目标二</td><td>总分</td><td>是否达标</td></tr> <tr class="xinxi"><td></td> <td>论文（10%）</td> <td>作业（20%）</td> <td>论文（25%）</td><td></td><td></td></tr> <tr class="student"><td >XXX</td> <td>89</td><td>78</td><td>99</td> <td>89</td><td>是</td></tr> <tr class="student"><td >XXX</td> <td>78</td><td>67</td><td>70</td> <td>72</td><td>否</td></tr> <tr class="student"><td >XXX</td> <td>89</td><td>78</td><td>96</td> <td>89</td><td>是</td></tr> <tr class="student"><td >XX</td> <td></td><td></td><td></td> <td></td><td></td></tr> <tr class="student"><td >XX</td> <td></td><td></td><td></td> <td></td><td></td></tr> <tr class="student"><td >XXX</td> <td></td><td></td><td></td> <td></td><td></td></tr> <tr class="student"><td >XXX</td> <td></td><td></td><td></td> <td></td><td></td></tr> <tr class="student"><td >XX</td> <td></td><td></td><td></td> <td></td><td></td></tr> <tr class="student"><td >XX</td> <td></td><td></td><td></td> <td></td><td></td></tr> <tr class="student"><td >总计</td> <td></td><td></td><td></td> <td></td><td>28(89%)</td></tr> </table> <div id="nav"> <nav class="container"> <ul> <li><a href="#">导出为</a> <ul class="li"> <li><a href="#">excel</a></li> <li><a href="#">word</a></li> <li><a href="#">pdf</a></li> </ul> </li> </ul> </nav> </div> </div> </div> </body> </html>