用含css的js代码实现简单的薪资信息管理页面
时间: 2024-02-26 22:57:11 浏览: 17
好的,以下是一个简单的薪资信息管理页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>薪资信息管理</title>
<style>
/* CSS样式定义 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
margin-top: 50px;
}
table {
margin: 50px auto;
border-collapse: collapse;
width: 80%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
th, td {
text-align: center;
padding: 10px;
border: 1px solid #ccc;
}
th {
background-color: #333;
color: #fff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.add-btn {
display: block;
margin: 30px auto;
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.add-btn:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>薪资信息管理</h1>
<table>
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>基本工资</th>
<th>奖金</th>
<th>绩效评分</th>
<th>实发工资</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>8000</td>
<td>500</td>
<td>90</td>
<td>8550</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>9000</td>
<td>800</td>
<td>85</td>
<td>9770</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>10000</td>
<td>1000</td>
<td>95</td>
<td>11250</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<button class="add-btn">添加员工</button>
<script>
// JS代码定义
const addBtn = document.querySelector('.add-btn');
addBtn.addEventListener('click', function() {
// 弹出添加员工的对话框
// ...
});
</script>
</body>
</html>
```
这段代码使用了一些CSS样式来美化页面,包括页面背景、标题样式、表格样式、操作按钮样式等。同时,还使用了一些JavaScript代码来实现添加员工的功能,点击“添加员工”按钮时会弹出一个对话框,供用户输入新员工的信息。由于没有完整的代码实现,所以具体的实现方式就不展示了。