中国 · 深圳。2019电机控制先进技术研讨会(秋季)" />

h5简单实现时间轴效果

来源:简书 分类: 文章浏览史 发布时间:2020-08-28 22:49:09 最后更新:2020-08-28 浏览:77
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-28 22:49:09
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>
php技术微信