关于html:写一个简单的时间轴

利用相对路径以及动静left的大小展现不同工夫对应的图片

<div className="timeLine">  <div className="cList">    <ul className="cUl" style={{ left: currentIndex * 1800 + "px" }}>      {list.map((v, index) => (        <li key={index} style={{ left: index * -1800 + "px" }}>          <div className="container-li">            <div className="li-left">              <img src={v.img} alt=""  width="100%" height="100%"/>            </div>            <div className="li-right">              <h4>{v.date}</h4>              <p>{v.text}</p>            </div>          </div>        </li>      ))}    </ul>  </div>{" "}  <div className="yearList">    <ul>      {dateList.map((v, index) => (        <li          className={[index === currentIndex ? "year-active" : ""]}          key={index}          onClick={this.onchange.bind(this, index)}        >          {v}        </li>      ))}    </ul>  </div></div>

ul li {  list-style: none;}.timeLine {  height: 300px;}.cList {  width: 100%;  position: relative;}.cUl {  width: 100%;  height: 190px;  margin: 0 auto;  position: relative;  left: 0px;}.cUl li {  width: 100%;  position: absolute;  padding: 8px 0;}.container-li {  display: flex;  align-items: center;}.yearList {  width: 100%;  list-style: none;  position: relative;  z-index: 5;  margin-bottom: 0;}.yearList ul {  height: 30px;}.yearList li {  float: left;  height: 100%;  cursor: pointer;  text-align: center;  font-size: 14px;  line-height: 30px;  width: 30%;}.year-active {  background: #6478a4;  color: white;}