<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="./jquery/jquery-3.4.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<title>Title</title>
<style>
#a thead tr td{
float: left;
font-size: 12px;
}
.b span{
padding: 8px;
border-radius: 7px;
}
.b1{
background-color: red;
color: white;
}
.b2{
background-color: white;
border: 1px solid gainsboro;
}
.b3{
background-color: dodgerblue;
color: white;
}
.c div{
width: 20%;
height: 20px;
text-align: center;
float: left;
line-height: 20px;
font-size: 15px;
background-color: dodgerblue;
color: white;
}
.c div:nth-child(1){
margin-right: 8%;
}
.c div:hover{
background-color: #b9def0;
color: black;
}
</style>
</head>
<body>
<table id="a" style="width: 50%;margin: 0 auto;" border="0" cellspacing="0" class="table table-striped table-hover">
<thead style=" background: #f5f5f5;">
<tr>
<td>一个学院管理界面</td>
<td style="background: gainsboro;">学员管理</td>
<td>教师管理</td>
<td style="background: gainsboro;">
<div class="dropdown" style="float: left;">
<div style="font-size: 12px;" data-toggle="dropdown"><!--data-toggle="dropdown"表示触发事件-->
其他管理<span class="caret"></span>
</div>
<ul class="dropdown-menu pull-left"><!--class="dropdown-menu"样式里包含绝对定位，不占空间。表示隐藏ul标签下的内容-->
<li><a>其他1</a></li>
<li class="divider"></li>
<li><a>其他2</a></li>
<li class="divider"></li>
<li><a>其他3</a></li>
</ul>
</div>
</td>
</tr>
</thead>
</table>
<table style="width: 50%;margin: 0 auto;margin-top: 10px;"
border="1" bordercolor="#dcdcdc" cellspacing="0" class="table table-striped table-hover">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>等级</td>
<td>学院</td>
<td>管理</td>
</tr>
</thead>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
</table>
<div style="width: 25%;height: 300px;background-color: #eff4fa;margin: 100px auto;">
<div style="width: 100%;height: 60px;background-color:#5bc0de;border-radius: 10px;">
<h2 style="text-align: center;line-height: 60px;color: black;" >欢迎使用xxxxx</h2>
</div>
<form action="#" style="width: 92%;height: 300px;margin-top: 30px;margin-left: 4%;">
<div class="form-group" style="text-align: center;">
<label for="name">账号:</label>
<input type="text" id="name">
</div>
<div class="form-group" style="margin-top: 20px;text-align: center;">
<label for="age">密码:</label>
<input type="text" id="age">
</div>
<div class="form-group">
<div class="checkbox" style="text-align: center;">
<label>
<input type="checkbox"><a style="color: black">我已阅读并同意协议</a>
</label>
</div>
</div>
<div class="c" style="width: 50%;height: 60px;margin-left: 38%;cursor:pointer;">
<div style="border-radius: 5px;">
<span>登录</span>
</div>
<div style="border-radius: 5px;">
<span>注册</span>
</div>
</div>
<div style="width: 100%;text-align: right;">
<a>忘记密码？</a>
</div>
</form>
</div>
</body>
</html>