美文网首页
h5简单实现时间轴效果

h5简单实现时间轴效果

作者: 苦茶_12138 | 来源:发表于2020-03-05 17:55 被阅读0次
1583401867(1).jpg
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .schedule_list {
                width: 360px;
                padding-right: 16px;
                padding-left: 4px;
                line-height: 1;
            }
            
            .schedule_list li {
                position: relative;
                padding: 0 0 10px 20px;
                border-left: 1px solid #e1e1e1;
                list-style: none;
            }
            
            .schedule_list .tit {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                /*margin-top: 10px;*/
                font-size: 16px;
            }
            
            .schedule_list li:before {
                position: absolute;
                left: -5.5px;
                top: 0;
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 7px;
                border: 2px solid #d00000;
                background-color: #fff;
            }
            
            .schedule_list .done:before {
                border-color: #999;
            }
        </style>
    </head>

    <body>
        <div class="schedule_list">
            <ul>
                <li>
                    <p>
                        <span class="time">2019-12-12</span>
                        <i class="icon"></i> 中国 <span class="fblod">·</span> 深圳
                    </p>
                    <p class="tit">
                        <a href="" target="_blank">第六届中国物联网大会</a>
                    </p>
                </li>
                <li>
                    <p>
                        <span class="time">2019-11-17</span>
                        <i class="icon"></i> 中国 <span class="fblod">·</span> 深圳
                    </p>
                    <p class="tit">
                        <a href="" target="_blank">2019第五届中国硬件创新大赛全国总决赛</a>
                    </p>
                </li>
                <li>
                    <p>
                        <span class="time">2019-11-8</span>
                        <i class="icon"></i> 中国 <span class="fblod">·</span> 深圳
                    </p>
                    <p class="tit">
                        <a href="" target="_blank">2019电机控制先进技术研讨会(秋季)</a>
                    </p>
                </li>
                <li class="done">
                    <p>
                        <span class="time">2019-9-20</span>
                        <i class="icon"></i> 中国 <span class="fblod">·</span> 深圳
                    </p>

                    <p class="tit">
                        <a href="" target="_blank">2019年中国模拟半导体大会</a>
                    </p>
                </li>
                <li class="done">
                    <p>
                        <span class="time">2019-6-28</span>
                        <i class="icon"></i> 中国 <span class="fblod">·</span> 深圳
                    </p>
                    <p class="tit">
                        <a href="" target="_blank">2019年人工智能技术峰会</a>
                    </p>
                </li>
                <li class="done">
                    <p>
                        <span class="time">2019-3-28</span>
                        <i class="icon"></i> 中国 <span class="fblod">·</span> 深圳
                    </p>
                    <p class="tit">
                        <a href="" target="_blank">2019年无刷直流电机控制技术研讨会</a>
                    </p>
                </li>

                <li class="last done">
                    <p>
                        <span class="time">2018-12-4</span>
                        <i class="icon"></i> 中国 <span class="fblod">·</span> 深圳
                    </p>
                    <p class="tit">
                        <a href="" target="_blank">第五届中国物联网大会</a>
                    </p>
                </li>
            </ul>
        </div>

    </body>

</html>

相关文章

网友评论

      本文标题:h5简单实现时间轴效果

      本文链接:https://www.haomeiwen.com/subject/tooqrhtx.html