作业要求：
网页设计--第2次课课后练习
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>员工管理</title>
<link rel="stylesheet" href="./2_员工管理.css">
</head>
<body>
<p>员工管理</p>
<form action="">
<span>姓名</span><input class="txt" type="text" value="请输入员工姓名">
<span>性别</span>
<select class="txt" name="性别" >
<option value="请选择">请选择</option>
<option>男</option>
<option>女</option>
</select>
<span>入职时间从</span>
<input class="txt" type="date" value="2023/02/11">
<input class="btn" type="submit" value="查询">
</form>
<form action="">
<input class="btn" type="button" value="+新增员工">
<input class="btn" type="button" value="-批量删除">
</form>
<table>
<tr>
<th><input class="pic" type="checkbox" name="pic"></th>
<th><strong>姓名</strong></th>
<th><strong>图像</strong></th>
<th><strong>性别</strong></th>
<th><strong>职位</strong></th>
<th><strong>入职日期</strong></th>
<th><strong>最后操作时间</strong></th>
<th><strong>操作</strong></th>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>赵敏</td>
<td><img src="../img/图像.jpg"></td>
<td>女</td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2022-07-22 12:05:20</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
<tr>
<td><input class="pic" type="checkbox" name="pic"></td>
<td>风清扬</td>
<td><img src="../img/图像.jpg"></td>
<td>男</td>
<td>讲师</td>
<td>2015-07-22</td>
<td>2022-7-21 15:00:00</td>
<td class="yellow">编辑 删除</td>
</tr>
</table>
<div id="box">
<span style="font-size: small;">每页展示数</span>
<input type="number" step="1" value="10" style="width: 30px;padding: 6px 7px;margin-left: 3px;margin-top: 20px;margin-right: 500px;">
<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>
<span style="font-size: small;position: absolute;bottom: 1px;right: 250px;">跳至<input type="text" value="1" id="pages">页</span>
</div>
</body>
</html>
CSS代码：
p {
font-size: 14px;
font-family: Arial, sans-serif;
font-weight: bolder;
letter-spacing: 2px;
color: rgb(87, 178, 224);
}
span{
font-weight: bolder;
letter-spacing: 2px;
}
table,
tr,
td,
th {
border: 1px solid black;
border-collapse: collapse;
font-size: 13px;
font-family: Arial, sans-serif;
line-height: 15px;
text-align: center;
color: black;
}
th {
background-color: rgb(227, 227, 227);
}
td,
th {
width: 10%;
}
.pic {
zoom: 200%;
}
.yellow {
color: rgb(255, 177, 60);
font-weight: bolder;
}
.btn {
background-color: rgb(0, 143, 225);
border: none;
color: white;
letter-spacing: 2px;
padding: 12px 32px;
margin-right: 32px;
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
}
.txt{
padding: 12px 32px;
margin-left: 20px;
margin-right: 40px;
}
.prev,.next,.page,#pages{
width: 35px;
height: 25px;
border: 1px solid lightgray;
border-radius: 10%;
color: gray;
text-align: center;
margin-right: 5px;
}
.prev,.next,.page{
float: right;
position: relative;
top: 23px;
right: 370px;
}
#pages{
margin-left: 5px;
margin-right: 10px;
}
.select{
border: 0;
color: white;
background-color: rgb(255, 177, 60);
}
运行结果：
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
