css如何实现时间线

这里参考 https://www.layui.com/demo/timeline.html
在这里插入图片描述
重点在于：最后一条竖线怎么删除？

竖线用伪类来实现
本来我想着伪类选最后一个元素然后让他不要竖线，发现不起作用，于是我就换了思路，直接让他宽度是0 就解决了

.layui-timeline-item:last-child::before {
    content: '';
     position: absolute;
     left: 5px;
     top: 0;
     z-index: 0;
     width: 0;
     height: 100%;
 }
 .layui-timeline-item::before {
     content: '';
     position: absolute;
     left: 5px;
     top: 0;
     z-index: 0;
     width: 1px;
     height: 100%;
 }

源码：

<!DOCTYPE html >
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul,
        li {
            /*做时间轴的线*/
            margin: 0;
            padding: 0;
        }

        .layui-timeline {
            padding-left: 5px;
        }

        .layui-timeline-item {
            position: relative;
            padding-bottom: 20px;
        }

        li {
            list-style: none;
        }

        .layui-timeline-item:first-child::before {
            display: block;
        }

        .layui-timeline-item:last-child::before {
            content: '';
            position: absolute;
            left: 5px;
            top: 0;
            z-index: 0;
            width: 0;
            height: 100%;
        }
        .layui-timeline-item::before {
            content: '';
            position: absolute;
            left: 5px;
            top: 0;
            z-index: 0;
            width: 1px;
            height: 100%;
        }

        .layui-timeline-item::before,
        hr {
            background-color: #e6e6e6;
        }

        .layui-timeline-axis {
            position: absolute;
            left: -5px;
            top: 0;
            z-index: 10;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #fff;
            color: #5FB878;
            border-radius: 50%;
            text-align: center;
            cursor: pointer;
        }

        .layui-icon {
            font-family: layui-icon !important;
            font-size: 16px;
            font-style: normal;
        }

        .layui-timeline-content {
            padding-left: 25px;
        }

        .layui-text {
            line-height: 22px;
            font-size: 14px;
            color: #666;
        }

        .layui-timeline-title {
            position: relative;
            margin-bottom: 10px;
        }
    </style>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>

<body>

    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月18日</h3>
                <p>
                    layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                    <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                    <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月16日</h3>
                <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
                <ul>
                    <li>《登高》</li>
                    <li>《茅屋为秋风所破歌》</li>
                </ul>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月15日</h3>
                <p>
                    中国人民抗日战争胜利日
                    <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                    <br>铭记、感恩
                    <br>所有为中华民族浴血奋战的英雄将士
                    <br>永垂不朽
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>
    </ul>
</body>

</html>

在这里插入图片描述源码：

<!DOCTYPE html >
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul,
        li {
            /*做时间轴的线*/
            margin: 0;
            padding: 0;
        }

        .layui-timeline {
            padding-left: 50%;
            padding-top:20px
        }

        .layui-timeline-item {
            position: relative;
            padding-bottom: 20px;
            margin-top:-12px;
        }

        li {
            list-style: none;
        }

        .layui-timeline-item:first-child::before {
            display: block;
        }

        .layui-timeline-item:last-child::before {
            content: '';
            position: absolute;
            left: 5px;
            top: 0;
            z-index: 0;
            width: 0;
            
        }

        .layui-timeline-item::before {
            content: '';
            position: absolute;
            /* left: 5px; */
            top: 0;
            z-index: 0;
            width: 1px;
            height: 100%;
        }

        .layui-timeline-item::before,
        hr {
            background-color: #569fff;
        }

        .layui-timeline-axis {
            position: absolute;
            left: -5px;
            top: 0;
            z-index: 10;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #fff;
            color: #5FB878;
            border-radius: 50%;
            text-align: center;
            cursor: pointer;
        }

        .layui-icon {
            font-family: layui-icon !important;
            font-size: 16px;
            font-style: normal;
        }

        .layui-timeline-content {
            padding-left: 25px;
        }

        .layui-text {
            line-height: 22px;
            font-size: 14px;
            color: #666;
            top:-10px;
        }

        .layui-timeline-title {
            position: relative;
            margin-bottom: 10px;
        }

        .circle {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #569fff;
        }

        .etime-first {
            top: 45%;
            left: -100px;
            position: absolute;
        }

        .time-first {
            position: absolute;
            left: -60px;
        }
    </style>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>

<body>

    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <div class="relative">
                <span class="time-first">06:40</span>
                <span class="etime-first">3小时15分钟</span>
            </div>
            <i class="layui-icon layui-timeline-axis circle"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">江北国际机场2A</h3>
                <p>
                    layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                    <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                    <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                </p>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="relative">
                <span class="time-first">06:40</span>
                <span class="etime-first">3小时15分钟</span>
            </div>
            <i class="layui-icon layui-timeline-axis circle"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月16日</h3>
                <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
                <ul>
                    <li>《登高》</li>
                    <li>《茅屋为秋风所破歌》</li>
                </ul>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="relative">
                <span class="time-first">06:40</span>
                <span class="etime-first">3小时15分钟</span>
            </div>
            <i class="layui-icon layui-timeline-axis circle"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">8月15日</h3>
                <p>
                    中国人民抗日战争胜利日
                    <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                    <br>铭记、感恩
                    <br>所有为中华民族浴血奋战的英雄将士
                    <br>永垂不朽
                </p>
            </div>


        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis circle"></i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>
    </ul>
</body>

</html>

css如何实现时间线

猜你喜欢