文章目录
学生成绩掌握系统
第一次做这个东西，技术也很不成熟，只凭现有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 里面去-->
<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>