存档 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test1.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3681294_46zo86m6ciu.css">
<script type="text/css" src="http://at.alicdn.com/t/c/font_3681294_46zo86m6ciu.js"></script>
<script type="text/javascript" src="js/test1.js"></script>
</head>
<body>
<div class="box">
<div class="contains">
<h4 class="title">teacher管理</h4>
<hr>
<table class="name">
<tr>
<td class="name_td">名称</td>
<td><input class="input_name"></td>
</tr>
</table>
<button class="button_search">
<i class="iconfont"></i>搜索</button>
<br>
<div class="buttons">
<button class="left_button" onclick="add()">
<i class="iconfont"></i>添加</button>
<button class="left_button">
<i class="iconfont"></i>修改</button>
<button class="left_button">
<i class="iconfont"></i>删除</button>
<button class="left_button">
<i class="iconfont"></i>知识图谱的展示</button>
<button class="right_button"><i class="iconfont"></i><i class="iconfont"></i></button>
<button class="right_button"><i class="iconfont"></i></button>
</div>
<br>
<br>
<div>
<table class="table">
<tr class="tr_w">
<td class="td"></td>
<td class="td">教师姓名</td>
<td class="td">关系</td>
<td class="td">学院名称</td>
<td class="td">学校名称</td>
<td class="td">教师信息</td>
</tr>
<tr class="tr_g">
<td class="td"><input type="radio"></td>
<td class="td">杨胜刚</td>
<td class="td">包含于</td>
<td class="td">金融与统计学院</td>
<td class="td">湖南大学</td>
<td class="td">杨胜刚 来源：管理员</td>
</tr>
<tr class="tr_w">
<td class="td"><input type="radio"></td>
<td class="td">杨胜刚</td>
<td class="td">包含于</td>
<td class="td">金融与统计学院</td>
<td class="td">湖南大学</td>
<td class="td">杨胜刚 来源：管理员</td>
</tr>
<tr class="tr_g">
<td class="td"><input type="radio"></td>
<td class="td">杨胜刚</td>
<td class="td">包含于</td>
<td class="td">金融与统计学院</td>
<td class="td">湖南大学</td>
<td class="td">杨胜刚 来源：管理员</td>
</tr>
<tr class="tr_w">
<td class="td"><input type="radio"></td>
<td class="td">杨胜刚</td>
<td class="td">包含于</td>
<td class="td">金融与统计学院</td>
<td class="td">湖南大学</td>
<td class="td">杨胜刚 来源：管理员</td>
</tr>
</table>
</div>
</div>
</div>
<div id="out">
<div class="title_add">
<h4 id="add">添加teacher</h4>
<button class="button_add" onclick="cancel()"><i class="iconfont"></i></button>
<button class="button_add"><i class="iconfont"></i></button>
<button class="button_add"><i class="iconfont"></i></button>
</div>
<hr>
<div class="box_add">
<br>
<hr class="hr_s">
<form action="">
<div class="part1">
<div class="part_1_name">教师姓名<br>(必填)</div>
<input required="required" oninvalid="setCustomValidity('教师姓名不能为空')" oninput="setCustomValidity('')" class="part_input" type="text">
</div>
<div class="part2">
<div class="part_1_name">学校名称<br>(必填)</div>
<select required="required" class="select" oninvalid="setCustomValidity('学校名称不能为空')" oninput="setCustomValidity('')">
<option value=""></option>
<option value="">湖南大学</option>
<option value="">中南大学</option>
<option value="">湖南师范大学</option>
</select>
</div>
<hr class="hr_s">
<div class="part1">
<div class="part_1_name">教师信息</div>
<input class="part_input" type="text">
</div>
<div class="part2">
<div class="part_1_name">学院名称<br>(必填)</div>
<select required="required" class="select" oninvalid="setCustomValidity('学院名称不能为空')" oninput="setCustomValidity('')">
<option value=""></option>
<option value="">计算机学院</option>
<option value="">材料学院</option>
<option value="">湖南师范大学</option>
</select>
</div>
<hr class="hr_s">
<div class="button2">
<button class="select_button" type="submit"><i class="iconfont"></i>提交</button>
<button class="cancel" type='button' onclick="cancel()"><i class="iconfont"></i>取消</button>
</div>
</form>
</div>
</div>
<div id="mask">
</div>
</body>
</html>
css
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: 'iconfont'; /* Project id 3681294 */
src: url('//at.alicdn.com/t/c/font_3681294_46zo86m6ciu.woff2?t=1664452823383') format('woff2'),
url('//at.alicdn.com/t/c/font_3681294_46zo86m6ciu.woff?t=1664452823383') format('woff'),
url('//at.alicdn.com/t/c/font_3681294_46zo86m6ciu.ttf?t=1664452823383') format('truetype');
}
.iconfont{
font-family:"iconfont";
font-size:16px;
font-style:normal;
}
.box {
position: fixed;
background-color: #f7f7f8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 60%;
width: 80%;
}
.contains {
background-color: white;
height: 100%;
width: 100%;
margin-top: -15px;
}
.title {
margin-left: 20px;
margin-bottom: 10px;
}
.name {
border: 2px solid lightgray;
margin-left: 20px;
display: inline-block;
border-collapse: collapse;
}
.name_td {
text-align: center;
width: 50px;
border-collapse: collapse;
border-right: 2px solid lightgray;
}
.input_name {
border-style: none;
}
.button_search {
border-radius: 3px;
background-color: #1ab294;
border-style: none;
vertical-align: top;
height: 30px;
margin-left: 10px;
color: #f7f7f8;
}
.left_button {
margin-top: 5px;
border-radius: 3px;
background-color: #1ab294;
border-style: none;
float: left;
margin-left: 20px;
width: auto;
height: 25px;
color: #f7f7f8;
}
.right_button {
border-radius: 3px;
background-color: #1ab294;
border-style: none;
float: right;
color: #f7f7f8;
width: auto;
height: 25px;
}
.td {
border: 1px solid #e4e4e5;
border-collapse: collapse;
}
.tr_g {
background-color: #f7f7f8;
border: 1px solid #e4e4e5;
border-collapse: collapse;
}
.tr_w {
border: 1px solid #e4e4e5;
border-collapse: collapse;
}
.table {
border: 1px solid #e4e4e5;
border-collapse: collapse;
width: 100%;
height: 200px;
text-align: center;
}
#out {
display: none;
background-color: #f3f3f4;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 50%;
z-index: 99;
}
#mask {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80;
background-color: gray;
filter: opacity(50%);
}
.title_add {
background-color: #f8f8f8;
width: 100%;
margin-bottom: 0;
display: inline-block;
}
#add {
display: inline-block;
padding-left: 30px;
}
.button_add {
float: right;
}
.box_add {
transform: translate(5%);
background-color: #ffffff;
height: 70%;
width: 90%;
}
.part1 {
float: left;
width: 50%;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
.part_1_name {
display: inline-block;
}
.part_input {
vertical-align: top;
height: 33px;
}
.part2 {
float: right;
width: 50%;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
.select {
vertical-align: top;
height: 40px;
text-align: center;
}
.hr_s {
vertical-align: center;
width: 70%;
}
.button2 {
padding-top: 30px;
padding-left:120px
}
.select_button {
background-color: #23c6c8;
color: white;
border-style: none;
width: 70px;
height: 30px;
margin-left: 10px;
}
.cancel {
background-color: #ed5565;
color: white;
border-style: none;
width: 70px;
height: 30px;
margin-left: 10px;
}
js
function add(){
let out = document.getElementById("out")
let mask = document.getElementById("mask")
mask.style.display="block"
out.style.display="block"
}
function cancel(){
let out = document.getElementById("out")
let mask = document.getElementById("mask")
mask.style.display="none"
out.style.display="none"
}
