CSS 时间轴-CSDN博客

本文链接：https://blog.csdn.net/sinat_16664531/article/details/105725532

这是一个使用CSS实现的时间轴示例，包含多个事件点，每个事件点由时间戳和描述组成，时间轴上的事件点使用圆圈表示，描述可以跨越多行。此代码片段展示了如何用HTML和CSS创建一个直观的时间轴布局。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<title>css timeline20200423</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>.events li {
display: flex;
}

.events time {
position: relative;
color: #ccc;
padding: 0 1.5em; }

.events time::after {
content: "";
position: absolute;
z-index: 2;
right: 0;
top: 0;
transform: translateX(50%);
border-radius: 50%;
background: #fff;
border: 4px #38b48b solid;;
width: 1.5em;
height: 1.5em;
}

.events span {
padding: 0 1.5em 1.5em 1.5em;
position: relative;
}

.events span::before {
content: "";
position: absolute;
z-index: 1;
left: 0;
height: 100%;
border-left: 2px #3a3333 dashed;
}

.events strong {
display: block;
font-weight: bolder;
font-size: 22px;
color: #545454;
}

.events { margin: 1em; width: 50%; }
.events,
.events *::before,
.events *::after { box-sizing: border-box; font-family: arial; }</style>
</head>

<body>
<ul class="events">
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time and other text that may span over 2 lines</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime="10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
</ul>

</body>
</html>