html+css实现时间轴

html部分

< div class=“datagrid-mac-ower”>

< ul class=“time-vertical” id=“ower-result”>

< /ul>

< /div>

css部分：

.datagrid-mac-ower {

width: 300px;

height: 480px;

margin-left: 20px;

overflow-y: scroll;

}

.time-vertical {

list-style-type: none;

border-left: 2px solid #000;

margin-left: 10px;

padding: 0px;

}

.datagrid-btable{

width:320px;

}

.time-vertical li {
        height: 80px;
        position: relative;
        width: 240px;
    }

            .time-vertical li a {
                display: inline-block;
                margin-left: 20px;
                margin-top: 15px;
                text-decoration: none;
                color: #000;
                height: 60px;
                background: #fff;
                width: 240px;
            }

            .time-vertical li b:before {
                content: '';
                position: absolute;
                top: 18px;
                left: -10px;
                width: 12px;
                height: 12px;
                border: 2px solid red;
                border-radius: 10px;
                background: red;
            }

            .time-vertical li span {
                position: absolute;
                color: #fff;
                top: 18px;
                left: -6px;
            }
            .time-vertical li div {
                text-align:left;
                font-size:13px;
                top: 18px;
                margin-left: 10px;
            }
           

js部分动态添加时间轴：

查询初始处调用该方法即可

function addTimeOwer(data) {

var content = ‘’;

var b = 0;

for (var i = 0; i < 8; i++) {

b = i+1;

content = ‘< li>< b>< /b>< span>’ + b +’< /span>< a href=“javascript:void(0)”>< div>2016-09-01 00:23:34< /div>< div>沣惠南路华晶广场< /div>< div>【IMSI】534746788953893< /div> < /a>< /li >’;

$("#ower-result").append(content);

}

}