html 时间轴

作者：血染胸毛发布日期:2026-01-08 浏览:102

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 时间轴</title>
    <style>
        .timeline {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
        }
        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: #ddd;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }
        .container {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
        }
        .container.left {
            left: 0;
        }
        .container.right {
            left: 50%;
        }
        .container::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            right: -17px;
            background-color: white;
            border: 4px solid #FF9F55;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }
        .container.right::after {
            left: -17px;
        }
        .content {
            padding: 20px 30px;
            background-color: white;
            position: relative;
            border-radius: 6px;
        }
    </style>
</head>
<body>

<div class="timeline">
    <div class="container left">
        <div class="content">
            <h2>2020</h2>
            <p>这是一个时间轴的示例，显示了从2020年到2023年的事件。</p>
        </div>
    </div>
    <div class="container right">
        <div class="content">
            <h2>2021</h2>
            <p>每个容器代表一个时间点，并包含相关的内容和描述。</p>
        </div>
    </div>
    <div class="container left">
        <div class="content">
            <h2>2022</h2>
            <p>使用CSS样式来美化时间轴，使其更易于阅读和理解。</p>
        </div>
    </div>
    <div class="container right">
        <div class="content">
            <h2>2023</h2>
            <p>时间轴可以帮助用户更好地了解事件的时间顺序和发展过程。</p>
        </div>
    </div>
</div>

</body>
</html>

解释说明

HTML结构:
- 使用<div>标签创建时间轴的容器。
- 每个时间点用一个.container类表示，分为左(left)和右(right)两种布局。
- 每个.container内有一个.content类，用于包含具体的时间和内容。
CSS样式:
- .timeline类用于定义整个时间轴的宽度和居中对齐。
- .timeline::after伪元素用于绘制时间轴的线条。
- .container类定义每个时间点的样式，包括左右位置和背景颜色。
- .container::after伪元素用于绘制时间点的小圆圈标记。
- .content类用于定义内容区域的样式，包括内边距、背景颜色和圆角。

通过这种方式，可以创建一个美观且易读的时间轴。

上一篇：markdown 转html

下一篇：html select 禁止选择