CSS- 横向和纵向时间轴

Teln_小凯

已于 2023-06-19 17:12:11 修改

阅读量1.2k

点赞数

文章标签： css javascript 前端

于 2023-06-17 17:03:18 首次发布

本文链接：https://blog.csdn.net/qq873113580/article/details/131262358

版权

这段代码展示了如何使用HTML和CSS创建横向及纵向的时间轴布局。包括了不同状态的标记（如‘报名中’、‘进行中’、‘结束’），以及事件点的样式设计。示例包含了活动进度的时间轴和一个公司发展历程的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*横向时间轴*/
        .time-horizontal {
            list-style-type: none;
            border-top: 1px solid #707070;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

        .text-horizontal {
            list-style-type: none;
            max-width: 800px;
            padding: 0px;
            margin: 0px;
        }

            .text-horizontal li {
                float: left;
                position: relative;
                text-align: center;
                width: 33.33%;
            }


        .time-horizontal li {
            float: left;
            position: relative;
            text-align: center;
            width: 33.33%;
            padding-top: 10px;
        }

        .nomal b:before {
            content: '';
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #4c4c4c;
            border-radius: 8px;
            background: #4c4c4c;
        }

        .ok b:before {
            content: '';
            position: absolute;
            top: -10px;
            left: 47%;
            width: 12px;
            height: 12px;
            border: 2px solid #0074E8;
            border-radius: 8px;
            background: #0074E8;
        }


<div id="jd" style="width:90%;margin:10px auto;" class="content">
        <div style="width:150px;">活动进度</div>
        <div style="height:10px;"></div>
        <div class="container">
            <ul class="text-horizontal" id="jdtime">
                <li><b></b>报名中</li>
                <li><b></b>进行中</li>
                <li><b></b>结束</li>
            </ul>
            <div style="height:0px; clear:both;"></div>
        </div>
        <div class="container">
            <div style="height:20px;"></div>
            <ul class="time-horizontal" id="jdzt">
                <li class="nomal"><b></b>报名中</li>
                <li class="nomal"><b></b>进行中</li>
                <li class="ok"><b></b>结束</li>
            </ul>
            <div style="height:10px; clear:both;"></div>
        </div>
    </div>

下面的是横向和纵向

<div class="container">
    <p>原文地址:http://www.cnblogs.com/xiaofeixiang/</p>
    <ul class="time-horizontal">
        <li><b></b>成立</li>
        <li><b></b>合作</li>
        <li><b></b>发展</li>
        <li><b></b>共赢</li>
    </ul>
</div>
<div class="container">
    <ul class="time-vertical">
        <li><b></b><span>1</span><a href="javascript:void(0)">keso</a></li>
        <li><b></b><span>2</span><a href="javascript:void(0)">FlyElephant</a></li>
        <li><b></b><span>3</span><a href="javascript:void(0)">博客园</a></li>
        <li><b></b><span>4</span><a href="javascript:void(0)">创业</a></li>
    </ul>
</div>


/*横向时间轴*/
.time-horizontal {
    list-style-type: none;
    border-top: 1px solid #707070;
    max-width: 800px;
    padding: 0px;
    margin: 0px;
}
 
.time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 25%;
    padding-top: 10px;
}
 
.time-horizontal li b:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 47%;
    width: 12px;
    height: 12px;
    border: 2px solid #4c4c4c;
    border-radius: 8px;
    background: #4c4c4c;
}
/*纵向时间轴*/
.time-vertical {
    list-style-type: none;
    border-left: 1px solid #707070;
    padding: 0px;
    height: 400px;
}
 
.time-vertical li {
    height: 100px;
    position: relative;
}
 
.time-vertical li a {
    display: inline-block;
    margin-left: 20px;
    margin-top: 15px;
    text-decoration: none;
    color: #000;
}
 
.time-vertical li b:before {
    content: '';
    position: absolute;
    top: 15px;
    left: -12px;
    width: 18px;
    height: 18px;
    border: 2px solid #98FB98;
    border-radius: 10px;
    background: #98FB98;
}
 
.time-vertical li span {
    position: absolute;
    color: #fff;
    top: 18px;
    left: -6px;
}