用HTML CSS 实现简洁美观的时间线（历史年表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简洁美观的时间线</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.timeline {
position: relative;
padding: 0;
list-style: none;
}
.timeline-year {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #999;
}
.timeline-year:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
background: #444;
border-radius: 50%;
}
.timeline-year:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100px;
background: #444;
}
.timeline-entry {
position: relative;
margin-left: 20px;
}
.timeline-entry:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: #444;
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="timeline">
<li class="timeline-year" style="left: 0%;">1900</li>
<li class="timeline-entry">重要事件A</li>
<li class="timeline-entry">重要事件B</li>
<li class="timeline-year" style="left: 25%;">1950</li>
<li class="timeline-entry">重要事件C</li>
<li class="timeline-entry">重要事件D</li>
<li class="timeline-year" style="left: 50%;">2000</li>
<li class="timeline-entry">重要事件E</li>
<li class="timeline-entry">重要事件F</li>
<li class="timeline-year" style="left: 75%;">2050</li>
<li class="timeline-entry">重要事件G</li>
<li class="timeline-entry">重要事件H</li>
</ul>
</body>
</html>这个简洁美观的时间线使用了HTML和CSS来创建。它使用了一个无序列表来表示时间线，并通过CSS样式化，包括年份的圆形标记、年表之间的连线和条目。每个时间条目被表示为列表项，并通过相对定位与绝对定位相结合来排列在正确的年份标记上。这个例子提供了一个简单的方法来创建一个可扩展和可维护的时间线布局。
评论已关闭