甘特图网页制作,vps主机价格咨询,国外 vps服务器,linux搭建vps,vps激活

🗣 Wd提问: 甘特图网页制作

🤖 Ai回答:
制作一个甘特图网页可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例，展示如何创建一个基本的甘特图网页。

HTML部分

html
<!DOCTYPE html
<html lang=en
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title甘特图</title
<link rel=stylesheet href=styles.css
</head
<body
<div class=gantt-chart
<header
<h1项目甘特图</h1
</header
<section class=time-axis
<ul
<li周一</li
<li周二</li
<li周三</li
<li周四</li
<li周五</li
<li周六</li
<li周日</li
</ul
</section
<section class=tasks
<div class=task data-start=2 data-end=5
<span class=task-name任务1</span
</div
<div class=task data-start=4 data-end=7
<span class=task-name任务2</span
</div
<div class=task data-start=6 data-end=9
<span class=task-name任务3</span
</div
</section
</div
<script src=script.js</script
</body
</html

CSS部分（styles.css）

css
body {
font-family: Arial, sans-serif;
}

.gantt-chart {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}

header {
text-align: center;
}

.time-axis ul {
list-style-type: none;
padding: 0;
width: 100%;
display: flex;
justify-content: space-between;
}

.time-axis li {
width: 12.5%; /* 7 days / 100% */
text-align: center;
border-bottom: 1px solid ccc;
}

.tasks {
width: 100%;
display: flex;
justify-content: space-between;
}

.task {
position: relative;
height: 50px;
background-color: bde0fe;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.task-name {
color: white;
}

JavaScript部分（script.js）

javascript
document.addEventListener('DOMContentLoaded', function() {
const tasks = document.querySelectorAll('.task');
tasks.forEach(task = {
const startDay = parseInt(task.getAttribute('data-start'));
const endDay = parseInt(task.getAttribute('data-end'));

task.style.left = `${(startDay 1) * 12.5}%`;
task.style.width = `${((endDay startDay) + 1) * 12.5}%`;
});
});

解释

1、HTML部分：定义了甘特图的基本结构，包括头部、时间轴和任务列表。
2、CSS部分：设置了甘特图的样式，包括时间轴和任务的布局。
3、JavaScript部分：通过计算任务的开始和结束日期，动态调整任务的位置和宽度。

这个示例是一个非常基础的甘特图实现。你可以根据需要进一步扩展和美化它，例如添加更多的功能、支持更多的时间单位等。

Ai作答

📣 商家广告：