html 横向时间轴代码

HTML横向时间轴是一种常见的网页设计元素，它有助于展示时间序列事件。以下是一个基本的HTML横向时间轴代码示例：

!DOCTYPE html>
    html>
    head>
    title>
    横向时间轴/title>
    style>
/* 样式 */ul.timeline {
    list-style-type: none;
    position: relative;
    padding-left: 1.5em;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 0;
    height: 100%;
    width: 1px;
    top: 0;
}
    ul.timeline >
 li {
    margin: 20px 0;
    padding-left: 20px;
}
    ul.timeline >
 li:before {
    content: ' ';
    background-color: #fff;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    ;
    left: 10px;
    width: 20px;
    height: 20px;
    z-index: 100;
    box-shadow: 0 0 0 4px #fff;
}
    ul.timeline >
 li:after {
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 25px;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    background: #022c46;
    box-shadow: 0 0 0 4px #d4d9df;
}
.timeline-content {
    padding: 20px;
    background-color: #1d242c;
    position: relative;
    border-radius: 6px;
    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.2);
}
.timeline-content h2 {
    color: #fff;
    margin-top: 0;
}
.timeline-content p {
    color: #ccc;
}
    /style>
    /head>
    body>
    div class="container">
    h1>
    横向时间轴/h1>
    ul class="timeline">
    li>
    div class="timeline-content">
    h2>
    时光荏苒/h2>
    p>
    这是一段时间轴的描述信息。/p>
    /div>
    /li>
    li>
    div class="timeline-content">
    h2>
    分秒不停/h2>
    p>
    这是一段时间轴的描述信息。/p>
    /div>
    /li>
    li>
    div class="timeline-content">
    h2>
    岁月静好/h2>
    p>
    这是一段时间轴的描述信息。/p>
    /div>
    /li>
    /ul>
    /div>
    /body>
    /html>
    

代码注释解释：

• ul class="timeline"> : 创建一个包含列表元素的容器作为时间轴的框架。
• li> : 列表元素，代表一个时间事件。
• div class="timeline-content"> : 列表元素的内容，并用来包含事件的详细信息。
• h2> : 时间事件的标题。
• p> : 时间事件的描述。

总体来说，你可以根据自己的需要更改时间轴的样式、添加、删除事件等,不过代码中的样式已经能满足基本需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！