方案一:

html

&lt;ul&gt;<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:

htmlulli素材CSSHTML ul li列表原点若何相连 AJAX
（图片来自网络侵删）

{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作为原点,利用定位将图片原点定位在指定位置上

来源：千锋web前端