写一个宿舍管理html
时间: 2023-12-19 10:04:30 浏览: 173
sushe.zip_宿舍管理系统
以下是一个简单的宿舍管理系统的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>宿舍管理系统</title>
<meta charset="UTF-8">
<style>
/* 样式表 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background-color: #4CAF50;
color: white;
}
form {
margin-top: 20px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>宿舍管理系统</h1>
<table>
<tr>
<th>宿舍号</th>
<th>房间号</th>
<th>床位数</th>
<th>剩余床位数</th>
<th>操作</th>
</tr>
<tr>
<td>101</td>
<td>101A</td>
<td>4</td>
<td>2</td>
<td><a href="#">查看</a></td>
</tr>
<tr>
<td>102</td>
<td>102A</td>
<td>4</td>
<td>0</td>
<td><a href="#">查看</a></td>
</tr>
<tr>
<td>103</td>
<td>103A</td>
<td>2</td>
<td>2</td>
<td><a href="#">查看</a></td>
</tr>
</table>
<form>
<h2>添加宿舍</h2>
<label for="dormitory_num">宿舍号:</label>
<input type="text" id="dormitory_num" name="dormitory_num" required>
<label for="room_num">房间号:</label>
<input type="text" id="room_num" name="room_num" required>
<label for="bed_num">床位数:</label>
<select id="bed_num" name="bed_num" required>
<option value="">请选择床位数</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
</select>
<input type="submit" value="添加">
</form>
</body>
</html>
```
上述代码展示了一个简单的宿舍管理系统页面,包含一个表格和一个表单。表格展示了已有的宿舍信息,包括宿舍号、房间号、床位数和剩余床位数,还有一个操作链接。表单用于添加新的宿舍信息,包括宿舍号、房间号和床位数。样式表部分定义了表格和表单的样式。
阅读全文