目前我列出两个方案，很详细，希望可以帮助到有疑问的朋友。
方案一:
html
<ul>
<li class="active">
<em></em>
<p><b>参与考试《第一期模拟考试》</b></p>
<p><time>3小时50分钟</time></p>
</li>
<li>
<em></em>
<p><b>学习文档《LDO电路设计规范》</b></p>
<p><time>3小时50分钟</time></p>
</li>
<li>
<em></em>
<p><b>学习文档《LDO电路设计规范》</b></p>
<p><time>3小时50分钟</time></p>
</li>
</ul>
Css:
*{margin:0;padding:0;}
ul{
margin:100px;
padding:0;
list-style: none;
}
ul li{
position:relative;
padding-left: 30px;
padding-bottom: 20px;
border-left:2px #999 solid;
}
ul li em{
position:absolute; left:-5px; top:0; width:8px;
height:8px;border-radius:8px;background:#999;
}
ul li.active em{ background: red;}
ul li p{margin:0;}
ul li time{color:#999;font-size:12px;}
实现原理:
给每一个li一个左边框,em标签使用样式写成原点,采用定位将原点定位到边框线上
方案二:
Html
<ul>
<li class="active">
<img src="2.png" alt="" />
<p><b>参与考试《第一期模拟考试》</b></p>
<p><time>3小时50分钟</time></p>
</li>
<li>
<img src="1.png" alt="" />
<p><b>学习文档《LDO电路设计规范》</b></p>
<p><time>3小时50分钟</time></p>
</li>
<li>
<img src="1.png" alt="" />
<p><b>学习文档《LDO电路设计规范》</b></p>
<p><time>3小时50分钟</time></p>
</li>
</ul>
Css
*{margin:0;padding:0;}
ul{
margin:100px;
padding:0;
list-style: none;
}
ul li{
position:relative;
padding-left: 30px;
padding-bottom: 20px;
border-left:2px #999 solid;
}
ul li img{
position:absolute;
left:-5px;
top:0;
width:10px;
height:10px;
border-radius:10px;
background:#999;
}
ul li p{margin:0;}
ul li time{color:#999;font-size:12px;}
实现原理:
给li一个左边框,同时在结构中添加img作为原点,使用定位将图片原点定位在指定位置上
另外，如果想交流技术的可以
也可一关注我的博客：
都会有新的技巧以及疑难技术讲解。