html时间轴布局,html+css :时间轴布局(示例代码)

time line

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

background: #fff;

font-family: "Helvetica Neue", sans-serif;

margin: 50px;

}

#timeline{

margin-left: 30%;

border-left: 10px solid #bce1fa;

}

#timeline li{

position: relative;

list-style: none;

display: block;

width: 100%;

clear: both;

}

#timeline li::before{

content: ‘‘;

display: block;

width: 30px;

height: 30px;

border: 5px solid #bce1fa;

border-radius: 50%;

background: #3498DB;

position: absolute;

left: -25px;

top: 0;

/*box-sizing: border-box;*/

}

#timeline li time{

position: absolute;

left: -30%;

t