用含css的js代码实现简单的福利信息管理页面
时间: 2024-02-26 21:57:20 浏览: 19
好的,以下是一个简单的福利信息管理页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>福利信息管理</title>
<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-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
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: 14px 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>张三</td>
<td>男</td>
<td>28</td>
<td>程序员</td>
<td><a href="#">编辑</a> | <a href="#">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>25</td>
<td>设计师</td>
<td><a href="#">编辑</a> | <a href="#">删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>32</td>
<td>销售员</td>
<td><a href="#">编辑</a> | <a href="#">删除</a></td>
</tr>
</table>
<form>
<label>姓名</label>
<input type="text" name="name">
<label>性别</label>
<select name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<label>年龄</label>
<input type="text" name="age">
<label>职位</label>
<input type="text" name="position">
<input type="submit" value="添加">
</form>
</body>
</html>
```
该页面包括一个表格,用于展示已有的福利信息,以及一个表单,用于添加新的福利信息。CSS代码实现了表格的样式和表单的样式,包括颜色、边框、背景色等。同时,表单中的输入框和下拉菜单也被美化了。
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)