<!DOCTYPE html>
<html lang="en">
<head>
<title>第三+四次课后作业</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.span {
margin-right: 30px;
margin-top: 5px;
}
th,td {
text-align: center;
}
thead {
background-color: rgb(242, 242, 242);
}
#start {
color: green;
text-decoration: underline;
}
.state {
color: red;
text-decoration: underline;
}
.operation {
color: orange;
}
.prev,.next,.page,#pages {
width: 35px;
height: 25px;
border: 1px solid lightgray;
border-radius: 10%;
color: darkgray;
text-align: center;
margin-right: 5px;
}
.prev,.next,.page {
float: right;
}
#pages {
margin-left: 5px;
margin-right: 10px;
}
.select {
border: 0;
color: white;
background-color: rgb(255, 177, 60);
}
</style>
</head>
<body>
<div class="container-fluid mt-3">
<div class="container-fluid">
<div class="col-9 mx-auto">
<p style="color: orange;"><big>| </big>部门管理</p>
<br>
<form>
<div class="row">
<div class="col input-group">
<span class="span">部门名称</span>
<input type="text" placeholder="请输入部门名称" name="email" width="30px">
</div>
<div class="col input-group">
<span class="span">状态</span>
<select class="form-select" width="30px" height="5px">
<option>请选择</option>
<option>启用</option>
<option>禁用</option>
</select>
</div>
<div class="col">
<button type="button" class="btn btn-primary">查询</button>
</div>
</div>
<br><br>
<div>
<button type="button" class="btn btn-primary">+新增部门</button>
</div>
</form>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>部门名称</th>
<th>状态</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>研发一部</td>
<td id="start">启用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
<tr>
<td>2</td>
<td>研发二部</td>
<td class="state">禁用</td>
<td>2022-07-22 11::23:00</td>
<td class="operation">编辑 删除</td>
</tr>
</tbody>
</table>
<div id="box" class="row">
<div class="col-4">
<span style="font-size: small;">每页展示数</span>
<input type="number" step="1" value="10" style="width: 50px;padding: 6px 7px;">
</div>
<div class="col-5">
<span style="font-size: small;">共<span style="color: red;">500</span>条数据</span>
<div class="next"> > </div>
<div class="page">6</div>
<div class="page">5</div>
<div class="page">4</div>
<div class="page">3</div>
<div class="page">2</div>
<div class="page select">1</div>
<div class="prev"> < </div>
</div>
<div class="col-3">
<span style="font-size: small;">跳至
<input type="text" value="1" id="pages">页</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html
第三+第四次课后作业
最新推荐文章于 2024-07-04 17:03:05 发布