写一个简单的甘特图代码
时间: 2023-12-01 15:01:23 浏览: 24
以下是一个简单的甘特图代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>甘特图</title>
<style>
#chart {
margin: 50px auto;
width: 800px;
height: 400px;
background-color: #f5f5f5;
border: 1px solid #ddd;
position: relative;
}
.task {
position: absolute;
border: 1px solid #ccc;
background-color: #fff;
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 14px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
.task:hover {
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
.task.finished {
background-color: #d9edf7;
border-color: #bce8f1;
}
</style>
</head>
<body>
<h1>甘特图</h1>
<div id="chart">
<div class="task" style="left: 100px; top: 50px; width: 150px;">任务1</div>
<div class="task finished" style="left: 300px; top: 100px; width: 200px;">任务2</div>
<div class="task" style="left: 200px; top: 150px; width: 100px;">任务3</div>
<div class="task" style="left: 400px; top: 200px; width: 150px;">任务4</div>
<div class="task" style="left: 500px; top: 250px; width: 100px;">任务5</div>
</div>
</body>
</html>
```
该代码使用 HTML、CSS 实现了一个简单的甘特图,包括任务名称、任务时间和完成情况。每个任务都用一个 div 元素表示,并定位到 chart 容器中的相应位置。任务的完成情况通过添加 finished 类来标记。