“不会动”的水货学生成绩掌握管理系统（只用html,css）
文章目录
- 学生成绩掌握系统
-
- 操作
- 素材
- 代码块
-
- 01-封面.html
- 02-登录界面.html
- 03-注册页面.html
- 04-教学课程设置.html
- 05-学生信息向导.html
- 06-课程信息向导.html
- 07-数据添加界面.html
- 08-班级整体情况.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 INp> <br>
<label for="text" class="username">User Namelabel>
<input type="text" name="username" value="123456" class="usernamekuang"> <br/>
<label for="text" class="username">Pass Wordlabel>
<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">Registerp> <br>
<label for="text" class="ID">IDlabel>
<input type="text" name="ID" class="idkuang"> <br/>
<label for="text" class="ID">Tellabel>
<input type="text" name="Tel" class="telkuang"> <br/>
<label for="text" class="ID">Emaillabel>
<input type="text" name="Email" class="emailkuang"> <br/>
<label for="text" class="ID">passwordlabel>
<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>2019option>
<option>2020option>
<option>2021option>
<option>2022option>
<option>2023option>
<option>2024option>
<option>2025option>
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>1option>
<option>2option>
<option>3option>
<option>4option>
<option>5option>
<option>6option>
<option>7option>
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 >XXXtd> <td>89td><td>78td><td>99td> <td>89td><td>是td>tr>
<tr class="student"><td >XXXtd> <td>78td><td>67td><td>70td> <td>72td><td>否td>tr>
<tr class="student"><td >XXXtd> <td>89td><td>78td><td>96td> <td>89td><td>是td>tr>
<tr class="student"><td >XXtd> <td>td><td>td><td>td> <td>td><td>td>tr>
<tr class="student"><td >XXtd> <td>td><td>td><td>td> <td>td><td>td>tr>
<tr class="student"><td >XXXtd> <td>td><td>td><td>td> <td>td><td>td>tr>
<tr class="student"><td >XXXtd> <td>td><td>td><td>td> <td>td><td>td>tr>
<tr class="student"><td >XXtd> <td>td><td>td><td>td> <td>td><td>td>tr>
<tr class="student"><td >XXtd> <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="#">excela>li>
<li><a href="#">worda>li>
<li><a href="#">pdfa>li>
ul>
li>
ul>
nav>
div>
div>
div>
body>
html>