CSS水平时间轴是一种网页设计元素,用于展示一系列事件或数据点,这些事件或数据点按照时间顺序排列。时间轴通常以水平线的形式呈现,每个事件或数据点在时间线上有一个标记,并且可以通过悬停或其他交互方式显示详细信息。
以下是一个简单的CSS水平时间轴示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Horizontal Timeline</title>
<style>
.timeline {
position: relative;
max-width: 1200px;
margin: 50px auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #000;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timeline-item {
position: relative;
margin-bottom: 50px;
}
.timeline-item::before {
content: attr(data-date);
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
color: #333;
}
.timeline-content {
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="timeline">
<div class="timeline-item" data-date="2020">
<div class="timeline-content">
<h3>Event 1</h3>
<p>Description of event 1.</p>
</div>
</div>
<div class="timeline-item" data-date="2021">
<div class="timeline-content">
<h3>Event 2</h3>
<p>Description of event 2.</p>
</div>
</div>
<div class="timeline-item" data-date="2022">
<div class="timeline-content">
<h3>Event 3</h3>
<p>Description of event 3.</p>
</div>
</div>
</div>
</body>
</html>
.timeline::after
和.timeline-item
的定位和宽度设置,确保它们正确对齐。通过以上方法,可以解决大多数CSS水平时间轴设计中遇到的问题。
没有搜到相关的文章