請你幫我用HTML製作一個設備運行實況的電子看板
时间: 2024-02-24 21:55:14 浏览: 22
好的,以下是一个简单的设备运行实况的电子看板的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>设备运行实況</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
h1 {
text-align: center;
margin-top: 50px;
}
table {
margin: auto;
border-collapse: collapse;
border: 1px solid #ddd;
width: 80%;
}
th, td {
padding: 12px;
text-align: center;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
.status-ok {
color: green;
font-weight: bold;
}
.status-warning {
color: orange;
font-weight: bold;
}
.status-error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>设备运行实況</h1>
<table>
<tr>
<th>设备名称</th>
<th>运行状态</th>
<th>最近更新时间</th>
</tr>
<tr>
<td>设备 A</td>
<td class="status-ok">正常运行</td>
<td>2021-10-01 10:30:00</td>
</tr>
<tr>
<td>设备 B</td>
<td class="status-warning">运行异常</td>
<td>2021-10-01 11:00:00</td>
</tr>
<tr>
<td>设备 C</td>
<td class="status-error">停机</td>
<td>2021-10-01 12:00:00</td>
</tr>
</table>
</body>
</html>
```
以上代码中,我们使用了 HTML 表格来展示设备的运行状态,表格中包含三列:设备名称、运行状态、最近更新时间。根据设备的运行状态,我们使用了不同的 CSS 样式来标识,例如正常运行使用 `.status-ok` 样式,运行异常使用 `.status-warning` 样式,停机使用 `.status-error` 样式。你可以根据需要自定义 CSS 样式来美化电子看板的外观。